我的目标是创建一个立方体/盒子,它具有单一纹理,但每个面都有不同的重复值。工作代码如下:
var cubeMaker = function(w,h,d, tName)
{
var g = new THREE.CubeGeometry( 50*w, 50*h, 50*d );
var tx = THREE.ImageUtils.loadTexture( tName );
var ty = THREE.ImageUtils.loadTexture( tName );
var tz = THREE.ImageUtils.loadTexture( tName );
tx.wrapS = tx.wrapT = THREE.RepeatWrapping;
ty.wrapS = ty.wrapT = THREE.RepeatWrapping;
tz.wrapS = tz.wrapT = THREE.RepeatWrapping;
tx.repeat.set(d,h);
ty.repeat.set(w,d);
tz.repeat.set(w,h);
var mx = new THREE.MeshBasicMaterial( {map: tx} );
var my = new THREE.MeshBasicMaterial( {map: ty} );
var mz = new THREE.MeshBasicMaterial( {map: tz} );
var mArray = [mx,mx,my,my,mz,mz];
var m6 = new THREE.MeshFaceMaterial( mArray );
var cube = new THREE.Mesh(g, m6);
return cube;
}
不过,加载纹理3次好像有点浪费。早些时候,我尝试将纹理作为参数传递给函数(而不是表示文件名的字符串),如下所示:
var cubeMaker = function(w,h,d, texture)
{
...
var tx = texture.clone();
var ty = texture.clone();
var tz = texture.clone();
...
但后来纹理没有出现在场景中,只有纯黑色图像出现在它们的位置。我最好的猜测是在调用克隆方法之前纹理图像尚未完成加载,并且可能复制了某种空值。有没有什么方法可以使用 onLoad 方法等待足够长的时间,以便克隆函数按预期工作?
注意:我试过Can't clone() Texture的建议但这并没有解决我的问题。
感谢您的帮助!
最佳答案
加载一次纹理,然后将其余代码移至加载器回调函数中。克隆纹理时,您还必须将 needsUpdate
标志设置为 true
。
var tx = THREE.ImageUtils.loadTexture( tName, undefined, function() {
var ty = tx.clone();
ty.needsUpdate = true; // important!
var tz = tx.clone();
tz.needsUpdate = true; // important!
tx.wrapS = tx.wrapT = THREE.RepeatWrapping;
ty.wrapS = ty.wrapT = THREE.RepeatWrapping;
tz.wrapS = tz.wrapT = THREE.RepeatWrapping;
tx.repeat.set( 1, 1 );
ty.repeat.set( 2, 1 );
tz.repeat.set( 2, 2 );
var mx = new THREE.MeshBasicMaterial( { map: tx } );
var my = new THREE.MeshBasicMaterial( { map: ty } );
var mz = new THREE.MeshBasicMaterial( { map: tz } );
var mArray = [ mx, mx, my, my, mz, mz ];
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( mArray ) );
scene.add( mesh );
} );
关于javascript - three.js - 克隆纹理和 onLoad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18218733/