threejs关于模型的格式介绍，模型转换，模型压缩，模型加载的相关总结
1.Threejs WebGL相关模型加载性能对⽐及模型压缩优化详解⼲货链接
1.科普：三维⽂件格式
2.如何在页⾯极速渲染3D模型
3.3D性能优化 | 说⼀说glTF⽂件压缩
2.webgl的模型格式选择:
列举3个最常⽤的模型格式
1. fbx FBX最⼤的⽤途是⽤在诸如在 Max、Maya、Softimage 等软件间进⾏模型、材质、动作和摄影机信息的互导，这样就可以发挥Max 和 Maya 等软件的优势。可以说，FBX ⽅案是⾮常好的互导⽅案。 . fbx 格式，Autodesk 家族格式 - ⽀持动画！这是⼀个商业的格式，兼容最好的当属 Autodesk 家族的软件了。fbx 也开放给了第三⽅软件，但总是感觉除了他⾃⼰的软件之外或多或少的都有解决不完的问题。 ⽏庸置疑，FBX 现在是最受欢迎的格式。
2. glTF glTF 称为“ 3D 界的 JPEG”，使⽤了更优的数据结构，为应⽤程序实时渲染⽽⽣。glTF 有以下⼏⼤特点： - 由现有 OpenGL 的维护组织 Khronos 推出，⽬的就是为了统⼀⽤于应⽤程序渲染的 3D 格式，更适⽤于基于 OpenGL 的引擎； - 减少了 3D 格式中除了与渲染⽆关的冗余信息，最⼩化 3D ⽂件资源； - 优化了应⽤程序读取效率和和减少渲染模型的运⾏时间； - ⽀持 3D 模型⼏何体、材质、动画及场景、摄影机等信息。 glF 导出格式有两种后缀格式可供选择：.gltf 和 .glb： -
.gltf ⽂件导出时⼀般会输出两种⽂件类型，⼀是 .bin ⽂件，以⼆进制流的⽅式存储顶点坐标、顶点法线坐标和贴图纹理坐标、贴图信息等模型基本数据信息；⼆是 .gltf ⽂件，本质是 json ⽂件，记录对bin⽂件中模型顶点基本数据的索引、材质索引等信息，⽅便编辑，可读性较好； - .glb ⽂件格式只导出⼀个 .glb ⽂件，将所有数据都输出为⼆进制流，通常来说会更⼩⼀点，若不关⼼模型内的具体数据可直接选择此类型。 3. obj OBJ⽂件很适合⽤于3D软件模型之间的互导。⽬前⼏乎所有知名的3D软件都⽀持OBJ⽂件的读写。OBJ⽂件是⼀种⽂本⽂件，可以直接⽤写字板打开进⾏查看和编辑修改。. obj 格式， 静态多边形模型 - 附带 UV 信息及材质路径！不包含动画、材质特性、贴图路径、动⼒学、粒⼦等信息。
最适⽤于webgl的模型格式: glTF/glb
西门子plc常用型号3.在Threejs中对模型加载的运⽤
3.1 对于gltf模型的压缩:
常⽤的三种压缩⽅式:
MeshQuan、MeshOpt、Draco
压缩性能对⽐详情见下链接
3.2 npm ⼯具安装:
#fbx转gltf fbx2gltf : npm i fbx2gltf
#obj转gltf obj2gltf : npm i obj2gltf
#gltf Draco压缩 gltf-pipeline : npm i gltf-pipeline
#gltf MeshQuan、MeshOpt压缩 gltfpack : npm i gltfpack
gltfpack 命令⾏参数:
gltfpack 属性:
-
c:⽣成压缩的gltf/glb⽂件(-cc以获得更⾼的压缩⽐)
材质:
-tc ：使⽤BasisU超压缩将所有纹理转换为KTX2(使⽤BasisU / toktx可执⾏⽂件)
-tu：当编码纹理时使⽤UASTC(更⾼的质量和更⼤的尺⼨)
-tq N：设置纹理编码质量(默认值:8;N应该在1到10之间
-ts R：根据⽐例R缩放纹理尺⼨(默认为1;R应该在0和1之间)
-tp：调整纹理⼤⼩到最接近2的幂，以符合WebGL1的限制
ie允许activex控件简化:
-si R：简化⽹格以达到⽐例R(默认为1;R应该在0和1之间)
-sa：不计质量，积极简化⽬标⽐率
顶点:
-
vp N：使⽤N位量化的位置(默认:14;N应该在1到16之间)
-vt N：使⽤N位量化纹理坐标(默认:12;N应该在1到16之间)
-vn N：使⽤N位量化法线和切线(默认:8;N应该在1到16之间)
-vc N：使⽤N位量化颜⾊(默认:8;N应该在1到16之间)
动画:
-at N：使⽤N位量化转换(默认值:16;N应该在1到24之间)
-ar N：使⽤N位量化旋转(默认:12;N应该在4到16之间)
-as N：使⽤N位量化的规模(默认值:16;N应该在1到24之间)@i ñ tE â1iX
-af N：以N Hz重采样动画(默认值:30)#压缩glb
-cc 表⽰Opt压缩 ,
-tc 表⽰贴图压缩KTX格式*
3.3 npm 模型压缩命令⾏使⽤
1.fbx转gltf/gab 命令⾏: fbx2gltf -i model.FBX -o model.gltf
2.obj转gltf/glb 命令⾏: -s 代表纹理图⽚从模型中分离 obj2gltf -i model.obj -o i model.glb obj2gltf -i model.obj -o i model.glb -s
3.gltf 压缩 Draco压缩 命令⾏: #压缩glb⽂件 -b 表⽰输出glb格式 -f 表⽰输出gltf格式 -d表⽰Draco压缩, -s 表⽰压缩glb⽂件并将纹理图⽚分离出来 + .bin ⽂件 gltf-pipeline -i model.glb -b -d gltf-pipeline -i model.glb -o model2.glb -d gltf-pipeline -i model.glb -o model-processed.glb -s
4.gltf 压缩 MeshQuan 命令⾏: gltfpack -i model.glb -o model_pack.glb
5.gltf 压缩 MeshOpt 命令⾏: #压缩模型 gltfpack -i model.glb -o model_pack.glb -cc #压缩模型+压缩贴图 gltfpack -i model.glb -o model_pack.glb -cc -tc #压缩模型+压缩贴图+对vp进⾏限制，防⽌压缩太过使贴图与模型重⾯导致闪⾯(重要) (以下vp vt 参数根据开关室模型调整) gltfpack -i model.glb -o model-vpvtcctc.glb -vp 16 -vt 12 -cc -tc
4.Threejs 不同压缩格式简易加载代码⽰例:
导⼊Three 相关加载器:1.obj
import * as THREE from 'three'
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';hammer好用吗
import { MeshoptDecoder } from 'three/examples/jsm/libs/dule.js';
2.fbx
3.普通不压缩 gltf/glb
4.gltf/glb Draco 压缩
/**
* OBJ 和材质⽂件mtl 加载
*/
loadObj = (materialPath , objPath ) => {
var a = new Date ().getTime () / 1000
let objloader = new OBJLoader (); //obj 加载器
var mtlLoader = new MTLLoader (); //材质⽂件加载器
mtlLoader .load (materialPath , function (materials ) {
// 返回⼀个包含材质的对象MaterialCreator
//obj 的模型会和MaterialCreator 包含的材质对应起来
objloader .
setMaterials (materials );
objloader .load (objPath , function (obj ) {
scene .add (obj ); //返回的组对象插⼊场景中
})
})
}文件格式转换app
loadFBX = ( path ) => {
// 加载fbx 摄像机model
colspan 可以合并列var loader = new FBXLoader ();
loader .load (path , function (obj ) {
obj .traverse (function (child ) {
if (child .isMesh ) {
//child.castShadow = true;
//iveShadow = true;
}
});
scene .add (obj );
});
}
loadGltf = (path ) => {
var gltfloader = new GLTFLoader ()
gltfloader .load (path , function (gltf ) {
var object = gltf .scene
scene .add (object );
});
}
5.gltf/glb MeshoptDecoder 压缩
6.gltf/glb MeshoptDecoder 压缩+贴图 KTX 压缩
loadGlb_Draco (path ) {
var loader = new GLTFLoader ();
var dracoLoader = new DRACOLoader ();
dracoLoader .setDecoderPath ('node_modules/three/examples/js/libs/draco/');
dracoLoader .preload ();
loader .setDRACOLoader (dracoLoader );
loader .load (
path ,
function (gltf ) {
gltf .scene .traverse (function (child ) {
if (
child .isMesh ) {
// child.material .wireframe =true;
// child.material.shininess = 60;
}
});
scene .add (gltf .scene );
}
);
}
/**
* 加载 opt 压缩格式的glb 模型
* @param {*} _this
设置java环境jdk* @param {*} path
* @param {*} cb
*/
loadGlbMeshopt = ( path ) => {
var loader = new GLTFLoader ();
loader .setMeshoptDecoder (MeshoptDecoder );
loader .load (path , function (gltf ) { scene .add (gltf .scene ); });
}
/** * gltfKTX 压缩模型加载
* @param {*} _this
* @param {*} path
* @param {*} cb
*/
loadGlbpackKTX = ( path ) => {
const ktx2Loader = new KTX2Loader ()
// .setTranscoderPath('js/libs/basis/')
.setTranscoderPath ('node_modules/three/examples/js/libs/basis/')
.detectSupport (_this .renderer );
// const loader = new GLTFLoader().setPath('./public/three/models/gltf/cc_tc/');
const loader = new GLTFLoader ();
loader .setKTX2Loader (ktx2Loader );
loader .setMeshoptDecoder (MeshoptDecoder );
loader .load (path , function (gltf ) {
/
/ coffeemat.glb was produced from the source scene using gltfpack:
// gltfpack -i coffeemat/scene.gltf -o coffeemat.glb -cc -tc
// The resulting model uses EXT_meshopt_compression (for geometry) and KHR_texture_basisu (for texture compression using ETC1S/BasisLZ) scene .add (gltf .scene );
});
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论