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
360
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
230
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
250
Berkarir Sebagai Frontend Developer
randyviandaputra
1
470
Introduction to Full Stack JS
randyviandaputra
1
210
Introduction_To_React.pdf
randyviandaputra
0
300
Micro_Frontend.pdf
randyviandaputra
2
420
react_native_training.pdf
randyviandaputra
0
290
Other Decks in Technology
See All in Technology
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
33
14k
AIに頼りすぎない新人育成術
cuebic9bic
3
310
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
180
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
2.4k
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.6k
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
380
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
810
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
120
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
PL/pgSQLの基本と使い所
tameguro
2
200
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
150
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Unsuck your backbone
ammeep
671
58k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Code Reviewing Like a Champion
maltzj
524
40k
A Tale of Four Properties
chriscoyier
160
23k
Balancing Empowerment & Direction
lara
1
540
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?