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

Intro to React 360

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
290

Other Decks in Technology

See All in Technology
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
0
290
長期運営で肥大化したExcelマスターデータの解消に向けた移行事例
Avatar for gree_tech gree_tech
PRO
0
100
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
190
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
9.3k
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
190
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
290
AI時代のアウトプット――変わったこと、変わらないこと / Devsumi 2026 Kansai #devsumi
Avatar for Junichi Ito jnchito
0
330
三人寄ればチューリング完全
Avatar for Takumi Sueda puhitaku
3
1.1k
SO-101×VLAによる3色キューブのピック＆プレース
Avatar for ABEJA abeja
0
220
20分でわかるセキュアAPI
Avatar for nwiizo nwiizo
2
320
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
Avatar for kuroneko kuroneko13
0
110
Genie Codeハンズオン応用編
Avatar for Takaaki Yayoi taka_aki
0
130

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
720
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
540
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
550
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
340
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
390
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
290

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?