javascript - What is the correct way to edit the vertices of a box geometry? -

javascript - What is the correct way to edit the vertices of a box geometry? -

so i'm editing vertices of many box geometries create unique shapes, or modify heights of geometries. works fine , scenes right (here's illustration http://imgur.com/ssx1bpk).

however, when utilize objectexporter , seek load scene http://threejs.org/editor/, none of vertex changes present. when seek load scene.json file blender, error (which can't seem copy/paste) lists keyerror:'vertices'

basically, built ui edit vertices of box geometry, save these edits matrix, cross check matrix when loading scene. function looks 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; }); }); }

is there other more right way edit vertices changes recognised editor and/or blender? using right exporter? tried used three.sceneexporter got errors indicated here three.js sceneexporter getting uncaught syntax error

edit

after bit of investigation, i've seen in output json, box geometries have similar matrix value, while square pyramid created has right matrix. guess need update matrix of each geometry when modify it. not sure how right think i'm on right track.

edit 2

well seems matrices each of geometries are getting updated, don't know what's going on now. pyramid i've created renders fine, box geometries become flat, no alter vertices. here's illustration of how looks in editor http://imgur.com/ogury4e note bounding box helper knows height of basetiles object3d contains each tile. can know if factoring in edited vertices.

edit 3

so i've done test , modified lines 65 - 74 of objectexporter.js 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' ] );}

now level looks right in terms of shape in editor http://imgur.com/idlycj6 however, seems colours or materials not getting translated over? black, whereas +y faces of geometries should coloured green.

as requested here's illustration exporting 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] } }

and here illustration of json (it's different object values may different) edits (box geometry parsed geometry, if parse entire scene this, gives 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] } }

any ideas?

after bunch of research, i've found currently, right way convert boxgeometry objects buffergeometry or regular geometry objects. can after editing vertices.

so this

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);

now, if export object using objectexporter should load http://threejs.org/editor fine.

javascript three.js