Question

我有一个.obj文件，我使用加载程序加载。在目标文件中，我有一堆我想单独使用的网格，有点像包含所有内容的文件。但是，每个＆＃34;对象＆＃34;有一个单独的纹理。当我尝试加载它时，它会尝试加载两次相同的纹理。我觉得这更像是一个JavaScript而不是three.js。非常感谢任何帮助！

这是我目前的代码：

    for (var i = 0; i < object.children.length; i++)
    {
        var child = object.children[i]
        child.scale.set(15, 15, 15)
        child.position.y += 0.01
        console.log('Loading texture for: ' + child.name)
        textureLoader.load('assets/' + child.name + '.png', function(image)
        {
            console.log('Looking for: ' + child.name)
            var texture = new THREE.Texture()
            texture.image = image
            texture.needsUpdate = true
            child.material.map = texture
            console.log('Loaded texture for ' + child.name)
        })
    }
    scene.add(object)

最终发生的事情是列表中的第一个对象最终加载。我已经验证for循环运行4次，每个孩子都不同。但是，当在textureLoader.load的回调中登录到控制台时，该名称将显示为第一个元素两次

Answer 1

我认为你不能这样写：console.log（＆＃39;寻找：＆＃39; + child.name）因为child是在函数（图像）之外定义的，并且它的值可能会在调用console.log时发生变化。请参阅：scope of variables in JavaScript callback functions

因此，上面解释了为什么你重复打印同名的原因。但它并没有解释为什么你只有两个打印输出。你应该得到4个打印输出。

如果只获得两个console.log（）输出，那么这意味着只成功加载了两个.png文件。因此，请确保所有4个文件都存在，或者查看是否实际有2个纹理文件在4个形状中共享。

如果问题仍然存在，请告诉我们您获得的确切打印件。

更新1：试试这个并告诉我你得到了什么输出？

console.log('Loading texture for: ' + object.children[0].name);
textureLoader.load('assets/' + object.children[0].name + '.png', function(image) {
        console.log('Loaded texture for ' + object.children[0].name);
});
console.log('Loading texture for: ' + object.children[1].name);
textureLoader.load('assets/' + object.children[1].name + '.png', function(image) {
        console.log('Loaded texture for ' + object.children[1].name);
});
console.log('Loading texture for: ' + object.children[2].name);
textureLoader.load('assets/' + object.children[2].name + '.png', function(image) {
        console.log('Loaded texture for ' + object.children[2].name);
});
console.log('Loading texture for: ' + object.children[3].name);
textureLoader.load('assets/' + object.children[3].name + '.png', function(image) {
        console.log('Loaded texture for ' + object.children[3].name);
});

Three.js基于名称加载纹理失败

1 个答案: