Building VR experience with React VR 

About me Mirek Ciastek Front-end Developer in SwingDev https://twitter.com/mciastek https://medium.com/@mciastek https://github.com/mciastek 

About Swing SwingDev is a Polish-American company building software solutions for enterprise and startup clients in Silicon Valley. Our creative department, Swing3D, specialises in AR and VR technologies, building 3D modelling tools and interactive presentations of 3D projects. www.swingdev.io www.swing3d.io 

State of VR in Web What is ReactVR? ReactVR basics Extending ReactVR Demo Docs and articles Agenda 

State of VR in Web 

Browser support https://github.com/googlevr/webvr-polyfill WebVR polyfill 

What is ReactVR? 

React + React Native + three.js Main Thread ReactVR Runtime React Native WebGL/WebVR OVRUI Three.js WebWorker ReactVR Application Code React Native React Web Browser Asynchronous Bridge React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components. 

1 2 3 hello 1 2 3 

3D object primitives - Box, Sphere, Plane, Cylinder, etc. Panorama - both photo and video panoramas Lights - AmbientLight, DirectionalLight, PointLight, SpotLight User interactions through buttons and events - VrButton and e.g. onInput event Loading models in OBJ and GLTF format Animations CSS-like styles and flexbox (inherited from React Native) …and CLI ReactVR gives us.. 

No content

Let’s build a room 

Maybe something like this 

First attempt 

I prefer the real 3D experience 

Final project 

No content

know basics of 3D know how to write your own shaders know very well API of three.js know how WebGL works have a dedicated team of 3D artists and 3D programmers You can do it yourself, if you… 

Building this scene entirely in ReactVR is very difficult. You should use a 3D programme (like Blender or 3ds Max) to create a 3D model and then import it to ReactVR. ReactVR supports OBJ and GLTF formats by default, but you can add loaders for your own formats. You can’t build beautiful scene using only ReactVR primitives. You need to go further… How you can use ReactVR for such project? 

By extending ReactVR, you can make pretty nice cursor navigation based on Navigation Mesh. Extending React VR 

Navigation mesh made in any 3D programme, loaded in any format that three.js supports (I used JSON) Custom cursor component using Animated class Custom module for navigation mesh Raycaster to check if user can go to pointed direction RCTDeviceEventEmitter to communicate between UI and WebWorker What you need 

Cursor component Add components 

Cursor component Animated.parallel([ Animated.timing(this.state.opacity, { duration: 300, toValue: 0, }), Animated.timing(this.state.scale, { duration: 300, toValue: 1.5, }), ]).start(this.handleAnimationEnd); Run the animation handleAnimationEnd = () => { Animated.timing(this.state.opacity, { duration: 200, toValue: OPACITY, }).start(); this.state.scale.setValue(1); if (this.props.onAnimationEnd) { this.props.onAnimationEnd(); } }; Reset scale on animation end 

Nav mesh module Load navigation mesh load() { this.loader = new THREE.JSONLoader(); this.loader.load( ‘/static_assets/nav-mesh.json’, this.handleModelLoad ); } Emit event on camera move this.rtContext.callFunction( 'RCTDeviceEventEmitter', 'emit', ['teleport', this.targetPos.x, this.targetPos.z], ); 

Nav mesh module Check for intersections with navigation mesh // Set raycast from camera this.raycaster.setFromCamera({ x: this.lastX, y: this.lastY }, this.camera); // Get intersections const objectsIntersections = this.raycaster.intersectObjects(this.objects); // Check if there are any intersection with nav mesh if ( objectsIntersections[0] && objectsIntersections[0].object === this.mesh ) { // Move your camera } 

Index.vr.js Add Cursor component 

Index.vr.js Add event listener RCTDeviceEventEmitter.addListener('teleport', (x, z) => { this.setState({ cursorAnimate: true, }); Animated.timing(this.state.camPos, { toValue: { x, y: z }, duration: 500, easing: Easing.inOut(Easing.quad), }).start(this.handleCameraAnimationEnd); }); 

Demo Thanks to: Bartek Gadzała Tomek Wieczorkowski 

Docs and articles Getting Started with ReactVR Oculus Developer Center WebVR Rocks Prototyping with React VR Getting Started with WebVR 

Thank you