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

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