JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>

CSS

body { margin: 0; }
            canvas { width: 100%; height: 100% }

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer( {alpha : true} );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var randoms = [];
var mouse = {x:0,y:0};
var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.2};



initCubes(50);



render();






function mouseMove(e){

camera.position.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
camera.position.y += Math.max(Math.min((mouse.y - e.clientY) * 0.01, cameraMoves.speed), -cameraMoves.speed);

    mouse.x = e.clientX;
    mouse.y = e.clientY;

}
window.addEventListener('mousemove', mouseMove);



function initCubes(n){  


    for (var i=0; i<n; i++) {


        randoms[i] = makeRandom();      
        createCube(randoms[i].x, randoms[i].y, randoms[i].z, randoms[i].width, randoms[i].height, randoms[i].depth);


    }//for


}//initCubes()





function makeRandom(){

    var x = Math.floor(Math.random() * 20 -10);
    var y = Math.floor(Math.random() * 20 -10);
    var z = Math.floor(Math.random() * -50);

    var width = Math.ceil(Math.random() * 6);
    var height = Math.ceil(Math.random() * 6);
    var depth = 2;

    return {x:x, y:y, z:z, width:width, height:height, depth:depth};

}   // makeRandom()


function createCube(x,y,z,width,height,depth){

    var geometry = new THREE.BoxGeometry( width, height, depth );

    var cube = new THREE.Mesh(geometry);
    scene.add(cube);
    cube.position.set(x,y,z);

}//createCube()




function render() {
    requestAnimationFrame( render );


    //camera.position.z += cameraMoves.z; 





    renderer.render(scene, camera);
}// render()