Strange model behavior when using InstancedMesh with CameraSync (threebox)

Question

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

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

• codepen

Screenshots

Version

all

Is it related to camera synchronization? How can I modify it