大多数情况下，三维模型使用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。

今天提供一种新的思路，使用SVG作为模型的贴图，可以达到动态调整图片精度的效果。

使用svg作为贴图的思路，有两种。

直接作为贴图

直接使用贴图，其实和png jpeg的图片没有多少差别，加载的贴图效果，最终也会比 较模糊。 大致代码如下：

var cube2 = new mono.Cube(105 * 10,1094 * 10,1); cube2.setStyle('m.color','orange'); cube2.setStyle('front.m.texture.image','front01.svg'); cube2.p(-1000,0,0) box.add(cube2); ¨G0G let image = new Image(); ¨K5K

上面的先使用image对象加载svg图片，然后把svg图片绘制到canvas上面，注意绘制的时候放大的倍数是10.  （let scale = 10）。

最后得到的效果如下图右边对象所示：

6271001-3433663ea1744871.png

可以看到达到了高清的效果。

拓展思路

1. 可以根据镜头距离动态改变绘制的scale级别，达到lod的目的。
   
2. svg 图片本身还支持动态修改属性，比如灯的颜色等，可以达到监控状态的改变的目的。

拓展思路，如果读者有兴趣，可以点赞，后续接着写。

总结

使用svg 图片，可以不用做高清的位图，结合canvas绘制，也可以得到高清的纹理贴图效果。