大多數(shù)情況下，三維模型使用PNG，JPG作為模型的貼圖，當(dāng)然為了性能優(yōu)化，有時(shí)候也會(huì)使用壓縮貼圖來(lái)提高渲染效率和較少GPU壓力。

今天提供一種新的思路，使用SVG作為模型的貼圖，可以達(dá)到動(dòng)態(tài)調(diào)整圖片精度的效果。

使用svg作為貼圖的思路，有兩種。

直接作為貼圖

直接使用貼圖，其實(shí)和png jpeg的圖片沒(méi)有多少差別，加載的貼圖效果，最終也會(huì)比 較模糊。 大致代碼如下：

           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);

最終效果如下圖左邊對(duì)象所示：

image.png

通過(guò)canvas 動(dòng)態(tài)生成貼圖

從上面我們可以看出，直接使用svg作為貼圖資源，效果是位圖沒(méi)太大區(qū)別，而svg的矢量圖放大不失真的優(yōu)勢(shì)也失去了。
其實(shí)還有另外一種方式，就是使用canvas繪制svg，同時(shí)可以動(dòng)態(tài)的調(diào)整繪制時(shí)候的縮放比例。 由于svg在縮放的時(shí)候不會(huì)失真，因此可以得到較大尺寸而且又高清的圖片。
代碼如下所示：

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對(duì)象加載svg圖片，然后把svg圖片繪制到canvas上面，注意繪制的時(shí)候放大的倍數(shù)是10. （let scale = 10）。
最后得到的效果如下圖右邊對(duì)象所示：

image.png

可以看到達(dá)到了高清的效果。

拓展思路

1. 可以根據(jù)鏡頭距離動(dòng)態(tài)改變繪制的scale級(jí)別，達(dá)到lod的目的。
2. svg 圖片本身還支持動(dòng)態(tài)修改屬性，比如燈的顏色等，可以達(dá)到監(jiān)控狀態(tài)的改變的目的。

拓展思路，如果讀者有興趣，可以點(diǎn)贊，后續(xù)接著寫。

總結(jié)

使用svg 圖片，可以不用做高清的位圖，結(jié)合canvas繪制，也可以得到高清的紋理貼圖效果。

如果對(duì)可視化感興趣，可以和我交流，微信541002349。 關(guān)注公號(hào)“ITMan彪叔” 可以及時(shí)收到更多有價(jià)值的文章。