Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React 360

Avatar for Randy Vianda Putra Randy Vianda Putra
August 03, 2019
Technology
0
360

Intro to React 360

Tech Talk about React 360 at Facebook Developer Circles From Bandung

Avatar for Randy Vianda Putra

Randy Vianda Putra

August 03, 2019
Tweet

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
0
230
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
250
Berkarir Sebagai Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
1
480
Introduction to Full Stack JS
Avatar for Randy Vianda Putra randyviandaputra
1
210
Introduction_To_React.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
300
Micro_Frontend.pdf
Avatar for Randy Vianda Putra randyviandaputra
2
420
react_native_training.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
290

Other Decks in Technology

See All in Technology
スタートアップの事業成長を支えるアーキテクチャとエンジニアリング
Avatar for どら doragt
1
7.5k
IaC を使いたくないけどポリシー管理をどうにかしたい
Avatar for kazzpapa3 kazzpapa3
1
160
LINEスキマニ/LINEバイトにおけるバックエンド開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
380
単一Kubernetesクラスタで実現する AI/ML 向けクラウドサービス
Avatar for Preferred Networks pfn
PRO
1
360
OSだってコンテナしたい❗Image Modeが切り拓くLinux OS運用の新時代
Avatar for Masataka Tsukamoto tsukaman
0
130
AI時代のインシデント対応 〜時代を切り抜ける、組織アーキテクチャ〜
Avatar for Kazuto Kusama jacopen
4
130
Dev Containers と Skaffold で実現する クラウドネイティブ開発環境 ローカルのみという制約に挑む / Cloud-Native Development with Dev Containers and Skaffold: Tackling the Local-Only Constraint
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
変わるもの、変わらないもの ：OSSアーキテクチャで実現する持続可能なシステム
Avatar for gree_tech gree_tech
PRO
0
660
社内外から"使ってもらえる"データ基盤を支えるアーキテクチャの秘訣/登壇資料（飯塚 大地・高橋 一貴）
Avatar for Hacobu hacobu
PRO
0
6.7k
AI × クラウドで シイタケの収穫時期を判定してみた
Avatar for Lamaglama39 lamaglama39
1
390
膨大なデータをどうさばく？ Java × MQで作るPub/Subアーキテクチャ
Avatar for igu zenta
0
120
AI駆動開発を実現するためのアーキテクチャと取り組み
Avatar for Yuichiro Yamashita baseballyama
17
12k

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
760
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
Docker and Python
Avatar for Tania Allard trallard
46
3.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k

Transcript

  1. Intro To React 360 Facebook Developer Circles - 3 August,

    2019

  2. Randy Vianda Putra, live in Bandung - Frontend Engineer @WorkLifeBeyond

    - Instructor @Cilsy Hello [email protected] github.com/randyviandaputra @randyvp

  3. Agenda - What is React 360 - What is Three.js

    - History of React 360 - Getting Started - Core Components - Fundamental React 360 - Why should we use React 360

  4. Let’s Start

  5. What is React 360 ?

  6. What is React 360 ? A Javascript framework for creation

    3D and VR user interfaces with React and uses Three.js for rendering

  7. What is Three.js ?

  8. What is three.js - 3D javascript library - Renderers: WebGL,

    <canvas>, <svg>, CSS3D / DOM, and more - Easy to use

  9. History of React 360 ?

  10. History of React 360 - Released on 19 Apr, 2017

    (Facebook and Oculus) - Formerly known as React VR (RIP) - Re releasing as React 360 on 2 May, 2018

  11. React 360 vs ReactVR - Introduced “Environment” API - Introduced

    “Surfaces” for 2D layouts - “VideoPano”, “Sound” components replaced with “VideoModule” and “AudioModule” - “Model” renamed to “Entity” - Removed “Box”, “Cylinder”, “CylindricalPanel”, “AmbientLight”, “DirectionalLight”, “PointLight”, “SpotLight” - etc

  12. Getting Started React 360 ?

  13. Getting Started React 360 $ npm install -g react-360-cli $

    react-360 init HelloFbDevC $ cd HelloFbDevC $ npm start $ npm run bundle (generate a production build)

  14. Sample Project

  15. File Structure

  16. index.js

  17. client.js

  18. Core Components ?

  19. Core Components View Text Image

  20. Fundamental React 360 ?

  21. 3D Coordinates

  22. 3D Background Images

  23. 3D Background Videos

  24. Interactions

  25. Loading Models

  26. React 360 Modules - VideoModule - AudioModule

  27. React 360 APIs - Environment - Animated - ControllerInfo -

    AsyncStorage

  28. Why Should We Use React 360 ?

  29. “ EASY TO LEARN 29

  30. “ LEARN ONCE, WRITE ANYWHERE 30

  31. “ React dev tools React Chrome extension make debugging so

    much easier 31

  32. “ Facebook are maintaining this project 32

  33. Links - https:/ /reactjs.org - https:/ /facebook.github.io/react-360 - https:/ /threejs.org

    - https:/ /alligator.io/react/react-360

  34. Source Code https://bit.ly/2YhISge Demo https://hellofbdevc.netlify.com

  35. 35 Thanks Any questions?