JSFiddle - React, Tailwind, and code Playground
JavaScript
var camera, scene, renderer,
geometry, material, mesh,
mouseX, mouseY, cHeight, cWidth;
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( 250, 250, 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/100;
mesh.rotation.y = -mouseX/100;
renderer.render( scene, camera );
}
document.onmousemove = function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
}