Intro to React 360 - Speaker Deck

Slide 1

Slide 1 text

Intro To React 360 Facebook Developer Circles - 3 August, 2019

Slide 2

Slide 2 text

Randy Vianda Putra, live in Bandung - Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello modulloe@gmail.com github.com/randyviandaputra @randyvp

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Let’s Start

Slide 5

Slide 5 text

What is React 360 ?

Slide 6

Slide 6 text

What is React 360 ? A Javascript framework for creation 3D and VR user interfaces with React and uses Three.js for rendering

Slide 7

Slide 7 text

What is Three.js ?

Slide 8

Slide 8 text

What is three.js - 3D javascript library - Renderers: WebGL, , , CSS3D / DOM, and more - Easy to use

Slide 9

Slide 9 text

History of React 360 ?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Getting Started React 360 ?

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

Sample Project

Slide 15

Slide 15 text

File Structure

Slide 16

Slide 16 text

index.js

Slide 17

Slide 17 text

client.js

Slide 18

Slide 18 text

Core Components ?

Slide 19

Slide 19 text

Core Components View Text Image

Slide 20

Slide 20 text

Fundamental React 360 ?

Slide 21

Slide 21 text

3D Coordinates

Slide 22

Slide 22 text

3D Background Images

Slide 23

Slide 23 text

3D Background Videos

Slide 24

Slide 24 text

Interactions

Slide 25

Slide 25 text

Loading Models

Slide 26

Slide 26 text

React 360 Modules - VideoModule - AudioModule

Slide 27

Slide 27 text

React 360 APIs - Environment - Animated - ControllerInfo - AsyncStorage

Slide 28

Slide 28 text

Why Should We Use React 360 ?

Slide 29

Slide 29 text

“ EASY TO LEARN 29

Slide 30

Slide 30 text

“ LEARN ONCE, WRITE ANYWHERE 30

Slide 31

Slide 31 text

“ React dev tools React Chrome extension make debugging so much easier 31

Slide 32

Slide 32 text

“ Facebook are maintaining this project 32

Slide 33

Slide 33 text

Links - https:/ /reactjs.org - https:/ /facebook.github.io/react-360 - https:/ /threejs.org - https:/ /alligator.io/react/react-360