CODEWITHSUNDEEP
three.js
Frank_Vr
Frank_Vr

Reputation: 659

Drawing a square in a website using three.js

Why does the following code not draw a complete square?

var square = new THREE.Geometry();
      square.vertices.push(new THREE.Vector3(0, 0, 0));
      square.vertices.push(new THREE.Vector3(0, 100, 0));
      square.vertices.push(new THREE.Vector3(100, 100, 0));
      square.vertices.push(new THREE.Vector3(100, 0, 0));
      square.faces.push(new THREE.Face3(0, 1, 2));
      square.faces.push(new THREE.Face3(0, 3, 2));

      var line = new THREE.Line(square, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 }));
      scene.add(line);

i get the following result: enter image description here

Upvotes: 0

Views: 3694

Answers (1)

gevaraweb
gevaraweb

Reputation: 923

square.vertices.push(new THREE.Vector3(0, 0, 0));
square.vertices.push(new THREE.Vector3(0, 100, 0));
square.vertices.push(new THREE.Vector3(100, 100, 0));
square.vertices.push(new THREE.Vector3(100, 0, 0));

square.vertices.push(new THREE.Vector3(0, 0, 0));

square.faces.push(new THREE.Face3(0, 1, 2));
square.faces.push(new THREE.Face3(0, 3, 2));

var line = new THREE.Line(square, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 }));
scene.add(line);

Upvotes: 6

Related Questions