javascript - 为什么javascript无法读取textureImage的属性宽度

Question

我正在尝试动态渲染图像纹理，但在控制台中它显示未捕获的类型错误:无法读取未定义的属性“宽度”。很少有人建议将 needUpdate = true 改为 false。当我这样做时，会出现一些令人不快的黑色 Blob 。但我需要它是真的。我怎样才能这样做？实际代码非常大，我指出问题发生的地方..

var g = new THREE.PlaneGeometry(100,100);
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
var m = new THREE.MeshBasicMaterial({ 
 map:tx
});
m.map.needsUpdate = true;  //1
tx.needsUpdate = true;  //2
////if 1 and 2 is commented then its ok but rendering is not good
var b = THREE.SceneUtils.createMultiMaterialObject(g,[
  m
 ,new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]);

Answer 1

可能存在渲染器在加载纹理之前尝试使用纹理的情况。当你这样做时

var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError); 

纹理已返回，但图像本身尚未加载。因此，渲染器尝试获取宽度和高度来确定纹理幂是否为 2，并在此时抛出错误。

您可以尝试包装对象的创建并将其放入场景中的回调函数中，并将其作为第三个参数传递给 loadTexture 方法。类似这样的事情:

var geometry = new THREE.PlaneGeometry(100, 100);
var tx =THREE.ImageUtils.loadTexture(imgUrl, undefined, function(texture){
    var material = new THREE.MeshBasicMaterial({ 
        map: texture
    });
    var b = THREE.SceneUtils.createMultiMaterialObject(
        geometry,
        [
            material,
            new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
        ]
    );
}, callbackError);