CODEWITHSUNDEEP
three.js
Minathe
Minathe

Reputation: 630

Why does three.js add more lines to a shape?

I am having challenges with my three.js shape, instead of having say 12 lines forming 3 rectangles I end up having 13 lines.

Here is the code:

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


}

Here is the result:

enter image description here

With full code the object looks like this:

enter image description here

All line on the side or that cross (diagonally) the diagram are all unwanted. The above diagram is the centrally genarated face of the following 3D object, and it must be the same as the front face of the object below:

enter image description here

I would like some help on the best method to resolve this issue and a reason why its happening?

Upvotes: 0

Views: 126

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

Its because you're using THREE.Line. In this case you should use THREE.LineSegements.

To achieve the desired result, you should just need to change the following line:

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

to:

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

Upvotes: 1

Related Questions