VR Earth

Planet.vr.js

import React from 'react';
import {
  AppRegistry,
  Sphere,
  asset,
  View,
  PointLight,
  Animated,
} from 'react-vr';
import { Easing } from 'react-native';

const Planet = Animated.createAnimatedComponent(Sphere);

export default class Globe extends React.Component {
  spin = new Animated.Value(0);
  componentDidMount() {
    this.spinAround();
  }

  spinAround = () => {
    Animated.loop(
      Animated.timing(this.spin, {
        toValue: 360,
        easing: Easing.linear,
        duration: 2000,
      })
    ).start()
  };

  render() {
    return (
      <View>
        <Planet
          heightSegments={20}
          widthSegments={20}
          radius={0.3}
          lit
          style={{
            transform: [{ translateZ: -3 }, { rotateY: this.spin }],
          }}
          texture={asset('earth.jpg')}
        />
        <PointLight
          intensity={2}
          style={{ transform: [{ translate: [0, 700, 700] }] }}
        />
      </View>
    );
  }
}