我一直在尝试使用THREE.js 3维来构建和可视化一个现存的城市。为此,我有大约1000座建筑物的坐标。由于每座建筑物都可以有n个角,因此无法使用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);
我看到您在buildingCoords中同时使用建筑物的上下平面。
在拉伸设置中使用数量参数来设置建筑物的高度。
您应该只使用下平面(上半部分,Z坐标为0)
http://threejsdoc.appspot.com/doc/three.js/src.source/extras/geometries/ExtrudeGeometry.js.html
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句