JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/davidck/Fx.Anything/0.1/Source/Fx.Anything.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r50/three.min.js"></script>
<div id="container">
</div>

CSS

#container {
    background: #000;
    width: 400px;
    height: 300px;
}

JavaScript

/*
USING DEFAULT STATIC SAMPLE FROM:
http://www.aerotwist.com/tutorials/getting-started-with-three-js/
*/

var WIDTH = 400,
    HEIGHT = 300;

var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

var container = $('container');

var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR  );
var scene = new THREE.Scene();

camera.position.z = 300;

renderer.setSize(WIDTH, HEIGHT);

container.grab(renderer.domElement);

var sphereMaterial = new THREE.MeshLambertMaterial(
{
    color: 0xFFaaFF
});

var radius = 80, segments = 32, rings = 32;

var sphere = new THREE.Mesh(
   new THREE.SphereGeometry(radius, segments, rings),
   sphereMaterial);

scene.add(sphere);
scene.add(camera);

var pointLight = new THREE.PointLight( 0xFFFFFF );

pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 130;

scene.add(pointLight);
renderer.render(scene, camera);


// Fx.Anything WebGL sample
var fx = new Fx.Anything({
    duration: 1600,
    transition: Fx.Transitions.Bounce.easeOut,
    onReport: function(progress) {
        pointLight.position.x = progress*220-100;
        pointLight.position.y = progress*60-30;
        renderer.render(scene, camera);
    }        
});
fx.start();