three.js canvas做为纹理贴图需要注意的点
概述
在使用three.js开发的过程中,我们常常使用canvas来作为纹理贴图。但最后的效果总会被压缩或者模糊,这是由于什么原因造成的呢,这篇文章我们就来实际测试一下
代码
- 首先我们先创建一个canvas,宽高为1024,512
let canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 512;
let c = canvas.getContext('2d');
c.fillStyle = "#ffffff";
c.fillRect(0, 0, 1024, 256);
c.beginPath();
c.beginPath();
c.translate(50, 64);
c.font = "bold 48px 宋体";
c.textBaseline = "middle";
c.fillStyle = "#ff0000";
c.fillText("我是精灵贴图", 0, 0);
- 创建精灵,然后将生成的canvas作为贴图
let texture = new THREE.CanvasTexture(canvas);
let spriteMaterial = new THREE.SpriteMaterial({
map: texture,
transparent: true
});
let sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(96, 48, 1);
scene.add(sprite);
来看下我们最后的效果
此时我们可以看到canvas是很清晰的,效果很棒。
3. 现在我们来改变一下canvas的大小,分别将宽高改为512, 512再来看下效果
此时我们看到文字明显的被压缩了,这是怎么回事,接下来我们对应的把精灵的大小设置(48, 48, 1)来看看效果
此时我们看到精灵贴图又可以变得很清晰了。
最后我们总结出一条规律:
canvas画布颜色贴图,注意xy两个方向缩放比例和canvas宽高比例一致,以免压缩或拉伸
在以后我们设置canvas的宽高比时要与我们的精灵模型的宽高比保持一致,这样我们就可以避免canvas被压缩,但我们也不能把canvas设置得太小,如果canvas的宽高小于模型的宽高,那就会被放大,也会产生模糊!