Related
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
I have this JSON in my js script that goes on for another 150 elements :
const champlist=[{
"type": "champion",
"format": "standAloneComplex",
"version": "11.10.1",
"data": {
"Aatrox": {
"version": "11.10.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Fighter", "Tank"],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
}
},
"Ahri": {
"version": "11.10.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Mage", "Assassin"],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 21,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 5.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}
}
}];
But i want it to look like this, with only the "data" part of the JSON and the names removed :
[{
"version": "11.10.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Fighter", "Tank"],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
},
{
"version": "11.10.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Mage", "Assassin"],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 21,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 5.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}
];
Can anyone help me on how to do this please ? I've been searching all around the internet but every solution doesn't fit exactly my problem.
const champs = champList.map(obj => {
const champ = obj.data
return Object.values(champ)
})
This will return an array for you, you'll need to take champs[0] in order to format the data exactly how you want.
I am relatively new to Javascript, and just learned basic for loops and for in loops. How can I iterate over this object to get certain keys and values? there are a bunch of nested objects in objects, so i am kind of confused. I was thinking of using some sort of "Object...()" method, but not sure which one to use.
desired output outcome is an object with the given champion key, followed by the champion id/name = {"266": "Aatrox", "103" : "Ahri"}
example input below
"type": "champion",
"format": "standAloneComplex",
"version": "10.16.1",
"data": {
"Aatrox": {
"version": "10.16.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Fighter",
"Tank"
],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32.1,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
}
},
"Ahri": {
"version": "10.16.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Mage",
"Assassin"
],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 20.88,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 6.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53.04,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}```
const obj = {
name: 'Sam',
old: 30,
nested: {
data: 'ABC',
time: '3:15'
}
}
for(let i in obj){
console.log(i); //returns values
console.log(obj[i]); //returns keys
for(let j in obj[i]){
console.log(j); //returns values of nested 2d level
console.log(obj[i][j]); //returns keys of nested 2d level
}
}
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` **/
}
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.