编辑盒子几何图形顶点的正确方法是什么？答案

【问题标题】：What is the correct way to edit the vertices of a box geometry?编辑盒子几何图形顶点的正确方法是什么？
【发布时间】：2014-12-13 20:04:54
【问题描述】：

所以我正在编辑许多盒子几何图形的顶点以创建独特的形状，或修改几何图形的高度。它工作正常，我的场景看起来正确（这是一个例子http://imgur.com/sSx1bPk）。

但是，当我使用ObjectExporter 并尝试将场景加载到http://threejs.org/editor/ 时，我的顶点更改都不存在。此外，当我尝试将scene.json 文件加载到搅拌机中时，我收到一个错误（我似乎无法复制/粘贴），其中列出了KeyError:'vertices'

基本上，我构建了一个 UI 来编辑任何盒子几何体的顶点，我将这些编辑保存到一个矩阵中，然后在加载场景时交叉检查该矩阵。我的函数是这样的

setBaseTileVertices:function()
{
    var scope = this;

    scope.baseTiles.children.forEach(function(tile , t)
    {
        tile.geometry.vertices.forEach(function(vertex , v)
        {
            vertex.x = (tile.userData.vertices[v].x) ? tile.userData.vertices[v].x : vertex.x;
            vertex.y = (tile.userData.vertices[v].y) ? tile.userData.vertices[v].y : vertex.y;
            vertex.z = (tile.userData.vertices[v].z) ? tile.userData.vertices[v].z : vertex.z;
        });
    });
}

还有其他更正确的方法来编辑顶点，以便编辑器和/或 Blender 识别更改吗？我是否使用了正确的出口商？我尝试使用THREE.SceneExporter，但出现错误，如下所示Three.js SceneExporter getting Uncaught Syntax error

编辑

经过一番调查，我发现在我的输出 JSON 中，我所有的盒子几何图形都具有相似的矩阵值，而我创建的方形金字塔具有正确的矩阵。我想当我修改它时我需要更新每个几何的矩阵。现在不太确定如何做到这一点，但我认为我走在正确的轨道上。

编辑 2

嗯，似乎我的每个几何图形的矩阵都在更新，所以我不知道现在发生了什么。我创建的金字塔渲染得很好，但是所有的盒子几何形状都变平了，它们的顶点没有变化。这是它在编辑器中的外观示例http://imgur.com/oGury4e 请注意，边界框助手知道baseTiles 的高度，这是一个包含每个图块的Object3D。只有考虑到他们编辑的顶点，它才能知道这一点。

编辑 3

所以我做了一个测试并修改了ObjectExporter.js 的第 65 - 74 行，以便它们现在可以阅读

} else if ( geometry instanceof THREE.BoxGeometry ) {

    data.type = 'Geometry';
    data.data = geometryExporter.parse( geometry );

    delete data.data.metadata;

    //handleParameters( [ 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments' ] );}

现在我的关卡在编辑器http://imgur.com/IDlYCJ6 中的形状看起来是正确的，但是我的颜色或材料似乎没有被翻译过来？一切都是黑色的，而几何图形的 +Y 面应该是绿色的。

根据要求，这里是使用未编辑的 ObjectExporter 导出的示例

{
    "metadata": {
        "version": 4.3,
        "type": "Object",
        "generator": "ObjectExporter"
    },
    "geometries": [{
        "uuid": "25437534-318D-4BB9-9E97-207E390F1A8D",
        "type": "BoxGeometry",
        "width": 64,
        "height": 32,
        "depth": 64
    }],
    "materials": [{
        "type": "MeshFaceMaterial",
        "materials": [{
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "BCFDD918-A69C-4443-806A-A46E356C272C",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "4969265D-D0B2-4E4A-A60A-AB20EC541FD5",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "141153C7-C284-4120-9DB9-8386F4C90496",
            "type": "MeshBasicMaterial",
            "color": 6127158,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "B2CDDAE4-B690-41F7-84EC-377C73A7FF21",
            "type": "MeshBasicMaterial",
            "color": 6127158,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "0B21CD67-D4FA-447E-9CA1-56CA755C0872",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "3089DC93-85E8-42CD-BBE9-2D2A45441AB2",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }]
    }],
    "object": {
        "uuid": "DE6BC181-ECA5-4B7A-85EA-64387C8B04E1",
        "name": "tile_5_10",
        "type": "Mesh",
        "geometry": "25437534-318D-4BB9-9E97-207E390F1A8D",
        "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 640, 0, 320, 1]
    }
}

这是一个 JSON 示例（它是一个不同的对象，因此某些值可能不同）与我的编辑（盒子几何被解析为几何，如果我像这样解析整个场景，它会给出这个结果 http://imgur.com/IDlYCJ6 )

{
    "metadata": {
        "version": 4.3,
        "type": "Object",
        "generator": "ObjectExporter"
    },
    "geometries": [{
        "uuid": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
        "type": "Geometry",
        "data": {
            "vertices": [32, 88, 32, 32, 88, -32, 32, -16, 32, 32, -16, -32, -32, 112, -32, -32, 112, 32, -32, -16, -32, -32, -16, 32],
            "normals": [1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1],
            "uvs": [
                [0, 1, 0, 0, 1, 1, 1, 0]
            ],
            "faces": [56, 0, 2, 1, 0, 1, 2, 0, 0, 0, 0, 56, 2, 3, 1, 1, 3, 2, 0, 0, 0, 0, 56, 4, 6, 5, 0, 1, 2, 1, 1, 1, 1, 56, 6, 7, 5, 1, 3, 2, 1, 1, 1, 1, 56, 4, 5, 1, 0, 1, 2, 2, 2, 2, 2, 56, 5, 0, 1, 1, 3, 2, 2, 2, 2, 2, 56, 7, 6, 2, 0, 1, 2, 3, 3, 3, 3, 56, 6, 3, 2, 1, 3, 2, 3, 3, 3, 3, 56, 5, 7, 0, 0, 1, 2, 4, 4, 4, 4, 56, 7, 2, 0, 1, 3, 2, 4, 4, 4, 4, 56, 1, 3, 4, 0, 1, 2, 5, 5, 5, 5, 56, 3, 6, 4, 1, 3, 2, 5, 5, 5, 5]
        }
    }],
    "materials": [{
        "type": "MeshFaceMaterial",
        "materials": [{
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "E1E6A4F7-06B0-41E2-8131-F2E103D8F7F7",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "7D777F70-D279-4112-AD6F-FBAFCE1EE9E2",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "5BBC767A-F130-4F4D-8A5C-489C40D2F698",
            "type": "MeshBasicMaterial",
            "color": 6127158,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "F4F167E2-013E-4A6A-B7F1-80246DD15023",
            "type": "MeshBasicMaterial",
            "color": 6127158,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "CA2ADC0E-F20B-485B-B5D3-DE9B58A733B0",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }, {
            "metadata": {
                "version": 4.2,
                "type": "material",
                "generator": "MaterialExporter"
            },
            "uuid": "7BC988E6-B3A0-4BF2-B360-1C0F4976436F",
            "type": "MeshBasicMaterial",
            "color": 0,
            "opacity": 1,
            "transparent": false,
            "wireframe": false
        }]
    }],
    "object": {
        "uuid": "809D131E-3F34-4DCB-8304-EDCA144BF1A6",
        "name": "tile_9_9",
        "type": "Mesh",
        "geometry": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
        "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 576, 0, 576, 1]
    }
}

有什么想法吗？

【问题讨论】：

是tile.geometry 还是THREE.Geometry 或THREE.BufferGeometry 的实例？
这是一个盒子几何形状，但是是的，我认为您问的问题是正确的。我将使用 dev 分支中的新 OBJ.Exporter 进行测试，因为这似乎更合适。
您能否发布一段显示相关对象的输出 JSON 的摘录？
是的！是的，这是问题的一部分，因为当前 (r68) ObjectExporter 似乎不包括盒子几何的顶点、uvs 或法线数据，只有参数。

标签： javascript three.js

【解决方案1】：

经过大量研究，我发现目前，正确的方法是将BoxGeometry 对象转换为BufferGeometry 或常规Geometry 对象。您可以在编辑其顶点后执行此操作。

像这样的

var box = new THREE.BoxGeometry(64 , 32 , 64);

box.verticesNeedUpdate = true;
box.vertices[0].y = 128;
box.vertices[1].y = 128;

var geometry = new THREE.BufferGeometry().fromGeometry(box);

//or alternatively

var geometry = new THREE.Geometry();
geometry.merge(box);

现在，如果您使用ObjectExporter 导出对象，它应该可以加载到http://threejs.org/editor 中。

【讨论】：

box.vertices 对我来说是未定义的。有没有人遇到过类似的问题？
@KonradLinkowski 是的，我也遇到了这个问题。我相信这与图书馆的更新有关。试图自己寻找一些资源来解决这个问题。