JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<body>	
    <div id="container"></div>
</body>

JavaScript

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x101010 );
var container = document.getElementById("container");
container.style.width = "100%";
container.style.height = "100%";
container.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, 1, 1, 10000 );
scene.add(camera);

var wrapper = new THREE.Object3D();
wrapper.position.set(100,100,100);
var light = new THREE.SpotLight( 0xFFFFFF );
light.position.set(100,100,100);
var target = new THREE.Object3D();
target.position.set(100,50,100);
light.target = target;
wrapper.add(light);
wrapper.add(target);
scene.add(wrapper);

var axis = new THREE.AxisHelper();
axis.scale.set(10,10,10);
scene.add(axis);

// good
var helper1 = new THREE.SpotLightHelper( light, 2 );
scene.add(helper1);
//helper1.update();

// bad
var helper2 = new THREE.SpotLightHelper( light, 2 );
wrapper.add(helper2);
//helper2.update();

var width = 640;
var height = 480;

renderer.setSize( width,height );
camera.aspect = width / height;
camera.updateProjectionMatrix();	
camera.position.set(-200,-20,-200);
//camera.lookAt(target);
//renderer.render( scene, camera);   

var lastNow = 0;

requestAnimationFrame(
    function animate(now) {
        requestAnimationFrame( animate );
        var delta = Math.min(200, now - lastNow);
        lastNow = now;
        camera.position.set( 500 * Math.sin(0.0001 * now), 200, 500 * Math.cos(0.0001 * delta ));
        camera.lookAt(target.position);
        renderer.render( scene, camera);   
    }
);