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

下一步是将这些行转换为THREE.Shape（第167行）

var californiaShape = new THREE.Shape( californiaPts );

然后你想挤出形状。

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

var geometry = californiaShape.extrude(extrudeSettings);

此时，您将拥有一个几何体对象的形状，因此可以将其转换为网格，然后可以将材质应用于该网格。