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
97

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
12
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
57
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
150
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
34
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
72
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
3
93
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
53

Other Decks in Technology

See All in Technology
93951dd323433ad39f5bc635cc686f96?s=48 yusuketakagi
4
1.5k
462feb0fe0493c40d55650da664e8773?s=48 clustervr
PRO
0
130
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
1k
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
270
B16717ef4b7aab0b253d933c3934f280?s=48 mixi_engineers
0
370
A84b3c763c9c543069b7c02551e2720e?s=48 yuyamada
0
520
164fd510e92a1912155b869b2c333c1e?s=48 tutuz
5
3.1k
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
0
460
98f8e6125c052c4ac3fcc94f97919371?s=48 evilsmile
0
310
D0f5daa7cc3a26140c06ea29e5e235cc?s=48 noriyukitakei
17
9.6k
9a38c60104a629648564527582d071c6?s=48 ta28masa
0
270
D69e77fd50edf1a9c6d5ffcddd03dd90?s=48 funnysystems
1
1.2k

Featured

See All Featured
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
26
3.3k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.8k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
298
40k
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
610
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
220
15k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.2k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
108
14k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.9k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
657
54k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k

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?