Three.js : GLTF loading but not appearing - javascript

I'm trying to load GLTF into Three.js but it doesn't show up on the screen. I'm new to Three.js, so I've tried many ways but nothing works. There are no errors appearing in the Chrome developer window, just a white screen. Anyone know a solution?
Also My gltf file opens fine in the gltf viewer.
<!DOCTYPE html>
<html>
<head>
<title>gltfExample01</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/glTFLoader.js" />
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader();
loader.load(
// resource URL
'./scene01.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
}
);
function render() {
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
}
window.onload = init
</script>
</body>
</html>
PS. I'll attach chrome screen pictures.
Chrome screen showing Elements
Chrome screen showing console
PS. I'll attach the contents of the glTF file just in case.
{
"asset": {
"version": "2.0",
"generator": "THREE.GLTFExporter"
},
"scenes": [
{
"name": "Scene",
"nodes": [
0,
1,
4
]
}
],
"scene": 0,
"nodes": [
{
"name": "AmbientLight"
},
{
"name": "AmbientLight"
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
2.3733431490050236,
0.5964163550565602,
5.436433345955958,
1
],
"name": "Box",
"mesh": 0
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
2.6066889361693835,
0.5777642421996207,
4.790873598688476,
1
],
"name": "Box",
"mesh": 1
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
1.577277964727821,
-0.2596547250878648,
4.688496925702815,
1
],
"name": "Box",
"mesh": 0,
"children": [
2,
3
]
}
],
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 288,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 576,
"byteLength": 192,
"target": 34962,
"byteStride": 8
},
{
"buffer": 0,
"byteOffset": 768,
"byteLength": 72,
"target": 34963
},
{
"buffer": 0,
"byteOffset": 840,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 1128,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 1416,
"byteLength": 192,
"target": 34962,
"byteStride": 8
},
{
"buffer": 0,
"byteOffset": 1608,
"byteLength": 72,
"target": 34963
}
],
"buffers": [
{
"byteLength": 1680,
"uri": "data:application/octet-stream;base64,AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAvwAAAL8AAAC/AAAAvwAAAL8AAAA/AAAAvwAAAD8AAAC/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAvwAAAL8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAL8AAAC/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUAAAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAvwAAAL8AAAC/AAAAvwAAAL8AAAA/AAAAvwAAAD8AAAC/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAvwAAAL8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAL8AAAC/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUA"
}
],
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 24,
"max": [
0.5,
0.5,
0.5
],
"min": [
-0.5,
-0.5,
-0.5
],
"type": "VEC3"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 24,
"max": [
1,
1,
1
],
"min": [
-1,
-1,
-1
],
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 24,
"max": [
1,
1
],
"min": [
0,
0
],
"type": "VEC2"
},
{
"bufferView": 3,
"componentType": 5123,
"count": 36,
"max": [
23
],
"min": [
0
],
"type": "SCALAR"
},
{
"bufferView": 4,
"componentType": 5126,
"count": 24,
"max": [
0.5,
0.5,
0.5
],
"min": [
-0.5,
-0.5,
-0.5
],
"type": "VEC3"
},
{
"bufferView": 5,
"componentType": 5126,
"count": 24,
"max": [
1,
1,
1
],
"min": [
-1,
-1,
-1
],
"type": "VEC3"
},
{
"bufferView": 6,
"componentType": 5126,
"count": 24,
"max": [
1,
1
],
"min": [
0,
0
],
"type": "VEC2"
},
{
"bufferView": 7,
"componentType": 5123,
"count": 36,
"max": [
23
],
"min": [
0
],
"type": "SCALAR"
}
],
"materials": [
{
"pbrMetallicRoughness": {
"baseColorFactor": [
0.3411764705882353,
0.23921568627450981,
0.23921568627450981,
1
],
"metallicFactor": 0.5,
"roughnessFactor": 0.5
},
"emissiveFactor": [
0.6784313725490196,
0.2823529411764706,
0.2823529411764706
]
},
{
"pbrMetallicRoughness": {
"metallicFactor": 0,
"roughnessFactor": 1
},
"emissiveFactor": [
0.16862745098039217,
1,
0
]
}
],
"meshes": [
{
"primitives": [
{
"mode": 4,
"attributes": {
"POSITION": 0,
"NORMAL": 1,
"TEXCOORD_0": 2
},
"indices": 3,
"material": 0
}
]
},
{
"primitives": [
{
"mode": 4,
"attributes": {
"POSITION": 4,
"NORMAL": 5,
"TEXCOORD_0": 6
},
"indices": 7,
"material": 1
}
]
}
]
}
And this is image of my glTF File.
glTF image

Related

match and assign value from array and objects

I have a datasource data which is an array of object and it has Column. How do we match it to the tempValues object and get the tempValues values that matches the column on dataSource.
The finalOuput is provided below on how the final ouput should look like . Thanks.
#Data Source
dataSouce = [
{
"name": "NVB",
"value": 0,
"financeValue": 0,
"column": "nvb",
"isEdit": false
},
{
"name": "ROU",
"value": 0,
"financeValue": 0,
"column": "rou",
"isEdit": false
},
{
"name": "Net Present Value",
"value": 0,
"financeValue": 0,
"column": "netPresentValue",
"isEdit": false
},
]
#tempValues
tempValues = {
"transactionId": 20,
"nvb": 20,
"rou": 100,
"netPresentValue": 50,
"dealIdleDetailsForFinanceDto": {
"nvb": 99,
"rou": 4,
"netPresentValue": 0,
}
}
#FinalOutput
= [
{
"name": "NVB",
"value": 20,
"financeValue": 99,
"column": "nvb",
"isEdit": false
},
{
"name": "ROU",
"value": 100,
"financeValue": 4,
"column": "rou",
"isEdit": false
},
{
"name": "Net Present Value",
"value": 50,
"financeValue": 0,
"column": "netPresentValue",
"isEdit": false
},
]
How can I match on value and then add value to object?

Format data set as expected by endpoint request

I am trying to format data that I send to an endpoint. Currently the endpoint expects a certain format but the data that I am sending does not match that entirely. The data I am sending has extra brackets. Please see my code below versus what it expected.
What I am sending
[
[
{
"corporateId": "97765c76-19c3-48b5-8183-d450e72e8f23",
"selectedMAP": [
{
"mapId": 53,
"mapName": "Discovery",
"active": true,
"options": [
{
"optionId": 81,
"optionName": "Keycare",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
}
]
},
{
"mapId": 54,
"mapName": "Bestmed",
"active": true,
"options": [
{
"optionId": 83,
"optionName": "Beat 1",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 84,
"optionName": "Beat 2",
"memberAmount": 2000,
"adultDependantAmount": 1000,
"childDependantAmount": 1000,
"active": true
}
]
}
]
}
],
{
"gapCoverProviders": [
{
"id": 0,
"name": "a",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "b",
"optionPrice": 111,
"isActive": true
}
]
}
]
}
]
What is expected
{
"corporateId": "string",
"active": true,
"selectedMAP": [
{
"mapId": 0,
"mapName": "string",
"active": true,
"options": [
{
"optionId": 0,
"optionName": "string",
"memberAmount": 0,
"adultDependantAmount": 0,
"childDependantAmount": 0,
"active": true
}
]
}
],
"gapCoverProviders": [
{
"id": 0,
"name": "string",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "string",
"isActive": true,
"optionPrice": 0
}
]
}
]
}
I build the structure that is being posted as follows. I have 2 models which I then combine into 1 data set.
model 1
export class CompanyMedicalAidProvider {
corporateId: string;
active: boolean = true;
selectedMAP: Array<SelectedMap>;
}
model 2
export class CompanyGapCoverProvider {
gapCoverProviders: Array<GapCoverProviders>;
}
data that gets posted
data = [this.companyMedicalAidProvider, this.companyGapCoverProvider];
Any ideas how i can go about changing the structure? I am stuck on this part.

You can create new Data in required format like this
var data = [
[
{
"corporateId": "97765c76-19c3-48b5-8183-d450e72e8f23",
"selectedMAP": [
{
"mapId": 53,
"mapName": "Discovery",
"active": true,
"options": [
{
"optionId": 81,
"optionName": "Keycare",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
}
]
},
{
"mapId": 54,
"mapName": "Bestmed",
"active": true,
"options": [
{
"optionId": 83,
"optionName": "Beat 1",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 84,
"optionName": "Beat 2",
"memberAmount": 2000,
"adultDependantAmount": 1000,
"childDependantAmount": 1000,
"active": true
}
]
}
]
}
],
{
"gapCoverProviders": [
{
"id": 0,
"name": "a",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "b",
"optionPrice": 111,
"isActive": true
}
]
}
]
}
]
var newData = data[0][0]
newData['gapCoverProviders'] = data[1]['gapCoverProviders'];
console.log(newData)

Check properties that changed since last interval in NodeJS

In nodeJS, let's say that I have a little setInterval:
setInterval(() => {
// ...
}, 50)
And it sends to client entities:
setInterval(() => {
socket.emit("entities", { ... })
}, 50)
Entities looks like this:
{
"0": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 1970,
"y": 1477
},
"uid": 0,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
},
"1": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 1240,
"y": 1866
},
"uid": 1,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
},
"2": {
"collisionRadius": 40,
"entityClass": "Prop",
"health": 100,
"maxHealth": 100,
"model": "Tree",
"position": {
"x": 2195,
"y": 2034
},
"uid": 2,
"damage": 10,
"dead": 0,
"height": 32,
"hits": [],
"interpolatedYaw": 0,
"slowed": 0,
"stunned": 0,
"timeDead": 0,
"width": 32,
"yaw": 0
}
}
How do I, at every interval, only send updated properties from the all entities, and if all the entity didn't change, only send true?
Received entities should look like this:
{
"0": true,
"1": {
"health": 99,
"position": {
"x": 1245, /** position and health changed, send them **/
"y": 1866 /** even if only the x changed, send y too **/
}
},
"2": true /** all the entity stayed the same, so send `true` **/
}

How to select multiple elements with xPath?

I'm using defiantjs to select elements in an object. This is my object:
{
"name": "Retail Sales",
"weight": 10,
"length": 6,
"type": "retailSales",
"rows": [
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 1,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 2,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 3,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
}
]
}
How do I select all month, plan, actual and weight inside each objects in row[]?
I'd like an output like this:
[[1,0,0,0],[2,0,0,0],[3,0,0,0]]
I can do //rows/month and //rows/plan but don't know how to do both.

You can use map method which applies a callback function for every item in the array.
Read more about map method.
let obj={
"name": "Retail Sales",
"weight": 10,
"length": 6,
"type": "retailSales",
"rows": [
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 1,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 2,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 3,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
}
]
}
let array=obj.rows.map(function(row){
return [row.month,row.plan,row.actual,row.weight];
});
console.log(JSON.stringify(array));

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

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).
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'
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;
});
});
}
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
Edit
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.
Edit 2
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.
Edit 3
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' ] );}
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.
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]
}
}
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]
}
}
Any ideas?

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.
So something like 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 you export the object using the ObjectExporter it should load into http://threejs.org/editor fine.

Categories