JSFiddle - React, Tailwind, and code Playground
JavaScript
var camera, scene, renderer,cubeGeometry, materials, cube;
var objects=new Array();
var mouse = new THREE.Vector2();
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = 200;
camera.position.z = 500;
scene.add( camera );
//Cube
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
if(i%2==0) var imagen="http://i755.photobucket.com/albums/xx194/veganjack/muro14.png";
else var imagen="http://i755.photobucket.com/albums/xx194/veganjack/wall1.gif";
materials.push( new THREE.MeshBasicMaterial( {map: THREE.ImageUtils.loadTexture(imagen)}) );
}
cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 10, 10, 10, materials ), new THREE.MeshFaceMaterial() );
cube.position.y = 100;
cube.position.x = 0;
cube.position.z = 200;
cube.overdraw = true;
objects.push(cube);
scene.add( cube );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
cube.rotation.x = event.clientX/10;
cube.rotation.y = event.clientY/10;
}
function...