如何使用Three.js擠出方法渲染建築物？

Question

我正在嘗試使用Three.js程序性地渲染3D建築物。其中一種方法是擠壓一個方形/矩形。請參見圖19：http://www.gamesitb.com/SurveyProcedural.pdf

我已經查看了ExtrudeGeometry API的Three.js文檔，但其用法不是很清楚。已經搜索了網絡和這個論壇可能的例子/代碼片斷 - 徒勞！任何指針都會有幫助。謝謝。

Answer 1

首先看的是THREE.js zip中提供的這個例子。

實例/ webgl_geometry_shapes.html

下位是爲了舉例的目的。

關鍵是你創建了一系列Vector2（我提到的文件中的144-165行），它們定義了建築物的角落。

var californiaPts = []; 
californiaPts.push(new THREE.Vector2 (610, 320)); 
californiaPts.push(new THREE.Vector2 (450, 300)); 
californiaPts.push(new THREE.Vector2 (392, 392)); 
californiaPts.push(new THREE.Vector2 (266, 438)); 

下一步是那些線條轉換爲

var californiaShape = new THREE.Shape(californiaPts); 

那麼你一定要擠出形狀的THREE.Shape（線167）。

var extrudeSettings = { amount: 20 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5 

var geometry = californiaShape.extrude(extrudeSettings); 

此時你必須是一個幾何對象，因此它可以變成一個網格，你可以申請一個材料，它的形狀的擠壓。