[英]How to use texture atlas with Threejs (r65)?
由於新的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);
此致
馬庫斯
我意識到這不是最漂亮的……但是嘗試一下:
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 );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.