I'm currently working on customizing this particular example from three.js to enable character control via mouse clicks. My objective is to obtain the mouse coordinates upon clicking the canvas and then convert them into 3D space coordinates using THREE.Raycaster.intersectObjects. In the updated code, upon left mouse button release, I have implemented the following:
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
console.log('intersected at: (' + intersects[0].point.x.toFixed(2) + ', ' + intersects[0].point.y.toFixed(2) + ', ' + intersects[0].point.z.toFixed(2) + ')');
}
else {
console.log('no intersection detected');
}
Even after adding the ground mesh to the objects array, raycaster.intersectObjects still returns an empty array when I click on the ground mesh. I also attempted replacing objects with scene.children, but without success.
You can find the complete revised source here.