Imported animated model onclick not working

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.

your character is loaded separately and not part of your raycasting scope (wich only target the house objects).

Create an array including both objects [houseObject, voldemortModel]. Then use intersectObjects (with the “s” in the end) to raycast the array. it should solve your issue.

1 Like

Hello, thanks a lot for your reply. I tried this and it didnt solve my issue. You can see the changes here: still not working · ttoomas/brumbalov-game@188afe4 · GitHub . Can you please check it again? Thanks.

I just misswrite brumbalObject, but it still doesn’t work, new commit is on github.

It works on my browser. Tried multiple times and it still work.
But you have something like 2k objects. Try to optimize your scene (merge individual meshes where you can). Seem the first loading is quite chaotic and mess with the controls and raycasting
three raycasting is slow, never raycast 2k meshes and millions triangles, if only few objects are actually interactive.

image

Hello, thanks a lot for you help. Problem was with export in blenden. I played around with settings, now Its working. Thank you for your help.