如何在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);

为什么结果与二维上下文的结果不同？问题出在哪里？

- Mahdi7s

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);

- Juan Mellado