Question

我一直在尝试使用THREE.js三维构建和可视化一个令人兴奋的城市。为此，我有大约1000座建筑物的坐标。由于每个建筑物都可以有任意数量的角落，因此无法使用cubeGeometry，因此我尝试创建自定义几何体而没有太多成功。 buildingCoords指定建筑物相对于场景中心的所有建筑物坐标，它还包括楼层高度坐标以及每个建筑物的屋顶高度坐标。问题是，当我像这样渲染它时，它没有考虑任何高度（不知何时挤出设置给它一个高度，这不是建筑物的实际高度），此外挤出设置给它整个非常奇怪的形状。最大的问题是我无法找到有关挤出工作原理的任何文档，我一直在为挤出设置变量尝试很多不同的值，但我一直无法得到任何接近结果的结果我我正在寻找:(，这是一个在给定坐标上有角落的建筑物，没有奇怪的曲线或变异的形状。

以下是一个建筑物的示例：

        var buildings = [];
        var buildingCoords = [new THREE.Vector3(-330.8653652173956,-312.7242347826201,0),new THREE.Vector3(-329.8339913043564,-310.8272434783638,0),new THREE.Vector3(-324.56661739130294,-313.6665913044507,0),new THREE.Vector3(-325.6655217391161,-315.69250434781463,0),new THREE.Vector3(-330.8653652173956,-312.7242347826201,0),new THREE.Vector3(-330.8653652173956,-312.7242347826201,6.75304347826087),new THREE.Vector3(-329.8339913043564,-310.8272434783638,6.75304347826087),new THREE.Vector3(-324.56661739130294,-313.6665913044507,6.75304347826087),new THREE.Vector3(-325.6655217391161,-315.69250434781463,6.75304347826087),new THREE.Vector3(-330.8653652173956,-312.7242347826201,6.75304347826087)];
        buildingShape = new THREE.Shape(buildingCoords);
        var extrusionSettings = {amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1};
        var buildingGeometry = new THREE.ExtrudeGeometry(buildingShape, extrusionSettings);
        var buildingMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});  
        var building = new THREE.Mesh(buildingGeometry,buildingMaterial );
        buildings.push(building);
        scene.add(building);

Answer 1

我看到你在buildingCoords中使用了建筑物的上下平面。

在挤出设置中使用amount参数来设置建筑物的高度。

您应该只使用较低的平面（前半部分，Z坐标为0）

http://threejsdoc.appspot.com/doc/three.js/src.source/extras/geometries/ExtrudeGeometry.js.html

THREE JS创建自定义形状几何体

1 个答案: