代码之家 › 专栏 › 技术社区 › Voy Hexag

边几何体-从不位于原点的网格中绘制边界边

three.js

Voy Hexag · 技术社区 · 1 年前

因此,我在随机位置放置了一个立方体网格:

mesh.position.set(target.x, target.y, target.z);
scene.add(mesh);

我想在那个位置画出它的边缘线。我尝试按照建议使用EdgeGeometry。但是,它仅在网格设置在原点时有效,但更新其缓冲区几何体的努力并不能使其有效!

const newBox = mesh.geometry.clone();
newBox.applyQuaternion(mesh.quaternion);
    newBox.attributes.position =
      newBox.attributes.position.applyMatrix4(mesh.matrixWorld);
newBox.attributes.position.needsUpdate = true;
const edges = new THREE.EdgesGeometry(newBox);
    const lines = new THREE.LineSegments(
      edges,
      new THREE.LineBasicMaterial({ color: "red" })
    );
    scene.add(lines);

mesh 所有网格的轮廓边都放置在相同的位置。我还旋转了原始网格,因此应该旋转轮廓。

如前所述,这就是我所尝试的

1 回复 | 直到 1 年前

MiguelG 1 年前

这份文件需要更具体。显然,矩阵在渲染后添加到场景中时会自动更新!!! 因此,在将网格矩阵添加到场景中后,请自行更新网格矩阵:

mesh.updateMatrix();

因此,稍后您可以确保将具有更新值的矩阵传递给applyMatrix()命令!您可以对lines.geometry执行此操作,也可以直接对其本身执行此操作:

lines.applyMatrix4(mesh.matrix);

完整代码如下:

 const boxGeo = new THREE.BoxGeometry(
      10,
      10,
      10,
    );
const mesh = new THREE.Mesh(
      boxGeo,
      new THREE.MeshBasicMaterial({
        color: "blue",
      })
    );
mesh.rotation.y = Math.PI / 4;
mesh.position.set(target.x, target.y, target.z);//your coordinates
mesh.updateMatrix(); //!! important!!
scene.add(mesh);

const newBox = mesh.geometry.clone();
const edges = new THREE.EdgesGeometry(newBox);
    const lines = new THREE.LineSegments(
      edges,
      new THREE.LineBasicMaterial({ color: "red" })
    );
scene.add(lines);
lines.applyMatrix4(mesh.matrix);