React VR: 3D 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

Back to Lesson 6 | Continue to Lesson 8