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

Intro to React 360

73eeac32b9932a63ed361f1ff5c5e92a?s=47 Randy Vianda Putra
August 03, 2019
Technology
0
100

Intro to React 360

Tech Talk about React 360 at Facebook Developer Circles From Bandung

73eeac32b9932a63ed361f1ff5c5e92a?s=128

Randy Vianda Putra

August 03, 2019
Tweet

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
23
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
62
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
170
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
39
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
77
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
3
100
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
60

Other Decks in Technology

See All in Technology
585cdfa5a081d53de7529e9b58926af2?s=48 kota2and3kan
0
500
653da54b52393252290d63096c98250a?s=48 iketomo1207
0
210
6f455f3ddfaa8a1c3a8a03ecd5d73d4f?s=48 hirakichi
0
120
93dcbac1a838bbec898747bb92aa47cc?s=48 sadonosake
0
120
8bc2f1f5bfb8ed1f79492bfa7da6ddb1?s=48 hichikawa1126
1
280
4756285958b3bd553b49ed5ba544ec23?s=48 fasahina
0
320
A500dfe11c36aa2912eaf33176fe129f?s=48 oyakata2438
0
360
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
1
310
285e58eafc0cffa03bdb9f612768434c?s=48 kelvinksps
1
120
96c31fe94f5e9b0eef4a606eaadcbc04?s=48 yoshiiryo1
2
400
Ec2568783e5ea4ecd0d68e1f22291eb8?s=48 takahashikazutaro
0
300
35fa62e1944d634eb5cb7fabffb1d84d?s=48 enkuma
0
330

Featured

See All Featured
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
147
20k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
66
4.1k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
291
110k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
55
2k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
147
20k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.8k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
24
4k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
15
770

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 modulloe@gmail.com 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?