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

此时你必须是一个几何对象，因此它可以变成一个网格，你可以申请一个材料，它的形状的挤压。