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 threeBox
3. Adding gltf mesh using THREE.InstancedMesh

Code

    var origin = [-122.434, 37.7353, 0];

    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/light-v9",
      center: origin,
      zoom: 24,
      pitch: 60,
      bearing: 80,
      antialias: true,
    });

    // we can add Threebox to mapbox to add built-in mouseover/mouseout and click behaviors
    window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
      defaultLights: true,
    });

    function animate() {
      requestAnimationFrame(animate);
    }

    map.on("style.load", function () {
      animate();

      map.addLayer({
        id: "custom_layer",
        type: "custom",
        renderingMode: "3d",
        onAdd: function (map, mbxContext) {
          var options = {
            obj: "https://threejs.org/examples/models/gltf/Flower/Flower.glb",
            type: "gltf",
            scale: 1000,
            units: "meters",
            rotation: { x: 90, y: 0, z: 0 }, //default rotation
            anchor: "center",
          };

          tb.loadObj(options, function (model) {
            const THREE = window.THREE;
            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.0, 1.0, 1.0));

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

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

            const dummy = new THREE.Object3D();

            let pos = tb.projectToWorld([-122.434, 37.7353, 0.0]);

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

            const group = new THREE.Group();

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

            // let soldier = model.setCoords(origin);

            tb.add(group);
          });
        },

        render: function (gl, matrix) {
          tb.update();
        },
      });
    });

Live example

• codepen

Recurrence issues： The model was not fully displayed when zooming and rotating the map

Screenshots

normal abnormal

Version

all