0

我从在线 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)


});

我最后一个控制台日志的返回如下所示： 在此处输入图像描述

4

3 回答 3

1

目前，您有一个对象serverObject（

您需要使用 ...clone()方法克隆您的网格。然后，您将能够修改该对象（副本）的设置，并且每个网格都将保持独立。

或者，您可以objectLoader.load在循环内运行该方法以从 JSON 文件多次创建对象，但这可能会浪费资源。

于 2016-10-24T18:36:14.820 回答
1

感谢@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)

});
于 2016-10-24T18:56:22.617 回答
0

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

在 JavaScript 中，您可以将变量视为指针，这就是为什么您不必为变量分配类型以及函数如何成为变量并且仍然可以在普通计算机科学中工作的原因。

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

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

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

obj.foo = 2;

console.log(obj2.foo);

我要做的是创建一个新对象并在您的情况下使用主对象的信息填充它“serverObject”

allBrains.push(serverObject)
于 2016-10-24T18:44:49.297 回答