How to convert gltf to instancedmesh

Questions
,
1

I store the location of each component of the gltf and merge the components of the same material into the same instancedMesh, but why is the final model scattered

I’m sorry that we can’t upload the final model image. The final effect is like an explosion diagram. Every component is scattered, which is not what we want
I would be very grateful if you could help me

loader.load(
   href,
   function(gltf){
       let model = gltf.scene;
       let meshArr = [];
       model.traverse(function (child) {
           if(child.isMesh) {
              meshArr.push(child);
           }
         });
       let structMap = new Map();
       let posMap = new Map();
       meshArr.foreach(function (element){
            element.geometry.computeBoundingBox();
            let objPosition = new THREE.Vector3();
            objPosition.addVectors(
                  element.geometry.boundingBox.min,
                  element.geometry.boundingBox.max,
            );
            element.updateMatrixWorld();
            element.geometry.applyMatrix4(element.matrixWorld);
            if(structMap.has(element.material.name)) {
                  let sameMesh = structMap.get(element.material.name);
                  sameMesh.push(element);
                  structMap.set(element.material.name, sameMesh)
             }  else {
                  let sameMesh = [];
                  sameMesh.push(element);
                  structMap.set(element.material.name, sameMesh)
             }
              if(posMap.has(element.material.name)) {
                  let sameMesh = posMap.get(element.material.name);
                  sameMesh.push(element);
                  posMap.set(element.material.name, sameMesh)
             }  else {
                  let sameMesh = [];
                  sameMesh.push(element);
                  posMap.set(element.material.name, sameMesh)
             }
       });
}

var dummy = new THREE.Object3D();
for(let item of structMap) {
   let key = item[0];
   let value = item[1];
   let posArr = [];
   for(let posItem of posMap) {
     if(posItem[0] === key) {
         posArr = posItem[1];
     }
    }
    if(posArr.length === 0) break;
    value[0].geometry.computeVertexNormals();
    const mesh = new THREE.InstancedMesh(value[0].geometry, value[0].material, value.length);
     for(let i = 0; i<value.length; i++){
          dummy.position.copy(posArr[i]);
          dummy.updateMatrix();
          mesh.setMatrixAt(i,dummy.matrix);
      }
     scene.add(mesh);
}
2

I am confused by this piece of code:

element.geometry.computeBoundingBox();
let objPosition = new THREE.Vector3();
objPosition.addVectors(
    element.geometry.boundingBox.min,
    element.geometry.boundingBox.max,
);

This moves the object to (min+max), while maybe the correct is (min+max)/2. Here is why the model explodes (black is the original, red is the exploded):

image
image849×407 10.2 KB

3

Thank you for your reply. This seems to have no effect. I have tried to obtain the other two methods, but there is no difference

let matrix = new THREE.Vector3();
let objPosition = element.geometry.boundingBox.getCenter(matrix);

element.geometry.computeBoundingBox();
let objPosition = new THREE.Vector3();
objPosition = element.geometry.boundingSphere.center;

I was thinking that maybe there was an error in getting the position, or there was an error in the process from objPosition to setting the matrix for the instanced mesh.

4

Here is the next confusing part:

element.updateMatrixWorld();
element.geometry.applyMatrix4(element.matrixWorld);

If the element has mesh position (2,1,0) in space, then applyMatrix4 will translate the data in the geometry by vector (2,1,0). But the mesh position will still be (2,1,0), so the image will appear at (4,2,0).

Without some code to experiment with, I can only throw guesses. Maybe you cam make some online editable demo (on CodePen for example)? It does not need to be with your original GLTF, you can just use any hand-made group of objects.

5

would GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components be an option? the tool does it automatically.

i’ve also used it for CAD data explosion diagrams