I have a question that I need help with. I'm trying to change the color of an object when it's selected with the mouse, but the code I wrote doesn't seem to be working correctly. Here's what I have so far:
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
renderer.setClearColor( 0xcccccc, 1 );
document.body.appendChild( renderer.domElement );
scene.add(camera);
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -5, 5, 0 ),
new THREE.Vector3( -5, -5, 0 ),
new THREE.Vector3( 5, -5, 0 )
);
var face = new THREE.Face3(0, 1, 2);
geometry.faces.push(face);
var material = new THREE.MeshBasicMaterial({color: 0x3300ff});
var triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);
camera.position.z = 10;
document.addEventListener( 'mousedown', onDocumentMouseDown );
function onDocumentMouseDown( event ) {
event.preventDefault();
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
var render = function () {
requestAnimationFrame( render );
camera.lookAt( scene.position );
renderer.render( scene, camera );
};
render();
</script>
If anyone could provide assistance, I would greatly appreciate it.