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