Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: 3D Objects








Quick Copy Boxes

Coding Commanders Newsletter





Women in Tech Interview:

JavaScriptReact VR3D 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!

Starting Code

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.


Custom 3D Object

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

Full Code


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);
      
Color Selector



Hex:


RBG:


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE



Check out my blog:

Coding Commanders Blog





Questions? Contact me on my social media:

YouTube

GitHub

Facebook

Instagram

Twitter

T-shirt Shop

Back to Lesson 8 | Continue to Lesson 10