webgl的透明spritesheet動畫

我剛剛開始使用webgl，並試圖製作基於spritesheet的動畫。我找到了一個例子，並將Spritesheet更改爲我自己的。不過，即使我刪除了白色背景，將其保存爲透明PNG，但動畫仍顯示爲白色背景。webgl的透明spritesheet動畫

這是我使用的示例： http://stemkoski.github.io/Three.js/Texture-Animation.html

有沒有什麼辦法，我怎麼能擺脫掉白色背景？在此先感謝。

編輯：用α-通道

var runnerTexture = new THREE.ImageUtils.loadTexture('images/run.png'); 
annie = new TextureAnimator(runnerTexture, 10, 1, 10, 75); // texture, #horiz, #vert, #total, duration. 
var runnerMaterial = new THREE.MeshBasicMaterial({ map: runnerTexture, side:THREE.DoubleSide }); 
var runnerGeometry = new THREE.PlaneGeometry(50, 50, 1, 1); 
var runner = new THREE.Mesh(runnerGeometry, runnerMaterial); 
runner.position.set(-150,25,0); 
scene.add(runner);

來源

2014-06-27 JustaN00b

請顯示您的代碼。 – Constantin

它與示例頁面上的代碼完全相同。我只改變了spritesheet。 – JustaN00b

請在您的問題本身中包含代碼。並非每個人都可以訪問外部網站，並且這些鏈接可能隨時間而中斷。另請參見[我如何提出一個好問題？]（http://stackoverflow.com/help/how-to-ask） – Constantin

爲了支持PNG圖像，必須相應地修改MeshBasicMaterial：有一個屬性「透明」您可以設置爲「真」。

嘗試使用以下行代替：

var runnerMaterial = new THREE.MeshBasicMaterial({ map: runnerTexture, side:THREE.DoubleSide, transparent: true });

還參考見從Material：

.transparent

定義此材料是透明的。這對呈現有影響，因爲透明對象需要特殊處理，並且在非透明對象之後呈現。有關此行爲的實際示例，請檢查WebGLRenderer代碼。設置爲true時，材料透明的範圍通過設置不透明度來控制。

來源

2014-06-27 13:28:30 Constantin

webgl的透明spritesheet動畫

回答

相關問題