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

Intro to React 360

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
React Nativeでの OTA Updateって、 どう説明する？
Avatar for Ichiki ichiki1023
0
120
カンファレンスに参加した後の浮遊感とセルフケア
Avatar for Pauli pauli
0
250
Harness Engineering on Rails
Avatar for Joël Quenneville joelq
0
760
Confitura 2026
Avatar for Akihiro Nishikawa logico_jp
0
110
Mastering Agentic Development: Harness Engineering for Effective Coding Agents
Avatar for Kyosuke Konishi konippi
3
660
Claude Designがめちゃくちゃ便利なので使ってほしい
Avatar for morimorikochan diggymo
0
170
キャリアLT今日までそして明日から
Avatar for Hiroo Katoh kentapapa
1
130
行動するAIのためのオントロジー ｜ DevRev — Encraft #26.pdf
Avatar for Takanori Suzuki dvrv_tknrszk
1
610
Azure Copilot Resiliency Agentをいろいろ試してみる
Avatar for tomokusaba tomokusaba
0
140
営業オントロジーの作り方と、エージェントからの辿り方 ── ナレッジワークの現場から
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
200
AIエージェントを安全で速い現場監督にする：Jev・Obsidian・メタハーネス
Avatar for Daisuke Masuda x5gtrn
PRO
0
140
VS Code × GitHub Copilot での Fabric 開発
Avatar for Ryoma Nagata ryomaru0825
1
190

Featured

See All Featured
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
530
How to make the Groovebox
Avatar for あそなす asonas
2
2.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
310
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
850
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
380
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
240

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?