Importing Models from Blender

Questions
,
1

I am trying to import a Blender object into ThreeJS using this:

loader.load(`model.glb`, function(gltf){
    scene.add(gltf.scene);
    gltf.scene.position.set(0, 0, 0);
});

In blender I have merged multiple meshes together to form 1 Object. What i want to do is, whenever the object is clicked, I want to simply flip it over using this code:

 function onMouseClick(event) {
            mouse.x = (event.clientX / sizes.width) * 2 - 1;
            mouse.y = -(event.clientY / sizes.height) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects(scene.children, true);
            if (intersects.length > 0) {
                const mesh = intersects[0].object;
                 const tl = gsap.timeline({ defaults: { duration: 1 } });
                 tl.fromTo(mesh.rotation, { z: 0 }, { z: (Math.PI) });
                }
                else{
                    return;
                }                   
           }
        }

However it seems like somewhere underwater this merged object from blender is still seen as 2 different objects. Since only a part of the object flips over when clicked.
If i import the exported glb model into blender it is again seen as 1 object…

Any tips or thoughts on this?

2

I think this might be the issue:
The gltf exporter exports a unique mesh per unique material on the object, since the GLTF spec doesn’t really support a single mesh with multiple materials.

So if in blender if you have a merged mesh called “merge” with 2 materials…
it will export as a group
called “merge” with two children merge_0 and merge_1

So instead of animating the mesh that was hit… you may need to animate its parent instead… and that should animate both meshes.

Maybe try:

const group = intersects[0].object.parent;
const tl = gsap.timeline({ defaults: { duration: 1 } });
tl.fromTo(group.rotation, { z: 0 }, { z: (Math.PI) });

?

1 Like
3

That worked like a charm, thank you!

1 Like