紋理加載在three.js所利用CSS子圖形

Question

我使用

變種texture1 = THREE.ImageUtils.loadTexture（ 「image1.jpg」）; 將此紋理映射到材質。

我的查詢是我可以通過css加載紋理，因爲我想通過css sprites加載圖像。如果我通過html加載紋理，我需要爲每個紋理提供背景位置。 我需要使用background：url（）屬性。

請讓我知道如何可以做到

Answer 1

這裏要注意的一點是，你的整個場景three.js所正在呈現的HTML畫布。這就是說你現在存在於純粹的基於GDI的環境中。我現在唯一可以看到的解決方案是重新映射您的素材紋理，調用指向新的「2D」畫布上下文的更新。事情是這樣的：

var spriteCanvas = document.createElement("canvas"); 
var spriteContext = spriteCanvas.getContext("2d"); 
var spriteImage = document.getElementById("hidden_spriteDiv_with_background_url"); 
spriteContext.drawImage(spriteImage, 0, 0); 

var texture1 = new THREE.Texture(spriteContext); 
texture1.needsUpdate = true; 

然後把新的紋理貼圖「texture1」分配給一個名爲適用的更新您的材料。希望至少讓你開始。