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