如何在 three.js 中绘制折线？

Question

我想画一条折线（使用 x, y 值）来创建一个形状。例如，当您使用一组坐标绘制多段线时 -(0,0), (0,2), (2,0), (0,0), 它将创建一个矩形。我怎么能在 three.js 中做到这一点？

并且，在使用多段线绘制形状后，我可以为该形状指定高度（z 值）并使其成为 3D 吗？

谢谢。

Answer 1

取决于你真正想要什么。因为你想要折线，而不是曲线。

基于 THREE.Shape() 和 this 示例：

var points = [
  new THREE.Vector2(0, 0),
  new THREE.Vector2(2, 0),
  new THREE.Vector2(2, 2),
  new THREE.Vector2(0, 2)
];
var shape = new THREE.Shape(points);
shape.autoClose = true; // the shape will be closed automatically, thus we don't need to put the fifth point
var geometry = shape.createPointsGeometry();
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: "yellow"}));
scene.add(line);

基于THREE.Geometry()：

var points3D = new THREE.Geometry();
points3D.vertices.push( // here you can use 3-dimensional coordinates
  new THREE.Vector3(0, 0, 0.5),
  new THREE.Vector3(2, 0, 1),
  new THREE.Vector3(2, 2, 2),
  new THREE.Vector3(0, 2, 3),
  new THREE.Vector3(0, 0, 0.5) // there is no autoClose function here, thus we need the fifth point
);
var line2 = new THREE.Line(points3D, new THREE.LineBasicMaterial({color: "red"}));
scene.add(line2);

jsfiddle 两种解决方案的示例

如何在 three.js 中绘制折线？

How can I draw polyline in three.js?

three.js

geometry

polyline