首頁  >  文章  >  web前端  >  實例講解Three.js載入外部模型

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

小云云
小云云原創
2017-12-22 11:26:116109瀏覽

本文主要介紹了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(&#39;youscene1.json&#39;,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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn