【问题标题】:THREE JS creating a custom shape geometry三个 JS 创建自定义形状几何
【发布时间】: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


    【解决方案1】:

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

    在拉伸设置中使用数量参数来设置建筑物的高度。

    您应该只使用下平面(前半部分,Z 坐标为 0)

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

    【讨论】:

    • 那么我应该如何计算建筑物的高度?
    • 尝试使用尺寸参数而不是高度。
    • 如果我在拉伸几何体中使用高度变量,它仍然显示每个建筑物的相同高度。 =/ 虽然看起来稍微好一些,但建筑高度必须准确。我现在正在使用(例如): var extensionSettings = {height: 9.208695652173914, bevelEnabled: false};也许我忘记了什么?这是它在浏览器中的外观示例:i197.photobucket.com/albums/aa110/teugata/…
    • 不幸的是,尺寸也不起作用,看起来还是一样。
    • 我凭直觉使用了 "amount:" 。这似乎奏效了。感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多