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

Intro to React 360

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
240
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
480
Introduction to Full Stack JS
Avatar for Randy Vianda Putra randyviandaputra
1
220
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
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
410
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
100
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.5k
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
2.8k
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
140
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
460
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
420
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
940
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
220
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.5k
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
120

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
890
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
240
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
440
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430

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?