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

时间：2014-10-18 10:07:30

标签： javascript three.js

所以我正在编辑许多框几何的顶点以创建独特的形状，或者修改几何的高度。它工作正常，我的场景看起来正确（这是一个例子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的高度，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的例子（它是一个不同的对象，所以有些值可能不同）和我的编辑（框几何被解析为几何，如果我像这样解析整个场景，它给出了这个结果{{3 }}）

{
    "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]
    }
}

有什么想法吗？

1 个答案:

答案 0 :(得分：2)

经过大量研究，我发现目前正确的方法是将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。

相关问题
最新问题