threejs中引入draco压缩后的模型

## draco是谷歌出的一款模型压缩工具,可将gltf格式的模型进行进一步压缩提高页面加载速的一种方法,方便大家下载,

这是码云的地址https://gitee.com/zmj66666/draco.git

一、通过Draco进行压缩

#全局安装
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

threejs中进行引用

首先在顶部引入"DRACOLoader",

     import * as THREE from '../build/three.module.js'; import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

在threejs中进行加载,在draco文件中找到draco_decoder.js

  // // 创建加载器var gltfLoader = new GLTFLoader();const dracoLoader = new DRACOLoader();// 在draco文件中找到draco_decoder.js这个文件,如果是vue直接放在项目的public下  的'./gltfdraco/'目录下面即可,这个路径主要是放draco的一些js文件的dracoLoader.setDecoderPath('./gltfdraco/'); //这个路径是放draco_decoder.js这个文件的dracoLoader.setDecoderConfig({ type: 'js' });dracoLoader.preload();gltfLoader.setDRACOLoader(dracoLoader);// 然后直接加载模型即可gltfLoader.load('./model/zhuji08-draco.glb',function(gltf){scene.add(group)})

下面是完整代码

// An highlighted block
<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - post processing - Outline Pass</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="container"></div><script type="module">import * as THREE from '../build/three.module.js';import Stats from './jsm/libs/stats.module.js';// import { GUI } from './jsm/libs/dat.gui.module.js';import { OrbitControls } from './jsm/controls/OrbitControls.js';import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff, 1);point.position.set(300, 1200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0xcecece,1);ambient.position.set(0, 800, 0); //点光源位置scene.add(ambient);var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度/**透视投影相机对象*/var camera = new THREE.PerspectiveCamera(60, width / height, 1, 100000);console.log('相机',camera)camera.position.set(370, 60, 120); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)//设置窗口自适应window.onresize=function(){// 重置渲染器输出画布canvas尺寸renderer.setSize(window.innerWidth,window.innerHeight);// 全屏情况下：设置观察范围长宽比aspect为窗口宽高比camera.aspect = window.innerWidth/window.innerHeight;// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix// 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)// 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵camera.updateProjectionMatrix ();// 创建加载器  DRACOLoader  重点var gltfLoader = new GLTFLoader();var group = new THREE.Groupconst dracoLoader = new DRACOLoader();// 设置解压路径，这个文件直接放在项目的public目录下面即可，后面会截图指明gltf目录所在位置dracoLoader.setDecoderPath('./gltfdraco/');dracoLoader.setDecoderConfig({ type: 'js' });dracoLoader.preload();gltfLoader.setDRACOLoader(dracoLoader);// 然后直接加载模型即可gltfLoader.load('./model/zhuji08-draco.glb',function(gltf){console.log(gltf)scene.add(gltf)})var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作scene.rotateY(0.00005);//每次绕y轴旋转0.01弧度requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧}render();let controls// //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性controls = new OrbitControls( camera, renderer.domElement );</script></body>
</html>

有不清楚的地方可以私信我

threejs中引入draco压缩后的模型相关推荐

模型压缩：如何在压缩后保持模型的精度和速度
作者:禅与计算机程序设计艺术模型压缩:如何在压缩后保持模型的精度和速度引言模型压缩是一个重要的问题,因为在现代深度学习应用中,模型通常非常大,而且需要大量的计算资源.因此,如何压缩模型以保持其精 ...
在IIS中使用Gzip压缩后传送数据
使用Gzip压缩会增大服务器CPU的使用率但可以通过压缩而减少服务器向客户端发送的数据 ,若使用了Gzip压缩IIS在向客户端发送数据时会自动检测,如果客户端浏览器支持 IE6.0,firefox ...
Windows编程中引入winsock2.h后导致的错误解决
首先引入后出错如下: 出错的原因是因为在windows.h文件中引入了winsock.h文件,导致了重定义出错, 解决方案如下: 1.在windows.h上添加 #define WIN32_LEAN_ ...
如何在Maya中修改已经绑定后的模型的法线
前言:最近想把尼尔机械纪元的2B导入到UE中看看效果,可不知道是不是我解包的过程有问题,2B模型的裙子部分的发现有问题,而且裙子的模型还被拆分为了3个部分,直接软边是不管用的,而且已经绑定的模型就算修 ...
Unity中渐变图片压缩后渐变效果不好的解决办法（使用TexturePacker）
TexturePacker破解版教程及下载:https://blog.csdn.net/u013654125/article/details/80676715 前几天公司有个项目,由于美术做了很多背景 ...
THREEJS中通过Raycaster获取鼠标与模型的交互点
注意:group中存放模型 // 适用于通过json得到的sprite精灵绘制的 //点击射线 var raycaster = new THREE.Raycaster(); var mouse = n ...
QEMU-KVM中的多线程压缩迁移技术
导读目前的迁移技术,都是通过向QEMUFILE中直接写入裸内存数据来达到传送虚拟机的目的端,这种情况下,发送的数据量大,从而会导致更高的迁移时间(total time)和黑宕时间(downtime) ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
看EyeEm如何在产品开发中整合、运用深度学习模型
原文:One Model At A Time: Integrating And Running Deep Learning Models In Production At EyeEm 作者:Miche ...
在计算机系统中引入通道结构,第5-6章习题讲解.doc
文档介绍: EvaluationWarning:ThedocumentwascreatedwithSpire..翟罚称汪轨涝汁滴责鸥眉疚粉甫宁酿赖淆磊张姆彪杆轿酸页衡震丰淹粪糠徽佃桨臣援凸褐绘哄绢悼清 ...

threejs中引入draco压缩后的模型

threejs中引入draco压缩后的模型

## draco是谷歌出的一款模型压缩工具,可将gltf格式的模型进行进一步压缩提高页面加载速的一种方法,方便大家下载,

这是码云的地址https://gitee.com/zmj66666/draco.git

一、通过Draco进行压缩

threejs中进行引用

在threejs中进行加载,在draco文件中找到draco_decoder.js

下面是完整代码

threejs中引入draco压缩后的模型相关推荐

最新文章

热门文章