纹理加载在three.js与css sprites

Question

我正在使用

  

var texture1 = THREE.ImageUtils.loadTexture（“image1.jpg”）;   将此纹理映射到材质。

我的查询是我可以通过css加载纹理，因为我想通过css sprites加载图像。如果我通过html加载纹理，我需要为每个纹理提供背景位置，这是不可能的。 我需要使用background：url（）属性。

请让我知道如何做到

Answer 1

这里需要注意的是，整个Three.js场景都是在HTML Canvas上呈现的。这就是说你现在存在于纯粹基于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”分配给您的材质并调用适用的更新。希望至少能帮助你开始。