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

Question

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

并且，在使用折线绘制形状后，我可以为该形状指定一个高度（z 值）并将其设为 3D 吗？

谢谢。

Answer 1

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

基于THREE.Shape()和这个例子：

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示例