如何使用Three.js拉伸方法渲染建筑

Question

我正在尝试使用Three.js程序化地渲染3D建筑。其中一种方法是挤出一个正方形/矩形。如图19所示：http://www.gamesitb.com/SurveyProcedural.pdf

我看过ExtrudeGeometry API的Three.js文档，但它的用法并不十分清楚。已经在网上和这个论坛上搜索了可能的例子/代码片段——徒劳！任何关于这方面的建议都会有所帮助。谢谢

Answer 1

首先要看的是THRE.js zip中提供的示例。

examples/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。形状(线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);

在这一点上，你会有一个几何对象形状的拉伸，这样它就可以变成一个网格，你可以对它应用一种材料。