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
88

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
53
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
120
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
1
32
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
65
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
3
79
73eeac32b9932a63ed361f1ff5c5e92a?s=48 randyviandaputra
0
41

Other Decks in Technology

See All in Technology
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
2
590
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
140
80542834077f51ffe731277513db2c07?s=48 zak3
1
180
991fe792d878a5ae41bdc4d0c9ee18cb?s=48 hagyyyy
0
160
A397cb38965ab9f310e7148b8c3d1105?s=48 binarymist
0
1.3k
27b73d7672b2f75a58184c544df1e721?s=48 hanacchi
0
150
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
140
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
240
59fbf50f41bdd0ed0e3bbf27859bf99d?s=48 pg0084
1
130
79b0777f41898e4c9d75d9839d4cb476?s=48 1stship
0
250
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
0
11k
3dfed36dc1543f0007b5fd46fcb41a47?s=48 yunoda
0
110

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
321
53k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
627
43k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.5k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.7k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
590
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
710
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
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?