Html 使用css精灵在three.js中加载纹理
我正在使用 var texture1=THREE.ImageUtils.loadTexture(“image1.jpg”); 将此纹理映射到材质 我的问题是,我可以通过css加载纹理,因为我想通过css精灵加载图像。我需要给每个纹理的背景位置,这是不可能的,如果我通过html加载纹理。 我需要使用background:url()属性Html 使用css精灵在three.js中加载纹理,html,css,three.js,Html,Css,Three.js,我正在使用 var texture1=THREE.ImageUtils.loadTexture(“image1.jpg”); 将此纹理映射到材质 我的问题是,我可以通过css加载纹理,因为我想通过css精灵加载图像。我需要给每个纹理的背景位置,这是不可能的,如果我通过html加载纹理。 我需要使用background:url()属性 请让我知道如何做到这一点这里要注意的是,您的整个Three.js场景正在HTML画布上渲染。也就是说,您现在生活在一个纯粹基于GDI的环境中。我现在能看到的唯一解决
请让我知道如何做到这一点这里要注意的是,您的整个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”指定给材质,并调用相应的更新。希望这至少能让你开始