Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Intro to React 360
Randy Vianda Putra
August 03, 2019
Technology
0
88
Intro to React 360
Tech Talk about React 360 at Facebook Developer Circles From Bandung
Randy Vianda Putra
August 03, 2019
Tweet
Share
More Decks by Randy Vianda Putra
See All by Randy Vianda Putra
randyviandaputra
0
53
randyviandaputra
1
120
randyviandaputra
1
32
randyviandaputra
0
65
randyviandaputra
3
79
randyviandaputra
0
41
Other Decks in Technology
See All in Technology
sansandsoc
2
590
clustervr
0
140
zak3
1
180
hagyyyy
0
160
binarymist
0
1.3k
hanacchi
0
150
clustervr
0
140
miura55
0
240
pg0084
1
130
1stship
0
250
110y
0
11k
yunoda
0
110
Featured
See All Featured
bkeepers
321
53k
lemiorhan
627
43k
colly
66
3k
philhawksworth
190
17k
michaelherold
224
8.5k
revolveconf
200
9.7k
thoeni
4
590
jacobian
255
20k
lara
590
61k
roundedbygravity
242
21k
skipperchong
8
710
akmur
252
19k
Transcript
Intro To React 360 Facebook Developer Circles - 3 August,
2019
Randy Vianda Putra, live in Bandung - Frontend Engineer @WorkLifeBeyond
- Instructor @Cilsy Hello modulloe@gmail.com github.com/randyviandaputra @randyvp
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
Let’s Start
What is React 360 ?
What is React 360 ? A Javascript framework for creation
3D and VR user interfaces with React and uses Three.js for rendering
What is Three.js ?
What is three.js - 3D javascript library - Renderers: WebGL,
<canvas>, <svg>, CSS3D / DOM, and more - Easy to use
History of React 360 ?
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
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
Getting Started React 360 ?
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)
Sample Project
File Structure
index.js
client.js
Core Components ?
Core Components View Text Image
Fundamental React 360 ?
3D Coordinates
3D Background Images
3D Background Videos
Interactions
Loading Models
React 360 Modules - VideoModule - AudioModule
React 360 APIs - Environment - Animated - ControllerInfo -
AsyncStorage
Why Should We Use React 360 ?
“ EASY TO LEARN 29
“ LEARN ONCE, WRITE ANYWHERE 30
“ React dev tools React Chrome extension make debugging so
much easier 31
“ Facebook are maintaining this project 32
Links - https:/ /reactjs.org - https:/ /facebook.github.io/react-360 - https:/ /threejs.org
- https:/ /alligator.io/react/react-360
Source Code https://bit.ly/2YhISge Demo https://hellofbdevc.netlify.com
35 Thanks Any questions?