After creating a binary gltf file in Blender and animating it with Mixamo, I am encountering an issue where it is not being detected on raycast. Despite trying numerous tutorials and solutions, I have been unable to resolve the issue.
const loader = new GLTFLoader();
let modelLoader = "/models/c2.glb";
let model, mixer, neck, waist;
loader.load(modelLoader, (gltf) => {
model = gltf.scene;
let fileAnimations = gltf.animations;
model.traverse((o) => {
// console.log(o);
if (o.isBone && o.name === "mixamorigNeck") {
neck = o;
}
if (o.isBone && o.name === "mixamorigSpine") {
waist = o;
}
if (o.isMesh) {
o.material.reflectivity = 1;
}
});
document.addEventListener("click", (e) => raycast(e));
document.addEventListener("touchend", (e) => raycast(e, true));
function raycast(e, touch = false) {
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
e.preventDefault();
if (touch) {
mouse.x = 2 * (e.changedTouches[0].clientX / window.innerWidth) - 1;
mouse.y = 1 - 2 * (e.changedTouches[0].clientY / window.innerHeight);
} else {
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
}
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
console.log(scene.children);
if (intersects.length > 0) {
console.log("hi");}}
Although there are no errors, when I try to access the scene.children within the 'if (intersects){}' block by clicking on the 3D object, it returns an empty array. I also attempted to push the meshes into a new array for detection, but unfortunately, it did not work.
If anyone has any insight or solution to this problem, please lend your assistance!