ThreeJS - .json 3Dファイルの複数のメッシュ

Question

オンライン3Dエディタから.jsonをエクスポートしましたが、ロードして、this exampleのように20個のバージョンをインスタンス化しようとしています。私のコードは、すべての20のバージョンが実際に同じオブジェクトのように動作しています。与えられたx、z座標で別々のオブジェクトとしてシーンに追加されていない理由はわかりません。

var serverObject; 
var allBrains = [] 
var xCenter; 
var zCenter; 
var spacing = .2; 
var newServ; 

var objectLoader = new THREE.ObjectLoader(); 
objectLoader.load("asset_src/model.json", function(obj) { 

    //give it a global name, so I can access it later? 
    serverObject = obj 

    //see what's inside of it 
    obj.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       console.log(child) 
      } 
     }) 

     //was trying to add transparency this way, but ended up 
     //going through the online editor to apply it 
     // var cubeMaterial1 = new THREE.MeshBasicMaterial({ 
     //  color: 0xb7b7b7, 
     //  refractionRatio: 0.98 
     // }); 


    //Do i need to instantiate my mesh like this, if so, how do I make sure that it gets the materials from the json? The json has 6 children each with a different material 
    // serverObject = new THREE.Mesh(obj, cubeMaterial1); 


    //make 20 versions of the file 
    for (var i = 0; i < 20; i++) { 
     xCenter = Math.cos(toRadians(i * spacing)) 
     zCenter = Math.sin(toRadians(i * spacing)) 
     serverObject.scale.set(.09, .09, .09) 

     //this amount of offset is correct for the scale of my world 
     //i was going to use my xCenter, zCenter but tried to simplify it till it works 
     serverObject.position.set((i * .1), controls.userHeight - 1, i * .1); 
     allBrains.push(serverObject) 
     //I've attempted a number of ways of adding the obj to the scene, this was just one 
     scene.add(allBrains[i]); 

    } 

    // see that there are 20 meshes 
    console.log(allBrains) 


}); 

私の最後のコンソールログのリターンは次のようになります。現時点では

Answer 1

、あなたが複数回操作し、追加単一のオブジェクト（serverObject）が、ループの各反復を持っています以前のパラメータを上書きして同じオブジェクトを変更するだけです。

あなたは... clone()方法を使用して、あなたのメッシュのクローンを作成する必要があります。 の設定を変更すると、オブジェクト（コピー）が作成され、各メッシュは独立したままになります。

また、objectLoader.loadメソッドをループ内で実行して、JSONファイルから複数回オブジェクトを作成することもできますが、おそらくリソースが浪費されます。

Answer 2

これは私にとってポインタの問題のようです。あなたは、変数とどのような機能が変数であると、まだ通常のコンピュータサイエンスに働くことができるの種類を割り当てる必要はありません理由でポインタのような変数を考えることができJavaScriptでは

。

この場合、配列の各スロットに同じポインタを割り当てています。

これは、問題の超簡易版です。 obj2.fooは変更されませんでしたが、obj.foo obj2.fooが変更された理由は、varが単に同じオブジェクトを指しているためです。私はどうなるのか

var obj = { 
    foo : 1 
} 
var obj2 = obj; 

obj.foo = 2; 

console.log(obj2.foo); 

は、）（クローンについて@jcaorするアイデアを

allBrains.push(serverObject) 

Answer 3

おかげで、新しいオブジェクトを作成した場合、「serverObject」でのマスター・オブジェクトの情報とそれをpopluateですここでの作業コードは次のとおりです。

var objectLoader = new THREE.ObjectLoader(); 
objectLoader.load("asset_src/model.json", function(obj) { 

    //give it a global name, so I can access it later 
    serverObject = obj 

    //see what's inside of it 
    obj.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       console.log(child) 
      } 
     }) 


    for (var i = 0; i < 20; i++) { 
     var tempNew = serverObject.clone() 
     xCenter = Math.cos(toRadians(i * spacing)) 
     zCenter = Math.sin(toRadians(i * spacing)) 
     tempNew.scale.set(.05, .05, .05) 
     tempNew.position.set(xCenter, controls.userHeight - 1, zCenter); 
     allBrains.push(tempNew) 
     scene.add(allBrains[i]); 

    } 

    console.log(allBrains) 

});