将 InstancedMesh 与 CameraSync 一起使用时的奇怪模型行为 (threebox)

Strange model behavior when using InstancedMesh with CameraSync (threebox)

提问人:user22931712 提问时间:11/17/2023 最后编辑:user22931712 更新时间:11/17/2023 访问量:14

问:

描述

将gltf模型的网格添加到THREE后。InstancedMesh,我修改了缩放,渲染的效果似乎丢失了一些顶点

繁殖步骤

  1. 使用 mapboxgl 添加自定义图层
  2. 在 mapboxgl 自定义层中使用三个 gltfloader 加载模型
  3. 使用 THREE 添加 gltf 网格。实例化网格

法典

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(); }
      );

现场示例

使用鼠标右键拖放地图以将其选中。 或者,修改代码虚拟文件。规模。集合(5、5、5);

截图

版本

它与相机同步有关吗?我怎样才能修改它

javascript 三.js mapbox-gl-js threebox

评论


答: 暂无答案