前言

匯入網格模型，在CAD領域中這件事情是非常重要的，除了完全原創性的設計以外，經常會看到所謂的二次創作，或者是由原創者再稍微編修後的新型創作，因此如何將過去的的模型再度匯入設計軟體，是一個必要存在的功能。

前端渲染網格模型

延續上回我們已經學會如何在前端讀入一個STL檔案，並且將檔案透過 three-stl-loader 套件轉換為 geometry 物件，而這一次我們將要把 geometry 結合先前學到的渲染網格的方法，繪製一整個網格模型出來。

首先打開上回example 3的程式繼續修改，在最下面先建立一個div標籤供Three.js創建canvas使用，在這裡我們定義一個虛擬div標籤並將id設定為view，然後加入到app標籤。

var view = document.createElement("div");
view.setAttribute("id", "view");
$("#app").appendChild(view);

接著我們使用example1的程式，將內容包到一個view的函式內，然後刪掉先前用來建立單片網格的部分程式碼，並在view函式加入一個引數geometry。

var draw = function (geometry) {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("app").appendChild(renderer.domElement);

    var material = new THREE.MeshPhongMaterial({
        //side: THREE.DoubleSide,
        color: 0xff0000
    });

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var wireframe = new THREE.WireframeGeometry(geometry);
    var line = new THREE.LineSegments(wireframe);
    line.material.color = new THREE.Color(0xffffff);
    scene.add(line);

    var light = new THREE.PointLight(0xffffff, 1.0);
    light.position.set(0, 1, 1);
    scene.add(light);

    camera.position.z = 5;

    var animate = function () {
        requestAnimationFrame(animate);
        mesh.rotation.y += 0.03;
        line.rotation.y += 0.03;
        renderer.render(scene, camera);
    };

    animate();
};

然後我們把原本讀檔部分的console.log刪掉，改成去呼叫draw函式，並且將讀取完的geometry提供給draw函式。

var model = document.createElement("input");
model.setAttribute("type", "file");
model.onchange = function (e) {
    var file = e.target.files[0];
    if (e.target.files.length == 1) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var loader = new STLLoader();
            var geometry = loader.parse(e.target.result);
            draw(geometry);
        };
        reader.readAsBinaryString(file);
    }
};
$("#app").appendChild(model);

到這裡我們已經能夠讀取STL網格模型了，但是如果讀取上回的 monkey.stl 模型，會發現相機怎麼跑到模型裡頭了，如下圖：

相機在 monkey.stl 模型內部的情況

這時候我們只要調整一下相機與光源位置，就可以正常顯示了，結果如圖。

var light = new THREE.PointLight(0xffffff, 1.0);
light.position.set(0, 50, 50);
scene.add(light);

camera.position.z = 50;

相機在 monkey.stl 模型外部的情況

範例原始碼

https://github.com/QQBoxy/threecad/blob/master/client/example4/index.js

範例模型檔案

本文使用的檔案為 monkey.stl 可以在這裡找到:
https://github.com/QQBoxy/threecad/tree/master/models

後記

本次我們學會了如何讀取一個三角模型檔案並利用Three.js顯示在畫布上，這對於Web-based的CAD軟體來說是一個非常基本的功能，到目前為止每一個蹲馬步的動作都是必要的技能，希望對大家來說都還不算是很困難，繼續加油吧!