JSFiddle - React, Tailwind, and code Playground
CSS
body {
background-color: #000000;
}
JavaScript
var camera, scene, renderer,
geometry, material, mesh,
mouseX, mouseY, cHeight, cWidth, pointLight;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene.add( camera );
geometry = new THREE.CubeGeometry( 1200, 400, 250 );
material = new THREE.MeshBasicMaterial( { color: 0xbada55, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
cHeight = renderer.domElement.height;
cWidth = renderer.domElement.width;
}
function animate() {
// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x = mouseY/750;
mesh.rotation.y = mouseX/750;
renderer.render( scene, camera );
}
document.onmousemove = function(e) {
// offset from center
mouseX = e.pageX - (cWidth / 2);
mouseY = e.pageY - (cHeight / 2);
}