Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React 360

Avatar for Randy Vianda Putra Randy Vianda Putra
August 03, 2019
Technology
0
360

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
Tweet

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
230
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
250
Berkarir Sebagai Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
1
470
Introduction to Full Stack JS
Avatar for Randy Vianda Putra randyviandaputra
1
210
Introduction_To_React.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
300
Micro_Frontend.pdf
Avatar for Randy Vianda Putra randyviandaputra
2
420
react_native_training.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
290

Other Decks in Technology

See All in Technology
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
Avatar for vaaaaanquish vaaaaanquish
33
14k
AIに頼りすぎない新人育成術
Avatar for CUEBiC Inc. cuebic9bic
3
310
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
180
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
5
2.4k
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを 愛するようになったか（改）
Avatar for Takaya Saeki nullpo_head
7
2.6k
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
Avatar for Riku INADA inariku
3
380
Segment Anything Modelの最新動向：SAM2とその発展系
Avatar for TakatoYoshikawa tenten0727
0
810
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
Avatar for mai miya maimyyym
0
120
2025新卒研修・HTML/CSS #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
3
13k
Claude Codeから我々が学ぶべきこと
Avatar for Oikon oikon48
10
2.8k
PL/pgSQLの基本と使い所
Avatar for まぐろ tameguro
2
200
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
Avatar for いのうえ senseofunity129
0
150

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
8
550
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
540

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?