實例講解Three.js載入外部模型

本文主要介紹了Three.js外部模型加載的教程詳解,在文章給大家補充介紹了three.js 外部模型加載json的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能幫助大家。

1.  首先我們要在官網: https://threejs.org/ 下載我們three.js壓縮包,並將其中的build資料夾下的three.js透過script標籤對的src屬性導入到我們的頁面中

2.  創建three.js核心物件

　　Scene（場景）

　　Camera（相機）

　　Light（光源）

　　Mesh（模型）

　　Renderer（渲染器）

　　最後一步就是渲染顯示在我們的頁面上了renderer.render(scene,camera)

# #3.  OBJ模型的導入

<script type="text/javascript" src="js/OBJLoader.js"></script>
 <script type="text/javascript" src="js/MTLLoader.js"></script>

#4.  .JS模型的導入

首先我們需要將. OBJ模型的檔案轉換成.JS檔案的模型

.obj格式轉.js格式使用的是threejs.org官方提供的一個convert_obj_three.py的工具，這個工具的使用需要安裝python環境

轉換過程：

    將convert_obj_three.py和要轉換的.obj檔案和.mtl檔案放在同一個目錄下

#打開cmd，切換到對應的目錄下

python convert_obj_three.py -i infile.obj -o outfile.js [-t ascii|binary]

    可以得到兩種編碼方式的.js檔案（二進位binary和ascii）

#出現的問題,轉換格式的問題:

   開啟.obj檔,

#將mtllib關鍵字後面改成.mtl檔相對於.obj檔的路徑

將檔案中的這些?改成字母,亂碼

#.mtl檔案中的newmtl 關聯到.obj文件中

這是.obj檔案中的

#5.  準備導入

Ascii

Binary需要匯入

<script src="js/BinaryLoader.js"></script>

##############PS：three.js外部模型載入json############用blender做模型可以直接匯出json檔（匯出外掛可以從three.js包裡找到）。從網路下載模型，網路上的模型很多事3ds max做的，我就用3ds max把模型格式轉換成obj，再導入blender處理好模型後導出json檔。 ######匯出json檔案時選項勾選如果選擇了SCENE可連燈光一同匯出載入時需要用ObjectLoader############

var loader = new THREE.ObjectLoader(); 
loader.load('youscene1.json',function(obj){ 
  obj.scale.x = obj.scale.y = obj.scale.z =100; 
  scene.add(obj); 
});

###匯出json檔案時如果不勾選scene，需要頁面中加入燈光否則模型全黑，載入時用JSONLoader#############

var loader = new THREE.JSONLoader(); 
      loader.load( "noscene.json",function( geometry, materials ) { 
        materials[ 0 ].shading = THREE.FlatShading; 
        mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) ); 
        mesh.position.x = 0; 
        mesh.position.y = 0; 
        mesh.position.z = 0; 
        mesh.scale.x = mesh.scale.y = mesh.scale.z =100; 
        scene.add( mesh ); 
      });

###大家學會了嗎？趕快動手嘗試。 #########相關推薦：#########詳解three.js本地運行的方法############Three.js利用效能外掛程式stats實現效能監聽實例詳解############Three.js之如何建立一個場景#######

以上是實例講解Three.js載入外部模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！