[ReactVR] Add Shapes Using 3D Primitives in React VR

React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/>, <Box/>, <Cylinder/>, and <Plane/> and explore how they can positioned in a three dimensional space.

We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well.

 

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
  Image,
  Sphere,
  PointLight,
} from 'react-vr';

export default class app extends React.Component {
  render() {
    return (
      <View>
        <Sphere
          style={{
            color: 'lightblue',
            transform: [{translateZ: -2}]
          }}
          lit
          heightSegments={20}
          widthSegments={20}
        ></Sphere>
        <PointLight
          intensity={1}
          style={{transform: [{translate: [0, 700, 700]}]}}
        ></PointLight>
      </View>
    );
  }
};

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

 

Add texture for earth:

        <Sphere
          style={{
            color: 'lightblue',
            transform: [{translateZ: -2}]
          }}
          lit
          texture={asset('earth.jpg')}
          heightSegments={20}
          widthSegments={20}
        ></Sphere>