React VR ships with a handful of 3D primitives. We'll import
primitives 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>