Three.js加載.stl格式模型

.stl格式模型加載

本文是Three.js電子書的14.2節

基本所有的三維軟件都支持導出.stl格式的三維模型文件，.stl格式的三維模型不包含材質Material信息，只包含幾何體頂點數據的信息，你可以簡單地把stl文件理解爲幾何體對象Geometry，本節課素材box.STL是一個立方體， 你可以用記事本或代碼編輯器打開文件box.STL查看stl的數據結構。

stl文件數據結構

.stl文件格式的數據結構，對於大多數普通開發者來說，如果僅僅爲了加載顯示一個三維模型，也沒必要掌握，這裏之所以要強調，不是爲了讓你記住，而是爲了從底層瞭解Threejs模型加載的原理，達到舉一反三的目的

三個位置座標和一個三角形面的法線方向向量是一組數據，這一組數據表示一個三角形面的信息，可以回憶下第二章關於三角形面Face3的講解。

表示一個三角形面信息的一組數據

//三角面1
   facet normal 0 0 -1    //三角形面法向量
      outer loop
         vertex 50 50 -50   //頂點位置
         vertex 50 -50 -50  //頂點位置
         vertex -50 50 -50  //頂點位置
      endloop
   endfacet

一個立方體有6個矩形平面，每個矩形平面至少需要兩個三角形拼接而成。那麼立方體6個矩形平面至少需要12個三角形面構成,你可以查看文件box.STL中的12個三角形信息。

solid box  //文件名字
//三角面1
   facet normal 0 0 -1    //三角形面法向量
      outer loop
         vertex 50 50 -50   //頂點位置
         vertex 50 -50 -50  //頂點位置
         vertex -50 50 -50  //頂點位置
      endloop
   endfacet
//三角面2
   facet normal 0 0 -1    //三角形面法向量
      outer loop
         vertex -50 50 -50   //頂點位置
         vertex 50 -50 -50   //頂點位置
         vertex -50 -50 -50  //頂點位置
      endloop
   endfacet
   facet normal 0 1 0
      .....
      .....
//三角面12
   facet normal -1 0 0
      outer loop
         vertex -50 -50 -50
         vertex -50 50 50
         vertex -50 50 -50
      endloop
   endfacet
endsolid

通過STLLoader.js加載.stl文件

如果你想通過Threejs加載.stl格式三維模型文件，可以使用Threejs提供的一個擴展庫stl加載器STLLoader.js，你可以在Three.js-master包中找到STLLoader.js文件,具體路徑是three.js-master\examples\js\loaders.

.html文件中引入Threejs的擴展庫STLLoader.js,引入該文件後，就可以在代碼中使用構造函數THREE.STLLoader()實例化一個加載器。

<!--引入STLLoader.js文件-->
<script src="STLLoader.js"></script>

通過構造函數THREE.STLLoader()可以把.stl文件中幾何體頂點信息提取出來轉化爲Three.js自身格式的幾何體對象BufferGeometry。如果你有興趣可以閱讀STLLoader.js源碼，尤其是你想獨立開發自己公司特定格式加載器的情況下，更有必要參照學習。

// THREE.STLLoader創建一個加載器
var loader = new THREE.STLLoader();
loader.load('立方體.stl',function (geometry) {
  // 加載完成後會返回一個幾何體對象BufferGeometry，你可以通過Mesh、Points等方式渲染該幾何體
})

/**
 * stl數據加載
 */
var loader = new THREE.STLLoader();
// 立方體默認尺寸長寬高各200
loader.load('立方體.stl',function (geometry) {
  // 控制檯查看加載放回的threejs對象結構
  console.log(geometry);
  // 查看頂點數，一個立方體6個矩形面，每個矩形面至少2個三角面，每個三角面3個頂點，
  // 如果沒有索引index複用頂點，就是說一個立方體至少36個頂點
  console.log(geometry.attributes.position.count);
  // 縮放幾何體
  // geometry.scale(0.5,0.5,0.5);
  // 幾何體居中
  // geometry.center();
  // 平移立方體
  // geometry.translate(-50,-50,-50);
  var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff,
  }); //材質對象Material
  var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
  scene.add(mesh); //網格模型添加到場景中
})

使用點模型渲染STL文件

你可以使用下面代碼代替上面代碼，查看Three.js如果通過點模型Points渲染stl文件中的頂點數據。

/**
 * 點渲染模式
 */
 loader.load('離心葉輪.stl',function (geometry) {
   var material = new THREE.PointsMaterial({
     color: 0x000000,
     size: 0.5//點對象像素尺寸
   }); //材質對象
   var points = new THREE.Points(geometry, material); //點模型對象
   scene.add(points); //點對象添加到場景中
 })