0

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.

Dan
  • 592
  • 1
  • 8
  • 20

1 Answers1

1

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!

JJ Gerrish
  • 812
  • 1
  • 10
  • 25
  • I already have the points for the center of the line. I'm looking for how to create the vertices for the triangles of the line using THREE.Geometry or THREE.BufferedGeometry. The lines have more than two points so can't use PlaneGeometry or BoxGeometry. – Dan May 17 '18 at 15:42
  • @Dan Still a bit unsure as to what you mean but I will add an explanation of how to generate a polygon from a list of vertices to my answer, let me know if that helps. – JJ Gerrish May 17 '18 at 15:53
  • 1
    Thanks. I should have been more clear. I understand how to create geometry and a mesh with THREE.js. I want to create a long line that curves out of geometry from a list of points. At each point there needs to be two verts to each side of it. Where do these verts go so that the line is a constant width? If one segment of the line and another are not in a straight line there needs to be no gap between the two. How do I create a mitered corner? Maybe this is not so much a THREE.js question and is more a math question. Hopefully what I'm asking is more clear. – Dan May 17 '18 at 20:08