John Gwinner [Gwinner - Getting Started With React VR: Build Immersive Virtual Reality Apps for the Web With React

They both become the floor of our world, so why did we do both? If you look to the right in the VR View, you'll see that the Box has a funny looking edge. The texture map is equally applied to all six sides, and may look funny when stretched for boxes that aren't close in overall dimension. That is one disadvantage to the Box. The Plane doesn't have this problem, but if you get the Plane tilted the wrong way, you may not see it; the Plane is one sided so will be invisible if tilted away from the current camera. The Plane is also infinitely thin. I included both so you could see how they look.

In the section on transforms, I mentioned how important the order of transforms are. This is particularly important with the Plane object; if you rotate, then translate, the image may be oriented completely wrong, and in the case of a Plane, invisible.

To build the entire gallery, we'll need to include several squares for the platforms. Add a little bit of a gap between them. Now, we could do this by copying and pasting each Box or Plane (use whichever one you like!) and updating the translate statement:

{translate: [0,-1.8,-5.1]},
...
{translate: [0,-1.8,.1]},
...
{translate: [5.1,-1.8,.1]}

There is a better way though; React VR is not just a hardcoded geometry file, but rather an actual object-oriented JSX file, and we can make use of that.

Let's define a new object that is one of our deck plates. We will put everything but the position in as components of that object. First (and I pounded my head against the table for a while on this), change the first line of your code from:

To:

Note that this is a different import statement than what we're using on the second line (and easy to overlook).

A Pointlight is like an old-school light bulb; light spreads out in every direction from the point. One interesting thing about Point and Spot lights is again a simplification to make our VR look real. To avoid very slow rendering, the atmosphere is not strictly modeled. This means that a light that would normally fade out due to the atmosphere would instead shine for miles (atmospheric effects might be more of an issue where I live than where you live, unless you live on the moon. If you do, give me a ticket, and I'll come and personally read this book out loud to you).

To avoid modeling atmospheric effects such as extinction (fading), fog, clouds, and so forth, PointLight and SpotLight both take decay and distance props.

distance is how far the light shines. If it is non-zero, the light intensity will be zero at that distance.

decay is how often if fades away. It's sort of a generic (dimensionless) number; 2 is physically realistic light falloff. 0.1 makes a much sharper fade and is useful for artistic effects.

For example:

intensity={1}
style={{ transform: [ { translate: [0, 0, -5] }]}}
distance={10}
decay={2}
/>

To better visualize the preceding, I've constructed a demo scene three times; the first with a distance of 10, the second with a distance of four, and the third with a distance of four and a decay of 0.1 instead of 2. You can see the third scene looks very unnatural. Note that all three scenes have an intensity of exactly one.

First, let's take a look at a simple box demo. Let's start with a freshly generated site. Go to your node.js command-line interface and kill any npm start windows you have running and recreate a new, fresh site by issuing the command:

f:\ReactVR>React-vr init GoingNative

The first task is to go to the vr folder and edit client.js. Up to this point, we haven't had to edit this file; it contains boilerplate React VR code. Today, we're going to edit it, as we aren't doing just boilerplate. The bold lines in the following code are the lines we will add to client.js:

// Auto-generated content.
// This file contains the boilerplate to set up your React app.
// If you want to modify your application, start in "index.vr.js"
// Auto-generated content.
import {VRInstance} from 'react-vr-web';
import {Module} from 'react-vr-web';
import * as THREE from 'three';
function init(bundle, parent, options) {
const scene = new THREE.Scene();
const cubeModule = new CubeModule();

const vr = new VRInstance(bundle, 'GoingNative', parent, {
// Add custom options here
cursorVisibility: 'visible',
nativeModules: [ cubeModule ],
scene: scene,
...options,
});
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial()
);
cube.position.z = -4;
scene.add(cube);
cubeModule.init(cube);
vr.render = function(timestamp) {
// Any custom behavior you want to perform on each frame goes here
//animate the cube
const seconds = timestamp / 1000;
cube.position.x = 0 + (1 * (Math.cos(seconds)));
cube.position.y = 0.2 + (1 * Math.abs(Math.sin(seconds)));
};
// Begin the animation loop
vr.start();
return vr;
};
window.ReactVR = {init};

We also need to create the object CubeModule. You could put this in a separate file, and should if it gets complicated. For now, we can add it to the bottom of client.js:

export default class CubeModule extends Module {
constructor() {
super('CubeModule');
}
init(cube) {
this.cube = cube;
}
changeCubeColor(color) {
this.cube.material.color = new THREE.Color(color);
}
}

No other changes are needed. You will now see a bouncing, plain white cube. We haven't changed index.vr.js, so it still displays the hello text. This shows that both React VR and Native code, in this case three.js, are running at the same time.