從2D繪製3D幾何對象在ThreeJS

Question

我很新，以three.js所，我一直在努力執行以下操作：

假設我有x的數組，並從一定形狀y座標瀏覽器視圖端口。我想在Three.JS中渲染這些形狀，以便我可以在z方向上添加一個高度。

形狀本身實際上是一個「建築物」，我有它的平面佈置座標數組，我想通過在Z方向上增加一個高度來對其進行三維化。

我應該用什麼幾何/材料/技術來達到這個目的？

Answer 1

使用ExtrudeGeometry，可以在Three.js中將2D元素（座標）擠出到3D對象。

這裏舉例：http://stemkoski.github.io/Three.js/Extrusion.html

文檔瀏覽：

var starPoints = []; 

starPoints.push(new THREE.Vector2 ( 0, 50)); 
starPoints.push(new THREE.Vector2 ( 10, 10)); 
starPoints.push(new THREE.Vector2 ( 40, 10)); 
starPoints.push(new THREE.Vector2 ( 20, -10)); 
starPoints.push(new THREE.Vector2 ( 30, -50)); 
starPoints.push(new THREE.Vector2 ( 0, -20)); 
starPoints.push(new THREE.Vector2 (-30, -50)); 
starPoints.push(new THREE.Vector2 (-20, -10)); 
starPoints.push(new THREE.Vector2 (-40, 10)); 
starPoints.push(new THREE.Vector2 (-10, 10)); 

var starShape = new THREE.Shape(starPoints); 

var extrusionSettings = { 
    size: 30, height: 4, curveSegments: 3, 
    bevelThickness: 1, bevelSize: 2, bevelEnabled: false, 
    material: 0, extrudeMaterial: 1 
}; 

var starGeometry = new THREE.ExtrudeGeometry(starShape, extrusionSettings); 

var materialFront = new THREE.MeshBasicMaterial({ color: 0xffff00 }); 
var materialSide = new THREE.MeshBasicMaterial({ color: 0xff8800 }); 
var materialArray = [ materialFront, materialSide ]; 
var starMaterial = new THREE.MeshFaceMaterial(materialArray); 

var star = new THREE.Mesh(starGeometry, starMaterial); 
star.position.set(0,50,0); 
scene.add(star); 

// add a wireframe to model 
var wireframeTexture = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, transparent: true }); 
var star = new THREE.Mesh(starGeometry, wireframeTexture); 
star.position.set(0,50,0); 
scene.add(star);