Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Intro to React 360

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Randy Vianda Putra Randy Vianda Putra
August 03, 2019
Technology
370
0

Intro to React 360

Tech Talk about React 360 at Facebook Developer Circles From Bandung

Avatar for Randy Vianda Putra

Randy Vianda Putra

August 03, 2019

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
0
240
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
260
Berkarir Sebagai Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
1
500
Introduction to Full Stack JS
Avatar for Randy Vianda Putra randyviandaputra
1
230
Introduction_To_React.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
310
Micro_Frontend.pdf
Avatar for Randy Vianda Putra randyviandaputra
2
430
react_native_training.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
300

Other Decks in Technology

See All in Technology
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
820
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
400
局所最適は悪ではない。壊れているのは指標です。量と質を同時に見る先行指標の設計
Avatar for Recruit recruitengineers
PRO
2
460
S3 Filesで挑む！ 八戸せんべい汁の食べ頃問題
Avatar for usanchuu usanchuu
0
150
AI コーディングと人間の認知スループット / CTO Night & Day 2026 Morning Session / AI Coding and Human Cognitive Throughput
Avatar for Tamirlan 893 Torgayev prog893
5
1.5k
導入から定着へ ~コーディングエージェントを日常業務に組み込む実践知~
Avatar for Yuki Sakai yukisakai1225
0
210
sue445's proposals 2026
Avatar for sue445 sue445
0
130
[EMNLP26] RIGEL: Self-Distilled Score Adaptation for Image and Video Captioning Evaluation
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
120
小規模OSSモデルは サイバーセキュリティ業務に どこまで使えるか
Avatar for isao takaesu bbrbbq
0
200
Refining Active Record
Avatar for Shugo Maeda shugo
0
190
トークン化預金DCJPYの取り組みと活用ユースケース
Avatar for フィンテック養成コミュニティ finengine
0
230
Let's Change Our World—Again
Avatar for Koji SHIMADA snoozer05
PRO
5
360

Featured

See All Featured
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
380
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
530
Visualization
Avatar for Eitan Lees eitanlees
153
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
250
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.3k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k

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 [email protected] 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?