CODEWITHSUNDEEP
javascriptthree.js
twisted
twisted

Reputation: 802

How to draw lines in xz plane using three.js

I want to draw a series of parallel lines in the xz plane, but can't find a sufficiently simple example.

I suspect my use of Geometry is somehow mistaken.

function initGrid(){
  var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
  var geometry = new THREE.Geometry();
  for(var i=0 ; i<10; i++){
    geometry.vertices.push(
      (10*i,0,0),  (10*i,0,100)
    );  
  }
  var grid = new THREE.LineSegments(geometry, material);
  scene.add(grid); 
}

My thinking is that the geometry object given to LineSegments should consist of pairs of coordinates, representing the begin & end points of each line. The above function however, doesn't work.

Could anyone give a correct technique?

Upvotes: 1

Views: 976

Answers (1)

WestLangley
WestLangley

Reputation: 104763

The vertices of Geometry are an array of THREE.Vector3.

geometry.vertices.push( new THREE.Vector3( x, y, z ) );

Also, you can use THREE.GridHelper( size, divisions, color1, color2 ).

three.js r.84

Upvotes: 1

Related Questions