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

时间:2015-12-08 07:08:48

标签: javascript three.js

我正在尝试动态渲染图像纹理,但在控制台中它显示Uncaught TypeError:无法读取属性' width'未定义的。很少有人建议将needsUpdate = true设为false。当我这样做时,出现了一些令人不快的黑色补丁。但我需要它。我怎么能这样做? 实际代码非常大我指的是问题发生的地方..

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})
]);

1 个答案:

答案 0 :(得分:3)

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

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);