【帶着canvas去流浪（14）】Three.js中凹浮雕模型的生成方式

目錄

• 一. 方案1：ThreeBSP.js或ThreeCSG.js擴展庫
• 二. 方案2：平面鏤空模型拉伸
• 三. 方案3：Cinema 4D建模後輸出模型文件

示例代碼託管在：http://www.github.com/dashnowords/blogs

博客園地址：《大史住在大前端》原創博文目錄

華爲雲社區地址：【你要的前端打怪升級指南】

浮雕模型，簡單地說就是在木板上刻字時所造成的效果，若是把字的部分都剔除掉，就獲得一個凹浮雕模型，若是把字之外的部分都剔除掉，就獲得一個凸浮雕模型。本文分別對利用Three.js在Web環境中生成凹浮雕模型時的幾種策略進行講解。

一. 方案1：ThreeBSP.js或ThreeCSG.js擴展庫

在衆多技術博客裏，說起最多的就是上述兩個庫，它們聲稱是Three.js的擴展庫，用來對模型進行實體布爾操做。

But！不要用！不要用！不要用！

查看github的倉庫就能夠發現，這兩個庫早在N年前已經中止維護，徹底是沒有保障的。而筆者親測後發現除了官方提供的示例外，它們連最基本的立方體挖孔都沒法作到，按照官方示例的寫法最終只獲得了下面的模型，而筆者本來的指望是在大立方體上挖出一個小立方體凹槽，字體模型就更不用提了。

二. 方案2：平面鏤空模型拉伸

因爲指望實現的凹浮雕模型並不算複雜，能夠換一種實現思路，先在平面上生成一個矩形，而後從其中去掉字體的形狀，最後再將剩餘的部分拉伸成幾何體，固然若是指望的浮雕模型並無徹底穿過毛坯模型時，還須要使用一個額外的立方體來補全剩餘的部分。

字體文件的加載是異步的，當完成加載後，就能夠得到字體對象，將它傳入下面的函數來生成一個大小爲40的M字符，它本質上是一個shape實例，將其做爲參數就能夠生成拉伸體模型：

全部的shape實例都有holes屬性，顧名思義它就是用來在封閉的平面圖形上進行挖孔操做的，正好符合凹浮雕模型的製做需求，咱們只須要生成一個尺寸略大於字體模型包圍盒的矩形，而後將字體模型的數據填入包圍盒shape實例的holes數組中，Three.js就能夠自動將其識別爲孔：

關鍵代碼以下所示（完整示例可在附件或文章開頭的github倉庫中獲取）：

/*在平面上生成鏤空字體*/
    function calcShape(font) {
        fontShape = font.generateShapes('M',40);
        boxShape = new THREE.Shape();
        boxShape.moveTo(-20,-20);
        boxShape.lineTo(50,-20);
        boxShape.lineTo(50,50);
        boxShape.lineTo(-20,50);
        boxShape.lineTo(-20,-20);
        boxShape.holes.push(fontShape[0]);
        return boxShape;
}
/*生成拉伸體*/
 textGeometry = new THREE.ExtrudeGeometry(calcShape(font), {
                    depth:10,
                    bevelEnabled: false,
                    curveSegments: 4
                });

對於更爲複雜的模型，這種方式仍然顯得不夠直觀。

三. 方案3：Cinema 4D建模後輸出模型文件

Three.js這種基於編程的建模方式並不夠直觀，面對複雜模型時，通用的解決辦法是使用三維建模軟件進行模型構建，而後導出Three.js可以識別的模型文件，使用加載器載入後再對模型進行微調，Three.js爲數十種通用的三維模型文件都提供了加載器，本節以C4D爲例演示基本的實現過程，若是你它的基本使用方法還不清楚，能夠在【慕課網】上找到免費的使用教程。

C4D的主界面以下所示，建模的主要工具主要在圖中紅框標記的部分：

在圖標上長按左鍵就能夠看到每一個大類詳細的功能：

本例中剛好每一個大類均用到一個功能（上圖中紅框標記的功能），立方體功能生成立體包圍盒毛坯模型，文本功能生成須要雕刻的文字，使用擠壓功能生成一個拉伸體對象後，在界面右側的對象管理面板中將「文本模型」拖放到擠壓文字上，就能夠獲得一個基於文本形狀的拉伸體，最後生成一個實體布爾模型，在對象管理面板中將立方體和擠壓體依次拖放到對象名布爾這兩個字上，它們就會成爲布爾運算的成員，在布爾模型的配置中將操做類型選擇爲A減B，就能夠獲得凹浮雕模型了。建模的通用思路就像是函數式編程，先指定操做，再傳入數據。

Three.js官方建議的模型格式爲*.gltf格式，想要在C4D中直接導出這種格式須要安裝相應的插件（GLTF格式工具倉庫）。本例中咱們採用另外一種方式來實現，先在「文件」菜單中選擇「導出」獲得模型文件，本例中以*.obj擴展名爲例。若是添加了表面材質，生成obj數據的同時還會帶有一個同名的mtl文件（Material Template Library），它攜帶着obj幾何體表面的材質信息，接下來使用命令行工具obj2gltf（npm上能夠直接搜出來）對導出的文件進行格式轉換，最後只須要將生成的marvel.gltf文件利用Three.js提供的GLTFLoader加載器導入到網頁中便可，相關代碼以下：

// instantiate a loader
    var loader = new THREE.GLTFLoader();

    // load a resource
    loader.load(
        // resource URL
        'assets/marvel.gltf',
        // called when resource is loaded
        function (event) {
            console.log(event);
            event.scene.scale.set(0.2,0.2,0.2);
            scene.add(event.scene);
            render();
        },
        // called when loading is in progresses
        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        // called when loading has errors
        function (error) {
            console.log('An error happened');
        }
    );

能夠看到網頁中加載的模型既包含了凹浮雕模型，也包含了咱們在建模軟件中添加的藍色材質（途中的亮藍色區域是點光源照射的效果）。

本節的示例Demo可在文章開頭的github倉庫中獲取到，若是以爲對你有用，能夠在倉庫幫我點個星星~