javascript - 如何在 Three.js 中将 2d 路径转换为 ​​3d 形状？

Question

我需要有这个的 3d：http: //jsfiddle.net/dAdKm/
但是当我使用这个代码时：

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.moveTo(20,20);
shape.lineTo(20, 100);
shape.lineTo(150, 100);
shape.lineTo(150, 20);

var shape3d = shape.extrude(extrudeSettings);
var shapePoints = shape.createPointsGeometry();
var shapeSpacedPoints = shape.createSpacedPointsGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var shapeMesh = new THREE.Mesh(shape3d, material);

结果与 2d 上下文结果不同，为什么？问题是什么？

Answer 1

形状从 (20, 20) 开始，到 (150, 20)，然后“跳”回 (20, 20)。

避免跳跃，试试这个形状定义：

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.lineTo(150, 100);
shape.lineTo(20, 100);
shape.moveTo(20,20);