2

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

--allow-files-access-from-files フラグを付けてクロムを実行している場合に備えて、ファイルはドロップボックスのパブリック フォルダーにあり、パブリック リンクから表示されます。

アップデート

私の主な間違いは、getJSON 関数のコールバックで頂点を処理しなかったことです。私の 2 つ目の間違いは、コールバックで頂点をジオメトリ スタックに追加するだけで十分だと思い込んでいたことです。実際、ジオメトリからオブジェクトを作成し、それを機能させるためにシーンに追加する必要がありました。みんなの助けに感謝します。

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

3 に答える 3

5

getJSONのドキュメントを読んでください。これは非同期呼び出しです。

コールバックにforループを入れる必要があります。

于 2013-03-12T13:12:19.627 に答える
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タイプミス

于 2013-03-12T13:16:25.343 に答える
0

小さな間違いのようです。次のことができます。

1) HTML ページで test.json が参照されているかどうかを確認します。

2) firebug (コンソール タブ) を使用して、getJson メソッドによって返される内容を正確に確認します。

于 2013-03-12T13:34:35.110 に答える