import React from 'react';
import {
  AppRegistry,
  asset,
  DirectionalLight,
  Pano,
  Plane,
  Sphere,
  StyleSheet,
  Text,
  View,
} from 'react-vr';

export default class Island extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')} />
        <DirectionalLight
          intensity={0.9}
          style={{
            color: '#ddddff',
            transform: [
              {
                translate: [0, 90, 30],
              },
              {
                rotateX: -90,
              },
            ],
          }}
        />
        <Plane
          width={500}
          height={500}
          lit={true}
          wireframe={false}
          style={{
            color: '#0000ff',
            transform: [
              {
                translateY: -1,
              },
              {
                rotateX: -90,
              },
            ],
          }}
        />
        <Sphere
          widthSegments={20}
          heightSegments={20}
          radius={2.5}
          wireframe={false}
          lit={true}
          style={{
            color: 'yellow',
            transform: [
              {
                translateY: -3,
              },
            ],
          }}
        />

      </View>
    );
  }
}

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

@@ -29,16 +29,32 @@
 mport %7B%0A
+  AmbientLight,%0A
   AppReg
@@ -60,16 +60,16 @@
 gistry,%0A
-
   asset,
@@ -166,16 +166,240 @@
 t-vr';%0A%0A
+const spaceSkymap = %5B%0A  asset('space/space_right.png'),%0A  asset('space/space_left.png'),%0A  asset('space/space_up.png'),%0A  asset('space/space_down.png'),%0A  asset('space/space_back.png'),%0A  asset('space/space_front.png'),%0A%5D;%0A%0A
 export d
@@ -509,32 +509,19 @@
 ce=%7B
-asset('chess-world.jpg')
+spaceSkymap
 %7D /%3E
@@ -814,32 +814,73 @@
   %7D%7D%0A        /%3E%0A
+        %3CAmbientLight intensity=%7B0.1%7D /%3E%0A
         %3CPlane%0A 
@@ -948,36 +948,8 @@
 ue%7D%0A
-          wireframe=%7Bfalse%7D%0A
     
@@ -1287,36 +1287,8 @@
 .5%7D%0A
-          wireframe=%7Bfalse%7D%0A
     
@@ -1481,16 +1481,299 @@
      /%3E%0A
+        %3CSphere%0A          widthSegments=%7B20%7D%0A          heightSegments=%7B20%7D%0A          radius=%7B8%7D%0A          style=%7B%7B%0A            color: '#dbcaac',%0A            transform: %5B%0A              %7B%0A                translate: %5B0, 20, -200%5D,%0A              %7D,%0A            %5D,%0A          %7D%7D%0A        /%3E
 %0A      %3C

Add skybox and moon