在vue中使用three压缩过的glb模型

繁星如梦&

已于 2023-04-17 11:32:47 修改

阅读量721

点赞数 2

分类专栏： vue+three.js vue知识文章标签： vue.js javascript 前端

于 2023-02-10 17:30:50 首次发布

本文链接：https://blog.csdn.net/fackyoufack/article/details/128974124

版权

vue知识同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue+three.js

3 篇文章 1 订阅

订阅专栏

在vue中使用three压缩过的glb模型

01.引入需要解压的dracol

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

02.进行引入使用

var gltfLoader = new GLTFLoader();
		// var group = new Three.Group
		const dracoLoader = new DRACOLoader();
		//解压模型的位置信息
		dracoLoader.setDecoderPath('static/gltf/');
		dracoLoader.setDecoderConfig({ type: 'js' });
		dracoLoader.preload();
		gltfLoader.setDRACOLoader(dracoLoader);
    gltfLoader.load( '压缩模型的位置', function ( glb ) {})

0.3在node_modules下的three/examples/jsm/libs/draco/gltf

将下面文件复制移动到publc下的static下面的gltf

04.出错

在这里插入图片描述
这个错误代表的就是解压模型的位置信息不对

	dracoLoader.setDecoderPath('static/gltf/');
	//按照上方写法顺序便可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

繁星如梦&

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在vue中使用three压缩过的glb模型

vue中使用three压缩过的模型
复制链接

扫一扫

专栏目录

Three——glb模型压缩

NanChen的博客

04-23

1756

引入外部模型太大？用DRACOLoader压缩一下！

Vue集成three.js，并加载glb、gltf、FBX、json模型

灰太狼-铜豌豆的博客

09-14

6322

Vue集成three.js，并加载glb、gltf、FBX、json模型

参与评论您还未登录，请先登录后发表或查看评论

解决 vue 引入 glb 模型时 vite 报错问题

热门推荐

hongsir的博客

12-14

1万+

介绍 Three.js允许我们创建许多基本几何图形，但是当涉及到更复杂的形状时，我们最好使用专业的3D软件。这次课将使用已经制作完成的模型，后面将会学习在3D软件中创建自己的模型。

ThreeJs 学习之旅(十七)—Imported models(导入模型)

Florenza的博客

05-24

1224

初始代码: import './style.css' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import * as dat from 'dat.gui' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoad...

Three.js加载压缩模型-Draco压缩（1.0）

于舒爱

02-29

979

有人说解码路径可以是：three/examples/jsm/libs/draco/，但是我在netWork上面看一直拿不到draco_wasm_wrapper.js 和 draco_decoder.wasm 两个文件。但是后续还可以使用建模工具进行压缩；后来把draco下的文件放到public下，配置路径改成：floder/THREEJS/libs/wasm/这两天在写一个压缩模型，加载压缩后的模型...在网上找了很多资源，趁热打铁，做个笔记。若要加载压缩后的模型，不可以再使用GLTFLoader。

Three.js 单模型，组合模型加载

qq_45853174的博客

11-24

1655

three.js 基础模型加载可查看 https://threejs.org/ 上面涵盖各种模型的加载器及加载方式，在此不再赘述。本文主要介绍如何使用vue配合three.js 库实现各种格式3d 模型文件的加载，组合式模型文件的加载，以及如何去更新相机的设置，调整模型的大小缩放去达到最适合观察的角度与大小。既然选择了远方，便只顾风雨兼程。

vue3+vite+three加载glb模型文件

regretTAT的博客

01-02

1305

vue3+vite+three加载glb模型文件步骤部署后刷新页面404问题、引入服务器资源文件以及本地引入资源文件等问题

Vue3-TypeScript-Threejs：导入外部的glb格式3D模型

snowball的博客

11-14

3486

three/examples/jsm/loaders/GLTFLoader的使用方式为：先新建一个GLTFLoader对象，然后传入一个配置对象进行初始化，再调用该对象的parse()方法，传入需要解析的obj模型数据，即可解析模型。而 three/examples/jsm/loaders/GLTFLoader 是 Three.js 官方提供的一个案例，它是基于 GLTFLoader 开发的，同时也是 Three.js 的模块。--------AI回答二--------确认.glb文件的路径是否正确。

threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸...

07-30

2732

这个小案例是当初我在学习的时候，小的一个小案例，代码还需要进一步优化；还请谅解~~；主要用到了threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸等这些小功能；（点击每个mesh，mesh的颜色会变为红色）点击 1 需要加载这些相关的js文件 2 下面是实现的一些小功能 3 下面是相关代码，代码还没有优化，请谅解~~（具...

Vue+Three 加载glb文件报错

pinkling的博客

11-04

4769

报错：加载glb的代码： load3D() { const loader = new GLTFLoader() const dracoLoader = new DRACOLoader() dracoLoader.setDecoderPath('/draco/') dracoLoader.preload() loader.setDRACOLoader(dracoLoader) loader.load('/3D/city...

ThreeJs DRACO压缩并加载gltf模型的爬坑记录

bigpatten的博客

10-27

5888

采用DRACO压缩并加载gltf模型的用法，以VUE开发为例首先，在官方文件中找到对模型进行压缩所需要的文件位置大概在项目的examples/js/libs/draco/gltf下，我们可以放在项目的public目录下，如下图所示：下面来安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。 npm i -g gltf-pipeline 用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件

vue 使用three3d模型在模型上添加标注

07-14

在Vue中使用Three.js库来渲染3D模型，并在模型上添加标注的过程如下： 1. 安装Three.js和Vue-Three.js依赖： ```bash npm install three vue-threejs ``` 2. 创建一个Vue组件，命名为`ThreeModel`： ```vue <template> <div ref="container"></div> </template> <script> import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; export default { name: 'ThreeModel', mounted() { // 创建场景 const scene = new THREE.Scene(); // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(this.$refs.container.offsetWidth, this.$refs.container.offsetHeight); this.$refs.container.appendChild(renderer.domElement); // 创建相机 const camera = new THREE.PerspectiveCamera(75, this.$refs.container.offsetWidth / this.$refs.container.offsetHeight, 0.1, 1000); camera.position.z = 5; // 添加控制器 const controls = new OrbitControls(camera, renderer.domElement); // 添加3D模型 const loader = new THREE.GLTFLoader(); loader.load('path/to/your/model.gltf', (gltf) => { scene.add(gltf.scene); // 在模型上添加标注 const label = this.createLabel('Your Label'); gltf.scene.add(label); }); // 添加灯光 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 1, 1).normalize(); scene.add(light); // 渲染场景 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); }, methods: { createLabel(text) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = 'Bold 24px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; ctx.fillText(text, canvas.width / 2, canvas.height / 2); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(material); sprite.scale.set(2, 1, 1); return sprite; }, }, }; </script> <style> #container { width: 100%; height: 100%; } </style> ``` 3. 在父组件中使用`ThreeModel`组件： ```vue <template> <div> <ThreeModel /> </div> </template> <script> import ThreeModel from './ThreeModel.vue'; export default { components: { ThreeModel, }, }; </script> ``` 请确保将路径`path/to/your/model.gltf`替换为实际的模型文件路径。在`createLabel`方法中，您可以根据需要自定义标注的样式和内容。这样，您就可以在Vue中使用Three.js来渲染3D模型，并在模型上添加标注了。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交