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
プロセス改善による品質向上事例
tomasagi
1
1.6k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Featured
See All Featured
Speed Design
sergeychernyshev
25
780
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
KATA
mclloyd
29
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Optimizing for Happiness
mojombo
376
70k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Automating Front-end Workflow
addyosmani
1367
200k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Practical Orchestrator
shlominoach
186
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
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?