2013-03-12 160 views
2

我無法讀取JSON文件中的數據。我已經閱讀了其他關於Stack Overflow和JSON文檔的JSON問題,但無濟於事。從JSON文件中讀取數據點

我想讀取的數據顯示在Three.js中。下面的代碼片段工作:

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

,讀入點和點上下行進一步呈現。我旁邊有一個名爲中的index.html

test.json

一個文件時,它包含以下內容:

{ "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(); 

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

這些文件位於我的公共文件夾Dropbox並從公共鏈接中查看,即使如此,以防萬一我使用--allow-files-access-from-files標誌運行chrome。

UPDATE

我的鑰匙錯誤是不處理的功能的getJSON的回調頂點。我的第二個錯誤是假設在回調中將頂點添加到幾何堆棧就足夠了。事實上,我必須從幾何創建對象,並將其添加到場景中才能使用。非常感謝大家的幫助。

$.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); 
}); 
+1

「不行」如何? – 2013-03-12 13:10:30

+0

對不起,它沒有提供任何點。更新了問題。 – StuGrey 2013-03-12 13:12:35

回答

5

閱讀文檔getJSON,這是一個異步調用!

您需要將for循環放入回調函數中。

+0

抱歉,我對JavaScript很陌生。你的意思是像Max Burucker的回答那樣構造它嗎? – StuGrey 2013-03-12 13:25:57

+0

是的,你需要有任何呈現回調內的對象。不只是你顯示的代碼。 – epascarello 2013-03-12 13:46:48

1

我認爲你應該做這樣的

$.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 錯字

+0

啊,我看到你在那裏做什麼,但是當我用上面的代碼替換我的代碼時,它仍然不顯示點。 – StuGrey 2013-03-12 13:22:37

+0

謝謝你,你的代碼給了我一個堅實的起點。我還必須從幾何創建對象,並將其添加到場景中以使其在回調中工作。 – StuGrey 2013-03-12 14:04:34

+0

@StuGrey您可以請分享我還需要閱讀json文件中三個js緩衝區幾何點的位置。 – 2016-06-30 00:44:06

0

好像微小的失誤。 你可以做以下幾點:

1)檢查是否在你的html頁面引用了test.json?

2)使用firebug(控制檯選項卡)檢查getJson方法返回的內容是什麼