提问人:user22931712 提问时间:11/17/2023 最后编辑:user22931712 更新时间:11/17/2023 访问量:14
将 InstancedMesh 与 CameraSync 一起使用时的奇怪模型行为 (threebox)
Strange model behavior when using InstancedMesh with CameraSync (threebox)
问:
描述
将gltf模型的网格添加到THREE后。InstancedMesh,我修改了缩放,渲染的效果似乎丢失了一些顶点
繁殖步骤
- 使用 mapboxgl 添加自定义图层
- 在 mapboxgl 自定义层中使用三个 gltfloader 加载模型
- 使用 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);
截图
版本
都
它与相机同步有关吗?我怎样才能修改它
答: 暂无答案
评论