[ReactVR] Add Lighting Using Light Components in React VR

In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we'll walk through the available lighting components and create a common outdoor lighting setup.

This includes the components: <AmbientLight/>, which affects all objects in the scene equally and from all directions; <DirectionalLight/>, which illuminates all objects equally from a given direction; <PointLight/>, which spreads outward in all directions from one point; and finally <SpotLight/>, which spreads outwards in the form of a cone.

A handy demo for <SpotLight/> can be found here.

 

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

export default class app extends React.Component {
  render() {
    return (
      <View>
        <AmbientLight />
        <Sphere
          style={{
            color: 'lightblue',
            transform: [{translateZ: -2}]
          }}
          lit
          texture={asset('earth.jpg')}
          heightSegments={20}
          widthSegments={20}
        ></Sphere>
      </View>
    );
  }
};

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