编辑长方体几何顶点的正确方法是什么? [英] What is the correct way to edit the vertices of a box geometry?
问题描述
所以我正在编辑许多盒子几何图形的顶点以创建独特的形状，或修改几何图形的高度.它工作正常，我的场景看起来正确(这里有一个例子 http://imgur.com/sSx1bPk).
So I'm editing the vertices of many box geometries to create unique shapes, or to modify the heights of the geometries. It works fine and my scenes look correct (here's an example http://imgur.com/sSx1bPk).
但是，当我使用 ObjectExporter 并尝试将场景加载到 http://threejs.org/editor/，我的顶点变化不存在.此外，当我尝试将 scene.json 文件加载到 Blender 中时，我收到一个错误(我似乎无法复制/粘贴)，其中列出了 KeyError:'vertices'
However, when I use the ObjectExporter and try to load the scene into http://threejs.org/editor/, none of my vertex changes are present. Also when I try to load the scene.json file into blender, I get an error (which I can't seem to copy/paste) which lists KeyError:'vertices'
基本上，我构建了一个 UI 来编辑任何框几何体的顶点，我将这些编辑保存到一个矩阵中，然后在加载场景时交叉检查该矩阵.我的功能看起来像这样
Basically, I built a UI to edit the vertices of any box geometry, I save these edits into a matrix, then cross check that matrix when loading the scene. My function looks like this
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 出现未捕获的语法错误
Is there some other more correct way to edit vertices so that the changes will be recognised by the editor and/or Blender? Am I using the right exporter? I tried used the THREE.SceneExporter but got errors as indicated here Three.js SceneExporter getting Uncaught Syntax error
编辑
经过一番调查，我发现在我的输出 JSON 中，我所有的盒子几何图形都具有相似的矩阵值，而我创建的方形金字塔具有正确的矩阵.我想我需要在修改每个几何图形时更新它的矩阵.现在不太确定该怎么做，但我认为我走在正确的轨道上.
After a bit of investigation, I've seen that in my output JSON, all my box geometries have a similar matrix value, while a square pyramid I created has the correct matrix. I guess I need to update the matrix of each geometry when I modify it. Not too sure how to do that right now but I think I'm on the right track.
编辑 2
看来我的每个几何的矩阵都在更新，所以我不知道现在发生了什么.我创建的金字塔渲染得很好，但所有的盒子几何形状都变得平坦，它们的顶点没有变化.这是它在编辑器中的外观示例 http://imgur.com/oGury4e 请注意边界框helper 知道 baseTiles 的高度，它是一个包含每个 tile 的 Object3D.它只有在将其编辑的顶点分解后才能知道这一点.
Well it seems like the matrices for each of my geometries are getting updated, so I don't know what's going on now. The pyramid I've created renders fine, but all the box geometries just become flat, with no change to their vertices. Here's an example of how it looks in the editor http://imgur.com/oGury4e note that the bounding box helper knows the height of baseTiles which is an Object3D that contains each tile. It can only know this if its factoring in their edited vertices.
编辑 3
所以我做了一个测试并修改了 ObjectExporter.js 的第 65 - 74 行，以便他们现在阅读
So I've done a test and modified lines 65 - 74 of ObjectExporter.js so that they now read
} 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 面应为绿色.
Now my level looks correct in terms of shape in the editor http://imgur.com/IDlYCJ6 however, seems like my colours or materials are not getting translated over? Everything is black, whereas the +Y faces of the geometries should be coloured green.
根据要求，这里有一个使用未编辑的 ObjectExporter 导出的示例
As requested here's an example from exporting with the non-edited 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)
And here is an example of the JSON (it's a different object so some values may be different) with my edits (box geometry is parsed as geometry, if I parse the entire scene like this, it gives this result 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]
}
}
有什么想法吗?
推荐答案
经过大量研究，我发现目前正确的方法是将 BoxGeometry 对象转换为BufferGeometry 或常规的 Geometry 对象.您可以在编辑它们的顶点后执行此操作.
After a bunch of research, I've found that currently, the correct way to do this is to convert your BoxGeometry objects to BufferGeometry or regular Geometry objects. You can do this after editing their vertices.
像这样
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 很好.
Now, if you export the object using the ObjectExporter it should load into http://threejs.org/editor fine.
这篇关于编辑长方体几何顶点的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
