three.js canvas做为纹理贴图需要注意的点

canvas做为纹理贴图需要注意的点

• 概述
• 代码

概述

在使用three.js开发的过程中，我们常常使用canvas来作为纹理贴图。但最后的效果总会被压缩或者模糊，这是由于什么原因造成的呢，这篇文章我们就来实际测试一下

代码

1. 首先我们先创建一个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);

2. 创建精灵，然后将生成的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的宽高小于模型的宽高，那就会被放大，也会产生模糊！