I am completely new to Three.js and JavaScript in general. I have been experimenting with mouse event interactions, but so far, I haven't been successful. In my attempt to make it work, I found some JavaScript code on a webpage (https://threejs.org/examples/#webgl_interactive_cubes) that I modified to suit my needs.
However, I encountered an issue that puzzles me. Whenever I refresh the page, the cube automatically turns red, even though it's supposed to change color only when clicked. Interestingly, if I reduce the size of the cube, this problem goes away.
After running console.log(INTERSECTIONS), I discovered that upon refreshing the page, the value is '5,' whereas every click afterwards yields a value of '1.' I expected the value to be '0' upon refresh since no clicking has actually occurred yet. To handle this, I introduced an additional conditional statement:
if (intersects.length > 4)
{
INTERSECTED.material.emissive.setHex( 0x111111 );
}
While this partially resolves the issue, I am still curious as to why it happens in the first place?
How can I simplify this code further to create a basic template for future mouse click events? For instance, attempting to make the cube rotate upon click doesn't seem to work at the moment.
The current code is displayed below:
<script src="js/three.js"></script>
<script>
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 100;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 30, 10, 1 ).normalize();
scene.add( light );
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false});
var object = new THREE.Mesh(cubeGeometry, cubeMaterial);
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add( object );
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function animate() {
requestAnimationFrame( animate );
render();
}
camera.position.x = -30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt( scene.position );
camera.updateMatrixWorld();
function render()
{
// find intersections
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( 0xff0000 );
console.log(intersects.length);
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
renderer.render( scene, camera );
}
</script>