如何在Threejs(r65)中使用纹理图集? [英] How to use texture atlas with Threejs (r65)?
问题描述
自从新的threejs修订版(r65)发布以来,uvOffset和uvScale移到了texture.offset和texture.repeate.
Since the new threejs revision (r65) is released, the uvOffset and uvScale is moved to texture.offset and texture.repeate.
不幸的是,texture.offset对我不起作用.我想在一个都使用相同纹理的场景中显示多个精灵.纹理是具有不同图块的纹理图集.如果更改texture.offset,则场景中所有精灵的纹理都会更改.有什么解决方案可以只为每个子画面单独更改偏移量吗?
Unfortunately, the texture.offset is not working for me what I am trying to accomplish. I want to display multiple sprites in a scene that all use the same texture. The texture is a texture atlas with different tiles. If I change the texture.offset, the texture is changed for all sprites within the scene. Is there any solution to just change the offset individually for each sprite?
我想uvOffset可以很好地完成这项工作,而且我不明白为什么要移动它.
I guess uvOffset did this job very well and I don't understand why it is moved.
下面是一些代码,可以查看我要执行的操作:
Here is some code to see what I am trying to do:
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);
此致
马库斯
推荐答案
我意识到这不是最漂亮的……但是尝试一下:
I realise that is not the prettiest... but try with this:
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 );
这篇关于如何在Threejs(r65)中使用纹理图集?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!