React VR: 3D Objects
In this lesson we will learn how to use custom 3D object components.
You can quickly create your own 3D objects at Tinkercad. Thank
you to Praveen for referencing this helpful tool at his BocaJS workshop.
Everything I know about VR programming, I learned from Praveen, BocaJS and Google!
In my index.vr.js file, I deleted the box code and am left with the code below. This is our starting point.
import React, { Component } from 'react';
import { AppRegistry, asset, Pano, Text, View} from 'react-vr';
export default class Basics extends Component {
render() {
return (
<View>
<Pano source={asset('space-sky.jpg')}></Pano>
</View>
)
}
};
AppRegistry.registerComponent('Basics',() => Basics);
The view only includes our panoramic image.
Next, we will add a 3D Object to the view. I (very quickly) created a spaceship, using Tinkercad (Please don't make fun of my space ship:p). I saved my object as space_ship1.obj in the static assets folder. If you want to use a texture, you will also save it in the static assets folder.
<View>
<Pano source={asset('space-sky.jpg')}></Pano>
<Model
source={{obj: asset('space_ship1.obj')}}
style={{
transform: [
{translate: [0, -1, -30]},
{rotateX: 45},
{rotateY: 90},
{rotateZ: 90},
{scale : 0.1},
]
}}
texture={src=asset('soMetal.jpeg')}
/>
</View>
➼ Model -
The object is a Model Component
➼ source -
Its location is specified by the source attribrute
➼ transform -
We will put our transform code in style.
➼ texture -
Here is where we put a texture
Note: I am anxious to get to the logic, so am not spending time on create 3D objects. After event handeling and some game logic, I will come back to creating objects. I will probably use Blender.
import { AppRegistry, asset, Pano, View, Text, Model } from 'react-vr';
Don't forget to import ➼ Model
import React, { Component } from 'react';
import { AppRegistry, asset, Pano, View, Text, Model } from 'react-vr';
export default class Basics extends Component {
render() {
return (
<View>
</Pano>
<Model
source={{obj: asset('space_ship1.obj')}}
style={{
transform: [
{translate: [0, -1, -30]},
{rotateX: 45},
{rotateY: 90},
{rotateZ: 90},
{scale : 0.1},
]
}}
texture={src=asset('soMetal.jpeg')}
/>
</View>
)
}
};
AppRegistry.registerComponent('Basics',() => Basics);
