如何使用Three.js挤出方法渲染建筑物?

时间:2013-02-25 12:53:54

标签: three.js procedural

我正在尝试使用Three.js在程序上渲染3D建筑。这样做的一种方法是挤压方形/矩形。请参见图19:http://www.gamesitb.com/SurveyProcedural.pdf

我查看了ExtrudeGeometry API的Three.js文档,但其用法不是很清楚。已经在网络和这个论坛上搜索了可能的示例/代码片段 - 徒劳无功!任何关于此的指针都会有所帮助。感谢。

1 个答案:

答案 0 :(得分: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);

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