Adding a model using THREE InstancedMesh in mapboxgl, losing vertices after modifying and scaling

[xiaxiangfeng]

Hello, I used the shot synchronization code you wrote and encountered the following problem

Description

After adding the mesh of the gltf model to THREE.InstancedMesh, I modified the scaling, and the rendered effect seems to have lost some vertices

Reproduction steps

1. Adding custom layers using mapboxgl
2. Load the model using three gltfloader in the mapboxgl custom layer
3. Adding gltf mesh using THREE.InstancedMesh

Code

loader.load(
        "https://threejs.org/examples/models/gltf/Flower/Flower.glb",
        function (gltf) {
          const p = projectToWorld(origin);

          const model = gltf.scene;

          const _stemMesh = model.getObjectByName("Stem");
          const _blossomMesh = model.getObjectByName("Blossom");

          const stemGeometry = _stemMesh.geometry.clone();
          const blossomGeometry = _blossomMesh.geometry.clone();

          const stemMaterial = _stemMesh.material;
          const blossomMaterial = _blossomMesh.material;

          const stemMesh = new THREE.InstancedMesh(
            stemGeometry,
            stemMaterial,
            1
          );
          const blossomMesh = new THREE.InstancedMesh(
            blossomGeometry,
            blossomMaterial,
            1
          );

          stemMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
          blossomMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);

          const defaultTransform = new THREE.Matrix4()
            .makeRotationX(Math.PI)
            .multiply(new THREE.Matrix4().makeScale(1, 1, 1));

          stemGeometry.applyMatrix4(defaultTransform);
          blossomGeometry.applyMatrix4(defaultTransform);

          stemMesh.instanceMatrix.needsUpdate = true;
          blossomMesh.instanceMatrix.needsUpdate = true;

          const dummy = new THREE.Object3D();

          let pos = projectToWorld([118.61113, 32.06318, 0]);

          for (let i = 0; i < 1; i++) {
            dummy.position.copy(pos);
            dummy.scale.set(10, 10, 10);
            // dummy.scale.set(100, 100, 100);
            dummy.updateMatrix();
            stemMesh.setMatrixAt(i, dummy.matrix);
            blossomMesh.setMatrixAt(i, dummy.matrix);
          }

          const group = new THREE.Group();

          group.add(stemMesh);
          group.add(blossomMesh);

          world.add(group);

          map.triggerRepaint(); }
      );

Live example

• codepen

Recurrence issues： Use the right mouse button to drag and drop the map to select it. Alternatively, modify the code dummy. scale. set (5, 5, 5);

Screenshots

normal abnormal

Version

all

[xiaxiangfeng]

[jscastro76]

You're not using a single line of code from threebox here. Please, redirect your issues to their repo or stackoverflow

[xiaxiangfeng]

You're not using a single line of code from threebox here. Please, redirect your issues to their repo or stackoverflow

Sorry, my example only used the camera synchronization code from Threebox and did not directly use Threebox. I resubmitted the issue and used Threebox

https://github.com/jscastro76/threebox/issues/414