I've been tackling an issue with raycasting a custom mesh in three.js. Surprisingly, while raycasting works flawlessly on some imported meshes, it just doesn't seem to cooperate at all with my custom mesh.
After extensive research, I came across common problems associated with custom raycasting and attempted various solutions (such as updateMatrixWorld, double side material, etc. - refer to the code snippet below).
This is the function I'm using for raycasting:
mouse.x = ((e.clientX - container.offsetLeft) / container.clientWidth) * 2 - 1;
mouse.y = -((e.clientY - container.offsetTop) / container.clientHeight) * 2 + 1;
rayCaster.setFromCamera(mouse, camera);
var intersect = rayCaster.intersectObjects(scene.getObjectByName('loaded_object').children, true); // functioning properly
mesh_1.geometry.computeFaceNormals();
mesh_1.updateMatrixWorld();
var intersect_custom = rayCaster.intersectObjects([mesh_1], true); // not yielding results
While the first intersection behaves as expected, the custom intersect fails completely - consistently returning an empty array.
Could it be that the issue lies within my custom mesh?
This is how I constructed my custom mesh:
material_k1.side = THREE.DoubleSide;
var singleGeometry_1 = new THREE.Geometry();
var mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);
meshes[i].updateMatrix();
singleGeometry_1.merge(meshes[i].geometry, meshes[i].matrix);
mesh_1.updateMatrix();
singleGeometry_1.verticesNeedUpdate = true;
singleGeometry_1.elementsNeedUpdate = true;
mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);
What else could possibly be causing this issue? It's perplexing, especially considering that it only seems to be problematic with my custom mesh.