Three.js數據結構、導入導出

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

通過Three.js模型數據導入導出過程的學習，可以讓你對Threejs解析加載外部模型的過程更為了解。

Threejs導出模型信息

你可以通過下面代碼導出模型的各類信息，然后在瀏覽器控制臺打印出來模型數據，然后復制瀏覽器控制臺模型數據粘貼到json文件中，最后可以嘗試加載解析這些Threejs導出的json文件。之所以這么做，是為了讓你理解其它三維軟件，比如3dmax、blender軟件導出的三維模型文件本質上是什么。

查看Threejs文檔Geometry、Material、Light、Object3D等類，你可以發現這些類都提供了一個方法.toJSON()通過這個方法可以導出Threejs三維模型的各類數據，該方法的功能就是把Threejs的幾何體、材質、光源等對象轉化為JSON格式導出。

導出幾何體信息。

var geometry = new THREE.BoxGeometry(100, 100, 100); // 控制臺查看立方體數據 console.log(geometry); // 控制臺查看geometry.toJSON()結果 console.log(geometry.toJSON()); // JSON對象轉化為字符串 console.log(JSON.stringify(geometry.toJSON())); // JSON.stringify()方法內部會自動調用參數的toJSON()方法 console.log(JSON.stringify(geometry));

導出材質信息。

var material = new THREE.MeshLambertMaterial({color: 0x0000ff, }); //材質對象Material console.log(material); console.log(material.toJSON()); console.log(JSON.stringify(material));

導出場景scene信息。

var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh scene.add(mesh); //網格模型添加到場景中 console.log(scene); console.log(scene.toJSON());

自定義模型加載器文件

實際開發中，加載一種特定格式的模型文件，Threejs在three.js-master\examples\js\loaders目錄下會提供一系列的加載器，這些加載器本質上都是解析模型文件的字符串，通過正則表達式提取相關的頂點、材質等信息轉化為Threejs自身的類表示的對象。為了讓大家更理解這些常見的加載器，課件中提供了一個源碼案例，編寫了一個非常非常簡易的自定義加載器，然后使用自定義的加載器去加載一個文件，讓大家明白這些加載器怎么來的。

加載器STLobj與mtlFBXColladaPLYGLTFSTLLoaderOBJLoaderMTLLoaderFBXLoader.ColladaLoader2PLYLoaderGLTFLoader

// 如果編寫通用的材質加載器需要枚舉所有的材質，這里沒有列舉完 var typeAPI = {MeshLambertMaterial: THREE.MeshLambertMaterial,MeshBasicMaterial: THREE.MeshBasicMaterial,MeshPhongMaterial: THREE.MeshPhongMaterial,PointsMaterial: THREE.PointsMaterial, } // 創建一個文件加載器，該加載器是對異步加載的封裝 var loader = new THREE.FileLoader(); loader.load('material.json', function(elem) {console.log(elem);// 查看加載返回的內容var obj = JSON.parse(elem);// 字符串轉JSON對象console.log(obj);// 查看轉化結果var geometry = new THREE.BoxGeometry(100, 100, 100);/*** 解析材質數據*/// 根據type的值判斷調用threejs的哪一個APIvar material = new typeAPI[obj.type]();// 從obj.color中提取顏色// 16711935對應顏色0xFF00FF 255對應顏色0x0000FFmaterial.color.r = (obj.color >> 16 & 255) / 255; //獲取顏色值R部分material.color.g = (obj.color >> 8 & 255) / 255; //獲取顏色值G部分material.color.b = (obj.color & 255) / 255; //獲取顏色值B部分var mesh = new THREE.Mesh(geometry, material); //網格模型對象Meshscene.add(mesh); //網格模型添加到場景中 })

加載Three.js導出的模型數據

緩沖幾何體數據加載器。

/****/ var loader = new THREE.BufferGeometryLoader(); loader.load('bufferGeometry.json',function (geometry) {// 控制臺查看加載放回的threejs對象結構console.log(geometry);var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材質對象Materialvar mesh = new THREE.Mesh(geometry, material); //網格模型對象Meshscene.add(mesh); //網格模型添加到場景中 })

網格模型Mesh加載，包含幾何體Geometry和材質Material

var loader = new THREE.ObjectLoader(); loader.load('model.json',function (obj) {console.log(obj); console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj) })

加載組Group對象，模型對象構成的樹結構

loader.load('group.json', function(obj) {console.log(obj);console.log(obj.type);scene.add(obj) })

加載場景對象，場景對象不僅包含模型，還包括光源對象

loader.load('scene.json',function (obj) {console.log(obj);console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj) })

總結

以上是生活随笔為你收集整理的Three.js数据结构、导入导出(.toJSON())的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。