JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/RequestAnimationFrame.js"></script>
<div id="container"></div>
JavaScript
(function() {
var camera, createSphere, draw, light, object, renderer, scene;
renderer = new THREE.WebGLRenderer();
camera = new THREE.PerspectiveCamera(45, 800 / 640, 0.1, 10000);
camera.position.z = 300;
scene = new THREE.Scene();
renderer.setSize(800, 640);
document.getElementById("container").appendChild(renderer.domElement);
createSphere = function(radius, segments, rings) {
var material, sphere;
if (radius == null) {
radius = 50;
}
if (segments == null) {
segments = 16;
}
if (rings == null) {
rings = 16;
}
sphere = new THREE.SphereGeometry(radius, segments, rings);
material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } );
return new THREE.Mesh(sphere, material);
};
light = new THREE.PointLight(0x0040ff, 100, 100 );
light.position.x = 10;
light.position.y = 50;
light.position.z = 30;
light.intensity = 100;
object = createSphere();
scene.add(new THREE.AmbientLight(0x0000F0));
scene.add(light);
scene.add(object);
draw = function() {
var time;
time = new Date().getTime() * 0.0005;
light.position.x = Math.sin(time * 0.7) * 30;
object.rotation.x += 0.02;
renderer.render(scene, camera);
return requestAnimationFrame(draw);
};
draw();
}).call(this);