CODEWITHSUNDEEP
three.js
Dan
Dan

Reputation: 592

How to create geometry for thick lines with three.js?

I need to create thick lines in 3d that receive shadows. The lines are on a flat plane as in y is the same for all points. The lines all face up. An example would be the yellow line on a road.

I think the best way would be to create the geometry and use MeshLambertMaterial so that it would receive shadows.

Can anyone point me in the right direction to create the geometry from points? I assume I need to create the vertices with BufferGeometry.

Upvotes: 0

Views: 1628

Answers (1)

JJ Gerrish
JJ Gerrish

Reputation: 882

I'm not quite sure if you already have an array of points (coordinates) for each vertex of the lines and want to create the line from them, or if you just want to create lines of a width and length that you can specify as your question is quite unclear, so I'll provide an example for the latter (and more simple) option.

If you don't have any specified vertices, you can create an object that looks like a "line" using a PlaneGeometry and specifying it's width and height.

i.e.

var geomLine = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
var matLine = new THREE.MeshPhongMaterial({color: 0xFF0000});
var Line = new THREE.Mesh(geomLine, matLine);

Line.receiveShadow = true;
Line.castShadow = true;

scene.add(Line);

If you want the line to have some height and not be a flat plane, you could use a BoxGeometry instead of a LineGeometry. The code above would almost be the same, the only difference being you would also need to specify a depth for the box geometry, for example:

geomLine = new THREE.BoxGeometry(width, height, depth);

Bare in mind that the height for the BoxGeometry is how tall it is (on the y axis, the depth value is how "long" it is on the z axis)

EDIT: Here's how to create a polygon with pre-defined vertices

You can create a polygon from vertices with the following code:

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

scene.add(object);

Copy and paste this code in and then change x, y, and z coordinates of v1, v2, and v3 (or however many vertices you need) to the coordinates of your vertices.

Essentially you are creating vertices using THREE.Vector3 to supply the coordinates and then pushing them to the vertices property of an empty THREE.Geometry();

Code is from this answer

Hope this is what you were looking for!

Upvotes: 1

Related Questions