實例講解Three.js載入外部模型-js教程-PHP中文網

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

小云云

發布： 2017-12-22 11:26:11

原創

5999 人瀏覽過

本文主要介紹了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模型的導入

登入後複製

#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需要匯入

登入後複製

##############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中文網其他相關文章！