如何使用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