【发布时间】:2013-11-29 17:42:32
【问题描述】:
我一直在尝试使用 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);
【问题讨论】:
标签: javascript three.js shape