Three.js數(shù)據(jù)結(jié)構(gòu)、導入導出

本文是Three.js電子書的14.1節(jié)

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

Threejs導出模型信息

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

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

導出幾何體信息。

var geometry = new THREE.BoxGeometry(100, 100, 100); // 控制臺查看立方體數(shù)據(jù) console.log(geometry); // 控制臺查看geometry.toJSON()結(jié)果 console.log(geometry.toJSON()); // JSON對象轉(zhuǎn)化為字符串 console.log(JSON.stringify(geometry.toJSON())); // JSON.stringify()方法內(nèi)部會自動調(diào)用參數(shù)的toJSON()方法 console.log(JSON.stringify(geometry));

導出材質(zhì)信息。

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

導出場景scene信息。

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

自定義模型加載器文件

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

加載器STLobj與mtlFBXColladaPLYGLTFSTLLoaderOBJLoaderMTLLoaderFBXLoader.ColladaLoader2PLYLoaderGLTFLoader

// 如果編寫通用的材質(zhì)加載器需要枚舉所有的材質(zhì)，這里沒有列舉完 var typeAPI = {MeshLambertMaterial: THREE.MeshLambertMaterial,MeshBasicMaterial: THREE.MeshBasicMaterial,MeshPhongMaterial: THREE.MeshPhongMaterial,PointsMaterial: THREE.PointsMaterial, } // 創(chuàng)建一個文件加載器，該加載器是對異步加載的封裝 var loader = new THREE.FileLoader(); loader.load('material.json', function(elem) {console.log(elem);// 查看加載返回的內(nèi)容var obj = JSON.parse(elem);// 字符串轉(zhuǎn)JSON對象console.log(obj);// 查看轉(zhuǎn)化結(jié)果var geometry = new THREE.BoxGeometry(100, 100, 100);/*** 解析材質(zhì)數(shù)據(jù)*/// 根據(jù)type的值判斷調(diào)用threejs的哪一個APIvar material = new typeAPI[obj.type]();// 從obj.color中提取顏色// 16711935對應(yīng)顏色0xFF00FF 255對應(yīng)顏色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); //網(wǎng)格模型對象Meshscene.add(mesh); //網(wǎng)格模型添加到場景中 })

加載Three.js導出的模型數(shù)據(jù)

緩沖幾何體數(shù)據(jù)加載器。

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

網(wǎng)格模型Mesh加載，包含幾何體Geometry和材質(zhì)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對象，模型對象構(gòu)成的樹結(jié)構(gòu)

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) })

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。