I am having trouble reading in data from a JSON file. I have gone through the other reading JSON questions on Stack Overflow and the JSON docs to no avail.
I am trying to read in data to be displayed in Three.js. The following snippet works:
var obj = { "points" : [
{ "vertex":[0.0,0.0,0.0] },
{ "vertex":[200.0,0.0,0.0] },
{ "vertex":[-200.0,0.0,0.0] },
{ "vertex":[0.0,100.0,0.0] },
{ "vertex":[0.0,-100.0,0.0] },
{ "vertex":[0.0,0.0,300.0] },
{ "vertex":[0.0,0.0,-300.0] },
{ "vertex":[75.0,75.0,75.0] },
{ "vertex":[50.0,50.0,50.0] },
{ "vertex":[25.0,25.0,25.0] } ]};
var geometry = new THREE.Geometry();
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj.points[i].vertex[0];
vertex.y = obj.points[i].vertex[1];
vertex.z = obj.points[i].vertex[2];
geometry.vertices.push( vertex );
}
It reads in the points and the points are rendered further down the line. I have a file next to the index.html named
test.json
it contains the following:
{ "points" : [
{ "vertex":[0.0,0.0,0.0] },
{ "vertex":[200.0,0.0,0.0] },
{ "vertex":[-200.0,0.0,0.0] },
{ "vertex":[0.0,100.0,0.0] },
{ "vertex":[0.0,-100.0,0.0] },
{ "vertex":[0.0,0.0,300.0] },
{ "vertex":[0.0,0.0,-300.0] },
{ "vertex":[75.0,75.0,75.0] },
{ "vertex":[50.0,50.0,50.0] },
{ "vertex":[25.0,25.0,25.0] }
]}
My problem is that the following doesn't work (i.e. doesn't display the points):
var geometry = new THREE.Geometry();
var obj2 = jQuery.getJSON('test.json');
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj2.points[i].vertex[0];
vertex.y = obj2.points[i].vertex[1];
vertex.z = obj2.points[i].vertex[2];
geometry.vertices.push( vertex );
}
The files are in the public folder of my dropbox and viewed from the public link, even so, just in case i'm running chrome with the --allow-files-access-from-files flag.
UPDATE
My key mistake was not processing the vertices in the callback of the getJSON function. My secondary mistake was assuming that adding the vertices to the geometry stack in the callback was enough. In fact I had to create the object from the geometry and add it to the scene for it to work. Many thanks for everyones help.
$.getJSON('test.json', function(obj2) {
var geometry = new THREE.Geometry();
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj2.points[i].vertex[0];
vertex.y = obj2.points[i].vertex[1];
vertex.z = obj2.points[i].vertex[2];
geometry.vertices.push( vertex );
}
vc1 = geometry.vertices.length;
object = new THREE.ParticleSystem( geometry, shaderMaterial );
object.dynamic = true;
var vertices = object.geometry.vertices;
var values_size = attributes.size.value;
var values_color = attributes.ca.value;
for( var v = 0; v < vertices.length; v ++ ) {
values_size[ v ] = 50;
values_color[ v ] = new THREE.Color( 0xffffff );
}
scene.add( object );
});
I am having trouble reading in data from a JSON file. I have gone through the other reading JSON questions on Stack Overflow and the JSON docs to no avail.
I am trying to read in data to be displayed in Three.js. The following snippet works:
var obj = { "points" : [
{ "vertex":[0.0,0.0,0.0] },
{ "vertex":[200.0,0.0,0.0] },
{ "vertex":[-200.0,0.0,0.0] },
{ "vertex":[0.0,100.0,0.0] },
{ "vertex":[0.0,-100.0,0.0] },
{ "vertex":[0.0,0.0,300.0] },
{ "vertex":[0.0,0.0,-300.0] },
{ "vertex":[75.0,75.0,75.0] },
{ "vertex":[50.0,50.0,50.0] },
{ "vertex":[25.0,25.0,25.0] } ]};
var geometry = new THREE.Geometry();
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj.points[i].vertex[0];
vertex.y = obj.points[i].vertex[1];
vertex.z = obj.points[i].vertex[2];
geometry.vertices.push( vertex );
}
It reads in the points and the points are rendered further down the line. I have a file next to the index.html named
test.json
it contains the following:
{ "points" : [
{ "vertex":[0.0,0.0,0.0] },
{ "vertex":[200.0,0.0,0.0] },
{ "vertex":[-200.0,0.0,0.0] },
{ "vertex":[0.0,100.0,0.0] },
{ "vertex":[0.0,-100.0,0.0] },
{ "vertex":[0.0,0.0,300.0] },
{ "vertex":[0.0,0.0,-300.0] },
{ "vertex":[75.0,75.0,75.0] },
{ "vertex":[50.0,50.0,50.0] },
{ "vertex":[25.0,25.0,25.0] }
]}
My problem is that the following doesn't work (i.e. doesn't display the points):
var geometry = new THREE.Geometry();
var obj2 = jQuery.getJSON('test.json');
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj2.points[i].vertex[0];
vertex.y = obj2.points[i].vertex[1];
vertex.z = obj2.points[i].vertex[2];
geometry.vertices.push( vertex );
}
The files are in the public folder of my dropbox and viewed from the public link, even so, just in case i'm running chrome with the --allow-files-access-from-files flag.
UPDATE
My key mistake was not processing the vertices in the callback of the getJSON function. My secondary mistake was assuming that adding the vertices to the geometry stack in the callback was enough. In fact I had to create the object from the geometry and add it to the scene for it to work. Many thanks for everyones help.
$.getJSON('test.json', function(obj2) {
var geometry = new THREE.Geometry();
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj2.points[i].vertex[0];
vertex.y = obj2.points[i].vertex[1];
vertex.z = obj2.points[i].vertex[2];
geometry.vertices.push( vertex );
}
vc1 = geometry.vertices.length;
object = new THREE.ParticleSystem( geometry, shaderMaterial );
object.dynamic = true;
var vertices = object.geometry.vertices;
var values_size = attributes.size.value;
var values_color = attributes.ca.value;
for( var v = 0; v < vertices.length; v ++ ) {
values_size[ v ] = 50;
values_color[ v ] = new THREE.Color( 0xffffff );
}
scene.add( object );
});
- Sorry, it doesn't render any of the points. Updated the question. – StuGrey Commented Mar 12, 2013 at 13:12
3 Answers
Reset to default 5Read the docs for getJSON, it is an asynchronous call!
You need to put the for loop in in the callback.
I think you should do it like this
$.getJSON('test.json', function(obj2) {
for (var i=0;i<10;i++)
{
var vertex = new THREE.Vector3();
vertex.x = obj2.points[i].vertex[0];
vertex.y = obj2.points[i].vertex[1];
vertex.z = obj2.points[i].vertex[2];
geometry.vertices.push( vertex );
}
});
Edit1 typo
Seems like tiny mistake. You can do following:
1) Check whether test.json is referenced in your html page or not?
2) Use firebug (console tab) to check exactly what is returned by getJson method