Three.js 带纹理的三维平面顶部的二维覆盖

我试图在我的平面上画一个二维正方形，但我找不到一个好的解决方案。到目前为止，我只是在平面的顶部绘制三维线

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形状来选择平面中感兴趣的区域

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

我想一个解决办法是使用正交相机+一个盒子，但如果可能的话，我想避免这种情况

谢谢， Nicolas

为了防止z-格斗（共面[在同一平面上]对象混淆），您可以将其中一个对象设置为透明度为1.0的透明对象（粗糙但简单的方法），或者可以在材质上设置

.polygonOffset

、

polygonOffsetFactor

和

polygonOffsetUnits

（将两者都设置为1.0应该可以很容易地解决这个问题），但是请随意。

谢谢，另请参见：