如何在 Threejs (r65) 中使用纹理图集？答案

【问题标题】：How to use texture atlas with Threejs (r65)?如何在 Threejs (r65) 中使用纹理图集？
【发布时间】：2014-01-26 18:31:40
【问题描述】：

自从新的threejs修订版（r65）发布以来，uvOffset和uvScale被移到了texture.offset和texture.repeate。

不幸的是，texture.offset 不适用于我想要完成的工作。我想在一个场景中显示多个使用相同纹理的精灵。纹理是具有不同瓷砖的纹理图集。如果我更改 texture.offset，则场景中所有精灵的纹理都会更改。是否有任何解决方案可以单独更改每个精灵的偏移量？

我猜 uvOffset 做得很好，我不明白为什么要移动它。

这里有一些代码可以查看我想要做什么：

var gui_texture = THREE.ImageUtils.loadTexture('images/button.png');

var btn_material1 = new THREE.SpriteMaterial( { map:gui_texture } );
btn_material1.map.offset.set(0.5,0);
var button = new THREE.Sprite(btn_material1);
button1.position.set(-screen_half_x+50, screen_half_y-25, 1);
button1.scale.set(100, 50, 1);
gui_node.add(button1);

var btn_material2 = new THREE.SpriteMaterial( { map:gui_texture } );
btn_material2.map.offset.set(-0.5,0);
var button2 = new THREE.Sprite(btn_material2);
button2.position.set(-screen_half_x+50, screen_half_y-150, 1);
button2.scale.set(100, 50, 1.0);
gui_node.add(button2);

此致，

马库斯

【问题讨论】：

有一个使用精灵表的three.js示例：http://threejs.org/examples/misc_ubiquity_test2.html。在源文件中搜索注释“SPRITES - 来自 Sprite Sheet”。

标签： javascript three.js

【解决方案1】：

我知道这不是最漂亮的......但试试这个：

var texture1 = new THREE.Texture();
texture1.offset.set( 0.5, 0 );

var texture2 = new THREE.Texture();
texture2.offset.set( - 0.5, 0 );

var loader = new THREE.ImageLoader();
loader.load( 'images/button.png', function ( image ) {

    texture1.image = image;
    texture1.needsUpdate = true;

    texture2.image = image;
    texture2.needsUpdate = true;

} );

var button1 = new THREE.Sprite( new THREE.SpriteMaterial( { map:texture1 } ) );
button1.position.set( - screen_half_x + 50, screen_half_y - 25, 1 );
button1.scale.set( 100, 50, 1 );
gui_node.add( button1 );

var button2 = new THREE.Sprite( new THREE.SpriteMaterial( { map:texture2 } ) );
button2.position.set( - screen_half_x + 50, screen_half_y - 150, 1 );
button2.scale.set( 100, 50, 1.0 );
gui_node.add( button2 );

【讨论】：