关于前端:使用SVG做模型贴图的思路

大多数状况下，三维模型应用 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);

最终成果如下图右边对象所示：

从下面咱们能够看出，间接应用 svg 作为贴图资源，成果是位图没太大区别，而 svg 的矢量图放大不失真的劣势也失去了。
其实还有另外一种形式，就是应用 canvas 绘制 svg，同时能够动静的调整绘制时候的缩放比例。因为 svg 在缩放的时候不会失真，因而能够失去较大尺寸而且又高清的图片。
代码如下所示：

let image = new Image();
            
            image.onload = function() {console.log(image.width,image.height)

                let can = document.createElement('canvas');
                let scale = 10;
                can.width = image.width * scale;
                can.height = image.height * scale;
                let ctx = can.getContext('2d');
                ctx.drawImage(image,0,0,can.width,can.height);

                var cube = new mono.Cube(can.width,can.height,1);
                cube.setStyle('m.color','orange');
                cube.setStyle('front.m.texture.image',can.toDataURL());
                box.add(cube);
            }

            image.src = 'front01.svg';

下面的先应用 image 对象加载 svg 图片，而后把 svg 图片绘制到 canvas 下面，留神绘制的时候放大的倍数是 10.（let scale = 10）。
最初失去的成果如下图左边对象所示：

能够看到达到了高清的成果。

能够依据镜头间隔动静扭转绘制的 scale 级别，达到 lod 的目标。
svg 图片自身还反对动静批改属性，比方灯的色彩等，能够达到监控状态的扭转的目标。

拓展思路，如果读者有趣味，能够点赞，后续接着写。

应用 svg 图片，能够不必做高清的位图，联合 canvas 绘制，也能够失去高清的纹理贴图成果。

如果对可视化感兴趣，能够和我交换，微信 541002349。关注公号“ITMan 彪叔”能够及时收到更多有价值的文章。

关于前端:使用SVG做模型贴图的思路

间接作为贴图

通过 canvas 动静生成贴图

拓展思路

总结