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

此时，您将拥有一个几何对象的形状，因此可以将其变成网格，您可以对其应用材质。