前言

前端讀檔，單純透過前端讀取檔案的方法，檔案只要經過選擇檔案後，可以直接利用JavaScript內建的FileReader語法來讀取檔案內容，並且可以使用BinaryString的方式進行讀取，這樣可以不需要經過後端的伺服器就在前端讀取檔案用於後續的處理。

前端讀取三角網格STL檔案

在CAD的設計過程中經常會進行讀寫檔的動作，想要建立一個屬於自己的CAD設計軟體，如何在讀取檔案是必要學會的技能之一。
在撰寫程式之前，我們使用three-stl-loader這個讀檔套件，因此需要先透過npm進行安裝，此套件還需要依賴Three.js套件，如果是使用我提供的環境則已經有包含，如果不是的話記得要先安裝。
安裝語法如下:

npm i --save-dev three-stl-loader

接著是引入這些函式庫，並且設定好THREE的依賴，如下:

import * as THREE from 'three';
import three_stl_loader from 'three-stl-loader';
var STLLoader = three_stl_loader(THREE);

在APP建一個虛擬input標籤並設定type為file，當然妳也可以在HTML網頁值接撰寫一個input標籤。

var model = document.createElement("input");
model.setAttribute("type", "file");
model.onchange = function (e) {
    //Do Something
};
$("#app").appendChild(model);

接著利用e.target.files取得標籤內的檔案，順便做一個檔案是否有選取的保護，接著就可以使用FileReader來讀取檔案，在這個範例中我們是希望讀取STL檔案，因此使用readAsBinaryString讀取檔案，並且設定onloadend屬性監聽讀取完畢的訊息。

var file = e.target.files[0];
if (e.target.files.length == 1) {
    var reader = new FileReader();
    reader.onloadend = function (e) {
        //Load STL
    };
    reader.readAsBinaryString(file);
}

最後new一個STLLoader函數，使用裡頭的parse方法即可簡單的生成繪圖所需的geometry物件了，範例讀取結果如圖片所示。

var loader = new STLLoader();
var geometry = loader.parse(e.target.result);
console.log(geometry);

讀取STL檔案結果截圖

範例原始碼

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

範例模型檔案

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

後記

其實原本想要直接介紹顯示STL，但是思考了一下還是覺得讀檔必須優先說明一下，在後續說明才會順暢一些，順帶一提範例使用的$號函式並不是jQuery而是筆者自己刻的，裡頭並沒有jQuery的方法。