如何使用three.js为粗线创建几何?

时间:2018-05-17 05:16:36

标签: three.js

我需要在3d中创建接收阴影的粗线。线条在平面上,因为y对于所有点都是相同的。线条都朝上了。一个例子是道路上的黄线。

我认为最好的方法是创建几何体并使用MeshLambertMaterial以便它接收阴影。

有人能指出我正确的方向从点创建几何?我假设我需要使用BufferGeometry创建顶点。

1 个答案:

答案 0 :(得分:1)

我不太确定你是否已经为这些线的每个顶点都有一个点(坐标)数组,并且想要从它们创建线,或者如果你只想创建一个宽度和长度为你的线可以指定你的问题很不清楚,所以我将为后一个(也是更简单的)选项提供一个例子。

如果您没有任何指定的顶点,则可以使用PlaneGeometry创建一个看起来像“线”的对象,并指定它为widthheight

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

如果您希望线条有一些高度而不是平面,则可以使用BoxGeometry而不是LineGeometry。上面的代码几乎是相同的,唯一的区别是您还需要为框depth指定geometry,例如:

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

请注意BoxGeometry的高度是多高(在y轴上,深度值是z轴上的“长”)

编辑:以下是如何创建具有预定义顶点的多边形

您可以使用以下代码从顶点创建多边形:

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

复制并粘贴此代码,然后将v1,v2和v3的x,y和z坐标(或者您需要的多个顶点)更改为顶点的坐标。

基本上你是使用THREE.Vector3创建顶点来提供坐标,然后将它们推到空的THREE.Geometry()的顶点属性中;

代码来自this回答

希望这就是你要找的东西!