three.js - 克隆纹理和 onLoad答案

【问题标题】：three.js - cloning textures and onLoadthree.js - 克隆纹理和 onLoad
【发布时间】：2013-08-14 06:20:39
【问题描述】：

我的目标是创建一个具有单一纹理但每个边的重复值不同的立方体/盒子。工作代码如下：

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 的建议，但它并没有解决我的问题。

感谢您的帮助！

【问题讨论】：

标签： javascript three.js textures

【解决方案1】：

加载一次纹理，然后将其余代码移动到加载器回调函数中。克隆纹理时，您还必须将 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 );

} );

【讨论】：

感谢您的帮助！ :)

【解决方案2】：

你为什么不在你的函数之外创建你的纹理，然后在你的函数内部使用这个纹理，将它分配给每一侧的特殊变量？这样你肯定只会加载一次。

【讨论】：