带有纹理的 3D 平面上的 2D 叠加

Question

我想在我的飞机上画一个二维正方形，但我找不到好的解决方案。到目前为止，我只是在平面上绘制 3D 线。

geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(HANDLES[0].position.x, HANDLES[0].position.y, HANDLES[0].position.z));
geometry.vertices.push(new THREE.Vector3(HANDLES[0].position.x, HANDLES[1].position.y, HANDLES[0].position.z));
geometry.vertices.push(new THREE.Vector3(HANDLES[0].position.x, HANDLES[1].position.y, HANDLES[1].position.z));
geometry.vertices.push(new THREE.Vector3(HANDLES[0].position.x, HANDLES[0].position.y, HANDLES[1].position.z));
geometry.vertices.push(new THREE.Vector3(HANDLES[0].position.x, HANDLES[0].position.y, HANDLES[0].position.z));

material = new THREE.LineBasicMaterial( { 
  color: 0xff00f0,
  linewidth: 20 } );

line = new THREE.Line(geometry, material);
scene.add(line);

结果看起来不太好，因为线条与纹理混淆了。

在平面上绘制净 2D 形状的最佳方法是什么？然后我想将这个 2D 形状用于 select 平面中的一个感兴趣区域。

我想一个解决方案是使用正交相机 + 盒子，但我想尽可能避免这种情况。

谢谢，尼古拉斯

Answer 1

为了防止 z-fighting（共面 [在同一平面上] 对象混淆），您可以将其中一个对象设置为不透明度为 1.0 的透明对象（笨拙但简单的方法），或者您可以设置 .polygonOffset、polygonOffsetFactor 和 polygonOffsetUnits 在 material 上（将两者都设置为 1.0 应该很容易解决这个问题），但请随意 read more about it.

带有纹理的 3D 平面上的 2D 叠加

2D overlay on top of 3D plane with texture

three.js

2d

overlay