使用css sprites在three.js中加载纹理答案

【问题标题】：Texture loading in three.js with css sprites使用css sprites在three.js中加载纹理
【发布时间】：2023-04-09 18:14:02
【问题描述】：

我正在使用

var texture1 = THREE.ImageUtils.loadTexture("image1.jpg"); 将此纹理映射到材质。

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

请告诉我怎么做

【问题讨论】：

标签： html css three.js

【解决方案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”分配给您的材质，并调用适用的更新。希望至少能让您入门。

【讨论】：