Javascript ThreeJS-来自.json 3D文件的多个网格

我从在线3D编辑器导出了一个.json，我正在尝试加载它并实例化它的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)


});

var服务器对象；
var allBrains=[]
var xCenter；
var zCenter；
var间距=.2；
var newServ；
var objectLoader=new THREE.objectLoader（）；
load（“asset_src/model.json”，函数（obj）{
//给它一个全局名称，以便我以后可以访问它？
serverObject=obj
//看看里面是什么
对象遍历（功能（子项）{
if（三个.Mesh的子实例）{
console.log（子级）
}
})
//试图通过这种方式增加透明度，但最终
//通过在线编辑器应用它
//var cubeMaterial1=新的三网格基本材质({
//颜色：0xB7B7，
//折射率：0.98
// });
//我需要像这样实例化我的网格吗？如果需要，我如何确保它从json中获取材质？json有6个子元素，每个子元素具有不同的材质
//serverObject=new THREE.Mesh（obj，cubeMaterial1）；
//制作20个版本的文件
对于（变量i=0；i<20；i++）{
xCenter=Math.cos（toradian（i*间距））
zCenter=Math.sin（toradian（i*间距））
serverObject.scale.set（.09.09.09.09）
//这个偏移量对于我的世界来说是正确的
//我本来打算使用我的xCenter，zCenter，但试图简化它，直到它工作为止
serverObject.position.set（（i*.1），controls.userHeight-1，i*.1）；
allBrains.push（服务器对象）
//我尝试了多种方法将obj添加到场景中，这只是其中之一
场景。添加（所有大脑[i]）；
}
//请查看有20个网格
控制台日志（allBrains）
});

返回我的上一个控制台日志如下所示：

---

目前，您只有一个对象（

serverObject

），可以多次操作和添加该对象，但循环的每次迭代都只修改同一个对象，覆盖以前的参数

您需要克隆网格，使用<代码>克隆（）方法。然后可以修改该对象（副本）的设置，并且每个网格将保持独立

---

或者，您可以在循环中运行

objectLoader.load

方法，从JSON文件多次创建对象，但这可能会浪费资源

目前，您只有一个对象（

serverObject

），可以多次操作和添加该对象，但循环的每次迭代都只会修改同一个对象，覆盖以前的参数

您需要克隆网格，使用<代码>克隆（）方法。然后可以修改该对象（副本）的设置，并且每个网格将保持独立

---

或者，您可以在循环中运行

objectLoader.load

方法，从JSON文件多次创建对象，但这可能会浪费资源

对我来说，这似乎是一个指针问题

在JavaScript中，您可以想到像指针这样的变量，这就是为什么您不必为变量分配类型，以及函数如何可以是变量并在正常的计算机科学中仍然工作的原因

在这种情况下，您将为数组中的每个插槽分配相同的指针

这是问题的一个超级简单的版本。obj2.foo从未更改，但因为我们更改了obj.foo，obj2.foo的更改是因为变量只是指向同一个对象

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

obj.foo = 2;

console.log(obj2.foo);

我要做的是创建一个新对象，并在“serverObject”中使用主对象的信息对其进行扩展

---

对我来说，这似乎是一个指针问题

在JavaScript中，您可以想到像指针这样的变量，这就是为什么您不必为变量分配类型，以及函数如何可以是变量并在正常的计算机科学中仍然工作的原因

在这种情况下，您将为数组中的每个插槽分配相同的指针

这是问题的一个超级简单的版本。obj2.foo从未更改，但因为我们更改了obj.foo，obj2.foo的更改是因为变量只是指向同一个对象

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

obj.foo = 2;

console.log(obj2.foo);

我要做的是创建一个新对象，并在“serverObject”中使用主对象的信息对其进行扩展

---

感谢@jcaor的clone（）思想，以下是工作代码：

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)

});

var objectLoader=new THREE.objectLoader（）；
load（“asset_src/model.json”，函数（obj）{
//给它一个全局名称，以便我以后可以访问它
serverObject=obj
//看看里面是什么
对象遍历（功能（子项）{
if（三个.Mesh的子实例）{
console.log（子级）
}
})
对于（变量i=0；i<20；i++）{
var tempNew=serverObject.clone（）
xCenter=Math.cos（toradian（i*间距））
zCenter=Math.sin（toradian（i*间距））
tempNew.scale.set（.05.05.05.05）
tempNew.position.set（xCenter，controls.userHeight-1，zCenter）；
allBrains.推送（tempNew）
场景。添加（所有大脑[i]）；
}
控制台日志（allBrains）
});

感谢@jcaor的克隆（）思想，以下是工作代码：

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)

});

var objectLoader=new THREE.objectLoader（）；
load（“asset_src/model.json”，函数（obj）{
//给它一个全局名称，以便我以后可以访问它
serverObject=obj
//看看里面是什么
对象遍历（功能（子项）{
if（三个.Mesh的子实例）{
console.log（子级）
}
})
对于（变量i=0；i<20；i++）{
var tempNew=serverObject.clone（）
xCenter=Math.cos（toradian（i*间距））
zCenter=Math.sin（toradian（i*间距））
tempNew.scale.se