如何为具有三个.js的粗线创建几何图形?

Question

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

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

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

Answer 1

我不太确定您是否已经为线的每个顶点都有一个点(坐标)数组，并希望从它们创建线，或者您是否只想创建可以指定的宽度和长度的线，因为您的问题非常不清楚，所以我将为后一个(也是更简单)选项提供示例。

如果您没有任何指定的顶点，则可以使用PlaneGeometry创建一个看起来像"线"的对象，并指定其width和height。

即

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。上面的代码几乎相同，唯一的区别是您还需要为盒子geometry指定一个depth，例如：

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 的顶点属性。几何();

代码来自这个答案

希望这就是你要找的！