为什么three.js会为一个形状添加更多的线条？

我对我的three.js形状有一些挑战，比如说12行形成3个矩形，而我最终得到了13行

代码如下：

function init() {
  var material = new THREE.LineBasicMaterial({ linewidth: 2, color: 0xDF0101,opacity: 0.25  });

  var geometry = new THREE.Geometry();

  geometry.vertices.push(
  /* First Rectangle */
  new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
  new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
  new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
  new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
  new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
  /* Second Rectangle */
  new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
  new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
  new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
  new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
  new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
  new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
  /* Third Rectangle */ 
  new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
  new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
  new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
  new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
  new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
  new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ), 
  new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ),
  new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
        );

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


}

结果如下：

使用完整代码时，对象如下所示：

图中侧面或交叉（对角）的所有线条都是多余的。 上图是以下3D对象的中心面，必须与下面对象的正面相同：

---

我想了解解决此问题的最佳方法以及发生此问题的原因？

因为您使用的是THREE.Line。在这种情况下，应使用三个.lineSegments

要获得所需的结果，您只需更改以下行：

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

致：

---

改为使用三条线段。您必须为每个部分通过一对分数。不客气-如果解决了您的问题，请接受此答案：）

  var line = new THREE.LineSegments( geometry, material );