three.jsを使用して線形掃引面を作成するにはどうすればよいですか？

Question

リニアスイープフェイスを作成するにはどうしたらいいですか？

次のコードを書きました。

 // profile 
     var pts = [ 
     new THREE.Vector2(0, 0), 
     new THREE.Vector2(10, 0), 
     new THREE.Vector2(10, 10), 
     new THREE.Vector2(20, 10), 
     new THREE.Vector2(20, 20), 
     ]; 
     var profile = new THREE.Shape(pts); 
     // path 
     var path = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(30, 0, 30)); 
     var geometry = new THREE.ExtrudeGeometry(profile , { steps: 1, bevelEnabled: false, extrudePath: path }); 
     var material = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false }); 
     var mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 

そして、私は結果

http://i.imgur.com/7YDPMK7.jpg

を得たが、それは私が必要とするものではありません。私の希望は

http://i.imgur.com/sHUJ6JN.jpg

何が間違っているのですか？

Answer 1

これにはTHREE.ExtrudeGeometryがあります。

the three.js examples page上のいくつかの例があります。

• http://threejs.org/examples/#webgl_geometry_extrude_shapes
• http://threejs.org/examples/#webgl_geometry_extrude_shapes2
• http://threejs.org/examples/#webgl_geometry_extrude_splines