基于threejs的建模工具:格式的压缩文件在
在 H5 中引入 3D 模型往往存在资源太大,可以通过模型网格压缩,通过 glTF 配合 Draco 压缩的方式,可以在视觉效果近乎一致的情况下,让 3D 模型文件成倍缩小,我来为大家科普一下关于基于threejs的建模工具:格式的压缩文件在?下面希望有你要的答案,我们一起来看看吧!
基于threejs的建模工具:格式的压缩文件在
在 H5 中引入 3D 模型往往存在资源太大,可以通过模型网格压缩,通过 glTF 配合 Draco 压缩的方式,可以在视觉效果近乎一致的情况下,让 3D 模型文件成倍缩小
glTF 在线查看器: https://gltf-viewer.donmccurdy.com
一、通过 Draco 进行压缩Draco 是 Google 推出的一个用于 3D 模型压缩和解压缩的工具库,glTF 资源可通过、Draco 开发命令行工具 gltf-pipeline 进行编码压缩,gltf-pipeline 可通过 npm 的方式安装使用,使用方法如下:
#全局安装
npm install -g gltf-pipeline
#压缩 glb 文件 -b 表示输出 glb 格式, -d 表示压缩
gltf-pipeline -i model.glb -b -d
#压缩 glb 文件并将纹理图片分离出来
gltf-pipeline -i model.glb -b -d -t
更多参数查阅
gltf-pipeline -h
二、实际操作流程(vue cli3 结构为例)1、通过 blender 制作的模型导出 test.glb 文件,在 public 的文件夹内新建 models 文件夹,并放入 test.glb 文件,
通过命令行工具 gltf-pipeline -i test.glb -o test1.glb -d 则可以生成压缩后的 test1.glb 文件
2、把解码文件 node_modules>three>examples>js>libs 路径下的 draco 文件夹放到 public 文件夹下
3、代码实现
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {CSS3DRenderer, CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
initModel() {
let gltScene;
let gltfLoader = new GLTFLoader();
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("draco/gltf/"); // 设置public下的解码路径,注意最后面的/
dracoLoader.setDecoderConfig({ type: "js" });
dracoLoader.preload();
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load("models/mynewtest.glb", gltf => {
console.log(gltf);
gltf.scene.position.set(0, 0, 0);
this.scene.add(gltf.scene);
});
},
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com