JSFiddle - React, Tailwind, and code Playground

by ebeit303

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

JavaScript

var camera, scene, renderer,group;
var geometry, material, mesh;
var width, height, depth;
init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    scene = new THREE.Scene();
    group = new THREE.Object3D();
    scene.add(group);
    addControls();
    addShapes();
    document.body.appendChild(renderer.domElement);

}

function addControls() {
    controls = new THREE.TrackballControls(camera, renderer.domElement);
   
    controls.rotateSpeed = 1;
    controls.zoomSpeed = .5;
    controls.panSpeed = 1;

    controls.noZoom = false;
    controls.noPan = false;
    controls.noRotate = false;

    controls.staticMoving = false;
    controls.dynamicDampingFactor = 0.3;

}

function addShapes() {
    width = 100;
    height = 100
    depth = 100;
    var geometry = new THREE.CubeGeometry( width, height, depth );
    var material = new THREE.MeshBasicMaterial({color:0xffccff, side:2, overdraw:true} );
    
    mesh = new THREE.Mesh( geometry, material );
    group.add( mesh );
    mesh.position.set(10,20,20);
    var x = mesh.position.x;
    var y = mesh.position.y;
    var z = mesh.position.z;
    var len = geometry.vertices.length;
    for(var i = 0; i < len; i++){
        var vx = geometry.vertices[i].x;
        var vy = geometry.vertices[i].y;
        var vz = geometry.vertices[i].z;
            var material1 = new THREE.MeshBasicMaterial({color:Math.random()*0xffffff, side:2, overdraw:true, opacity:0.6, transparent:true} );
        var mesh1 = new THREE.Mesh( geometry, material1 );
        group.add(mesh1);
        mesh1.position.set( (vx*2)+x,(vy*2)+y,(vz*2)+z);
    }
}
function animate() {
    requestAnimationFrame(animate);
    group.rotation.y += 0.01;
    controls.update();
    renderer.render(scene, camera);
}