I am currently working on creating a 3D environment with FirstPersonControls.js for movement and incorporating the following mouseclick listener:
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(adblocks);
if (intersects.length > 0) {
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
}
}
Within the init() function:
document.addEventListener('mousedown', onDocumentMouseDown, false);
This approach worked successfully in a previous project, but I am now facing a challenge when trying to integrate it with FirstPersonControls.js.
In FirstPersonControls.js, I've disabled the mousedown and mouseup listeners by commenting out the respective lines as shown below:
//this.domElement.addEventListener( 'mousedown', bind( this, this.onMouseDown ), false );
//this.domElement.addEventListener( 'mouseup', bind( this, this.onMouseUp ), false );
After implementing this change, FirstPersonControls.js works as expected. However, upon adding the extra listener for the MouseDown event, the key input functionality (w, a, s, d, q, r, f) ceases to respond properly. If a key is pressed immediately after the page loads, it will work temporarily until released, at which point all input stops functioning. Additionally, I noticed that even after removing the line binding the mousemove event in FirstPersonControls.js, there was no observable alteration in behavior. This is puzzling to me as I anticipated this line to be responsible for handling mouse movement events within the document.