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

Question

我对我的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对象的中心生成的面，它必须与下面对象的正面相同：

我想就解决此问题的最佳方法及其发生原因提供一些帮助吗？

Answer 1

因为您正在使用THREE.Line。在这种情况下，您应该使用THREE.LineSegements。

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

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

为：

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