javascript - 编辑长方体几何顶点的正确方法是什么？

Question

因此，我正在编辑许多长方体几何体的顶点以创建独特的形状，或修改几何体的高度。它工作正常，我的场景看起来正确(这里是一个例子 http://imgur.com/sSx1bPk )。

但是，当我使用 ObjectExporter 并尝试将场景加载到 http://threejs.org/editor/ 中时，我的顶点变化都不存在。此外，当我尝试将 scene.json 文件加载到 blender 中时，我收到一个错误(我似乎无法复制/粘贴)，其中列出了 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 的高度，它是包含每个图 block 的 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但是，似乎我的颜色或 Material 没有被翻译过来？一切都是黑色的，而几何体的 +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]
    }
}

有什么想法吗？

Answer 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 中美好的。