Hello. I’m playing around Three.js and ran into a problem. I’m importing a .glb model I created in blender. Then in the onclick handler I write the mesh to the console using raycastre and intersects. Everything works great, but the problem comes after I try to click on the animated walking character. Threejs acts as if it is not there and writes the name of the mesh below it to the console. Does anyone know how to fix this? Thanks.
Entire code can be found on github: GitHub - ttoomas/brumbalov-game: brumbalov-game Model can be found also on github: brumbalov-game/final-dambuldor.glb at 2851c865a92dea7b3ff807778e9b7d8c701d1d50 · ttoomas/brumbalov-game · GitHub
Import model code:
async function importHouseModel(){
const houseGLTF = await gltfLoader.loadAsync('/models/final-dambuldor.glb');
houseObject = houseGLTF.scene;
homeScene.add(houseObject);
mixer = new THREE.AnimationMixer(houseObject);
houseGLTF.animations.forEach((clip) => {
mixer.clipAction(clip).play();
})
}
Onclick handler code:
function handleHomeClick(e){
e.preventDefault();
homeMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
homeMouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
homeRaycaster.setFromCamera(homeMouse, homeCamera);
console.log(homeScene);
let intersects = homeRaycaster.intersectObject(houseObject, true);
if(intersects.length > 0){
let object = intersects[0].object;
console.log(object);
}
}
I tried everything possible, import .fbx, different blender settings, etc. Nothing worked.