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中绘制折线？

1 个答案: