Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to React 360
Search
Randy Vianda Putra
August 03, 2019
Technology
0
340
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
Step by Step Guide to Becoming Frontend Developer
randyviandaputra
0
220
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
240
Berkarir Sebagai Frontend Developer
randyviandaputra
1
450
Introduction to Full Stack JS
randyviandaputra
1
200
Introduction_To_React.pdf
randyviandaputra
0
290
Micro_Frontend.pdf
randyviandaputra
2
410
react_native_training.pdf
randyviandaputra
0
280
Other Decks in Technology
See All in Technology
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5k
プロセス改善による品質向上事例
tomasagi
2
2.2k
現場で役立つAPIデザイン
nagix
32
11k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
140
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
120
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
390
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
140
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.8k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.3k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
670
Featured
See All Featured
Building an army of robots
kneath
302
45k
Fireside Chat
paigeccino
34
3.2k
Code Reviewing Like a Champion
maltzj
521
39k
The Pragmatic Product Professional
lauravandoore
32
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Designing for Performance
lara
604
68k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Automating Front-end Workflow
addyosmani
1367
200k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
Intro To React 360 Facebook Developer Circles - 3 August,
2019
Randy Vianda Putra, live in Bandung - Frontend Engineer @WorkLifeBeyond
- Instructor @Cilsy Hello
[email protected]
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?