javascript - 在 Three.js 中为加载器创建可重用的函数

Question

我正在尝试找到一种方法来创建可重用的函数，以防止我一遍又一遍地重复相同的加载器代码。下面是一个示例:

one = new THREE.Group();

var loader1 = new THREE.TextureLoader();
loader1.crossOrigin = '';
loader1.load('',
    function (texture) {
        this.geo = new THREE.BoxGeometry(10,10,10);
        this.mat = new THREE.MeshBasicMaterial({color:'white'});
        this.mesh = new THREE.Mesh(this.geo, this.mat);
        one.add(mesh)
    }
);


twp = new THREE.Group();

var loader2 = new THREE.TextureLoader();
loader2.crossOrigin = '';
loader2.load('',
    function (texture) {
        this.geo = new THREE.BoxGeometry(10,10,10);
        this.mat = new THREE.MeshBasicMaterial({color:'white'});
        this.mesh = new THREE.Mesh(this.geo, this.mat);
        two.add(mesh)
    }
);

我的尝试如下:

example = new THREE.Group();

function reuse(obj) {   
    this.loader = new THREE.TextureLoader();
    this.loader.crossOrigin = '';
    this.loader.load('',
        function (texture) {
            this.geo = new THREE.BoxGeometry(10,10,10);
            this.mat = new THREE.MeshBasicMaterial({color:'white'});
            this.mesh = new THREE.Mesh(this.geo, this.mat);
            obj.name.add(mesh)
        }
    )
};
var test = new reuse({name: 'example'});

我还尝试将网格插入函数内的数组中:

arr.push(网格);

arr.mesh[0].position.x等等

我也尝试过返回。

避免这种灾难的最佳和有效方法到底是什么？

Answer 1

处理重复代码时，最常见和最简单的方法是创建一个简单的函数

您的代码示例:

function getTexturedCube(path){
    var geometry = new THREE.BoxGeometry(10,10,10);
    var loader = new THREE.TextureLoader();
    //you dont have to put onLoad function in, 
    //the texture returned will automatically update when it is loaded
    var texture = loader.load(path);
    var material = new THREE.MeshBasicMaterial({map:texture});
    return new THREE.Mesh(geometry, material)
}

var group = new THREE.Group();
var cube1 = getTexturedCube("/path/to/image");
var cube2 = getTexturedCube("/path/to/other/image");
group.add(cube1);
group.add(cube2);

var anotherGroup = new THREE.Group();
var cube3 = getTexturedCube("/path/to/yet/another/image")
anotherGroup.add(cube3);

您还可以向函数传递对您的组的引用，并使其将对象插入其中

function addTexturedCube(path, object){
    var geometry = new THREE.BoxGeometry(10,10,10);
    var loader = new THREE.TextureLoader();
    var texture = loader.load(path);
    var material = new THREE.MeshBasicMaterial({map:texture});
    object.add(new THREE.Mesh(geometry, material));
}

var group = new THREE.Group();
addTexturedCube("/path/to/image", group);
addTexturedCube("/path/to/other/image", group);