I successfully built a box using three.js
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);
var geo = new THREE.BoxGeometry(5,2,5);
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, wireframe:false, vertexColors: THREE.FaceColors});
var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
Now, I want to be able to change the color of the entire face of the cube when hovered over by the mouse. Here is the function I created for that purpose:
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove( event ) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObject( mesh);
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].face.color.setHex( 0xDDC2A3);
mesh.geometry.colorsNeedUpdate = true;
}
renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false );
Although the function is working, it currently only changes the color of half of the face of the cube. I am looking to target the complete face or hard-face, specifically those made up of Face3+Face3. Any suggestions on how I can achieve this?