I am working on a project that involves a 3D cube rendered with THREE.CanvasRenderer(). My goal is to open a specific webpage based on which face of the cube is double clicked. However, I am facing an issue where the same page is opened regardless of the face clicked. After some makeshift debugging due to lack of console knowledge, I discovered that intersects[0].faceIndex always returns '11'. How can I modify it to accurately determine the nearest face of the cube?
Below is the snippet of my JavaScript code handling this functionality:
document.addEventListener('dblclick', onDocumentMouseDblClick, false);
function onDocumentMouseDblClick(event) {
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(cube);
if (intersects.length > 0) {
if (intersects[0].faceIndex = 1 || 2) {
window.open("About.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}
if (intersects[0].faceIndex = 3 || 4) {
window.open("Mondrian.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}
if (intersects[0].faceIndex = 5 || 6) {
window.open("page3.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}
if (intersects[0].faceIndex = 7 || 8) {
window.open("page4.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}
if (intersects[0].faceIndex = 9 || 10) {
window.open("page5.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}
if (intersects[0].faceIndex = 11 || 12) {
window.open("page6.html", "_self")
//title.innerHTML = intersects[0].faceIndex;
}I initially referred to the THREE.js interactive cubes example and consulted the THREE.raycaster documentation, indicating that intersections should be ordered by closest distance. Despite trying methods involving Vector3's and unprojections from various Stack Overflow posts, they either failed or I misunderstood them, unfortunately unable to share links due to reputation.