# 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>
``````

## 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
dimHeight={2.25}
segments={12}
/>
``````

## Sphere

``````
<Sphere
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

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: