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
480
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エージェント活用
Avatar for sergicalsix sergicalsix
8
4.6k
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
590
abema-trace-sampling-observability-cost-optimization
Avatar for tetsuya28 tetsuya28
0
380
戦えるAIエージェントの作り方
Avatar for Takuya Akiba iwiwi
11
5.2k
Retrospectiveを振り返ろう
Avatar for なかしょ nakasho
0
140
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
Avatar for SansanTech sansantech
PRO
1
560
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
7
1.5k
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
Avatar for coconala_engineer coconala_engineer
0
300
GraphRAG グラフDBを使ったLLM生成（自作漫画DBを用いた具体例を用いて）
Avatar for sea-turt1e seaturt1e
1
160
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
Avatar for okiyuki okiyuki99
6
1.4k
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
Avatar for ymotongpoo ymotongpoo
1
570
SOTA競争から人間を超える画像認識へ
Avatar for Yosuke Shinya shinya7y
0
630

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k

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?