Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: 3D Primitives








Quick Copy Boxes







JavaScriptReact VR3D Primitives

In this lesson we will learn about 3D primitives . 3D primitives are the basic building blocks used for 3D scenes. They are basic geometric shapes, such as "Box" and "Cylinder ". We can use them as is or modify them.

Box

A box has 3 measurement properties, as seen below. Each has a default size of 1.


<Box
  dimWidth={1}
  dimDepth={1}
  dimHeight={1}
/>
      

Delete Beach List

Next's lets remove our list of beach items from the view and replace it with a box.


<Box
  dimWidth={1}
  dimHeight={1}
  dimDepth={1}
  style={{
    color: 'black',
  }}
/>
        

dimWidth={1} - Width of 1 meter
dimHeight={1} - Height of 1 meter
dimDepth={1} - Depth of 1 meter
color - black

Don't forget to import "Box"


  import { AppRegistry, asset, Pano, Text, View, Box} from 'react-vr';
      

Box - include "Box component"


Change Panoramic Image

I also chaged the background image to space-sky.jpg.


        <Pano source={asset('space-sky.jpg')}></Pano>
      

Download this image by Pixabay


Full Index Code


import React, { Component } from 'react';

import { AppRegistry, asset, Pano, Text, View, Box} from 'react-vr';

export default class Basics extends Component {

 	render() {
		return (
      <View>
				<Pano source={asset('space-sky.jpg')}></Pano>
				<View
				  style={{
				    transform: [{translate: [0, 0, -3]}],
				    layoutOrigin: [0.5, 0.5]
				  }}>
          <Box
          dimWidth={1}
          dimHeight={1}
          dimDepth={1}
          style={{
            color: 'black',
          }}
        />
				</View>
			</View>
		)
	}
};

AppRegistry.registerComponent('Basics',() => Basics);

      

Cylinder


  <Cylinder
    radiusTop={0.65}
    radiusBottom={.65}
    dimHeight={2.25}
    segments={12}
/>
      

Sphere


<Sphere
  radius={0.5}
  widthSegments={10}
  heightSegments={6}
/>
      

Modifing Primitives

We can use special props to motify primitives.

Lit

Will it be effected by light? lit can be true or false.


<Box
  dimWidth={1}
  dimHeight={1}
  dimDepth={1}
  lit={true}
  style={{
    color: 'black',
  }}
/>
  

Texture

You can specify a texture. I found the example texture below at Pixabay's Pexel.


I saved my texture in the static assets folder as "sample.jpeg", then used the following code:


<Box
  style={{transform: [{translate: [0, -1, -3]}]}}
  texture={src=asset('sample.jpeg')}
/>
  

To make this:


Wireframe

Does it have a wireframe look? wireframe can be true or fales.


<Box
  dimWidth={1}
  dimHeight={1}
  dimDepth={1}
  wireframe={true}
  style={{
    color: 'green',
  }}
/>
        

wireframe - is set to true
color - is set to green


Coding Commanders Newsletter - Sign up!



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


Questions? Contact me on my social media:

YouTube

GitHub

Facebook

Instagram

Twitter

T-shirt Shop

Back to Lesson 6 | Continue to Lesson 8