如何與Threejs（r65）一起使用紋理地圖集？

自從新的threejs修訂版（r65）發佈後，uvOffset和uvScale將移至texture.offset和texture.repeate。如何與Threejs（r65）一起使用紋理地圖集？

不幸的是，我想要完成的紋理。偏移不適合我。我想在場景中顯示所有使用相同紋理的多個精靈。紋理是具有不同瓷磚的紋理地圖集。如果我更改了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);

真誠，

馬庫斯

來源

2014-01-26 Markus

有一個使用精靈表的three.js示例：http：// threejs.org/examples/misc_ubiquity_test2.html。在源文件中搜索註釋「SPRITES - 來自Sprite表」。 – WestLangley

我認識到，是不是最漂亮的...但這個嘗試：

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);

來源

2014-01-26 10:31:02 mrdoob

如何與Threejs（r65）一起使用紋理地圖集？

回答

相關問題