Question

我想加载多个JSON文件并控制其网格的可见性。为此，我将它们与JSON文件名相关联。我得到了它的工作，但解决方案并不让我满意。

我修改了THREE.JSONLoader并将一个新参数传递给了回调函数。因此，对于每个新版本的three.js，我将不得不再次修补three.js文件。

这是我的工作解决方案（客户端）。请参阅loader.load的新第三个参数（filename，callback，meshname）。

是否有更好的解决方案，不需要修补的three.js库？

由于

// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
    var loader = new THREE.JSONLoader();
    var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
    loader.load(jsonFileNames[i], function(geometry, meshName){
        mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
        mesh.scale.set(0.2, 0.2, 0.2);
        mesh.doubleSided = true;
        scene.add(mesh);
        meshes[meshName] = mesh;
    }, meshName);
}

// ....

// Access their meshes
meshes[meshName].visible = true;

Answer 1

您可以创建一个如下所示的回调工厂。它可以解决the problem with closures when created inside loops.

function makeHandler(meshName) {
    return function(geometry) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
        mesh.scale.set(0.2, 0.2, 0.2);
        mesh.doubleSided = true;
        scene.add(mesh);
        meshes[meshName] = mesh;
    };
}

// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
    var loader = new THREE.JSONLoader();
    var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
    loader.load(jsonFileNames[i], makeHandler(meshName));
}

// ....

// Access their meshes
meshes[meshName].visible = true;

Answer 2

Tapio的一个很好的答案。此变体避免了创建和管理meshes对象的需要。它通过直接在创建的处理函数中创建具有所需对象名称的每个新网格对象来实现此目的。与之前一样，每个网格的所需名称meshName由用户定义并传递给处理程序。但是，然后使用javascript eval函数创建具有所需名称的新网格。

function makeHandler(meshName) {
    return function(geometry) {
        material = new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors})
        eval (meshName + "= new THREE.Mesh(geometry, material);" );  //***NEW ***
        eval ( "var mesh = " + meshName +";" ); //*** NEW ***
        mesh.scale.set(0.2, 0.2, 0.2);
        mesh.doubleSided = true;
        scene.add(mesh);
        //*** NOT REQUIRED *** meshes[meshName] = mesh;
    };
}

// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
    var loader = new THREE.JSONLoader();
    var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
    loader.load(jsonFileNames[i], makeHandler(meshName));
}

// ....

随后可以（在加载完成时）通过对象名称引用各种网格： -

// Access the meshes
    //*** OLD *** meshes["part1"].visible = true;
    //*** OLD *** meshes["part2"].visible = true;
    //*** OLD *** meshes["part3"].visible = true;
    part1.visible = true;//*** NEW ***
    part2.visible = true;//*** NEW ***
    part3.visible = true;//*** NEW ***

将加载的JSON文件与名称关联以供以后访问

2 个答案: