Vue加载glb / gltf模型（如何在vue中使用Three.js，vue使用threejs加载glb模型）

简介：Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API，使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js

先看一下效果（这里加载的是两个模型）：

Three.js如何加载GLB / GLTF模型文件（多看注释）？

一、首先，引入功能函数 以及 定义需要使用到的变量

// 引入Three.js库
import * as THREE from "three";
//查看是否引入成功
console.log(three) // 引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";// 引入GLTFLoader
// 新版本GLTFLoader位置，新版本的Three.js中，许多模块已经移动到了 jsm 目录下
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; //旧版本GLTFLoader位置
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";//定义变量
let scene, renderer, camera;

二、初始化渲染器

初始化渲染器；就是模型需要渲染的大小，可自行创建，
也可获取元素后，设置成元素的大小；这里获取元素，设置成元素的大小。
initRenderer();
function initRenderer() {const sheepBox = document.getElementById("sheep_box");// 初始化渲染器renderer = new THREE.WebGLRenderer({ antialias: true });// 设置像素比renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器尺寸renderer.setSize(sheepBox.clientWidth, sheepBox.clientHeight);// 将渲染器的 canvas 元素添加到容器中sheepBox.appendChild(renderer.domElement);// 设置渲染器尺寸// renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器添加到DOM// document.body.appendChild(renderer.domElement);
}这里首先获取要渲染的容器元素（sheepBox div 元素），
然后通过new THREE.WebGLRenderer({ antialias: true })方法
创建一个新的WebGL渲染器实例（renderer），
然后设置像素比（window.devicePixelRatio），以便在不同的设备像素比下正确显示渲染结果，
再设置渲染器的尺寸，将其大小设置为容器元素的实际尺寸，
通过获取容器元素的 clientWidth 和 clientHeight 属性来实现，
最后将渲染器的 canvas 元素添加到容器中。

注意事项：

  1. 注意这里window才有innerWindth和innerHeight，元素没有innerWindth和innerHeigh；
  2. 所以 元素.innerWidth 这个写法是无效的，因为 innerWidth 不是 DOM 元素的属性，而是用于浏览器窗口（window）的属性，用于获取窗口的内部宽度（即视口宽度，不包括滚动条）；
  3. 这里元素使用clientWidth，这个属性返回元素的像素宽度，包括内边距（padding），但不包括边框（border）和外边距（margin）。

三、初始化场景

初始化场景；就是创建一个3d场景对象，这里使用new THREE.Scene()方法创建了
一个新的Three.js场景对象，并将其赋值给变量scene；并设置背景颜色0xa0a0a0
initScene();
function initScene() {// 初始化场景scene = new THREE.Scene();// 场景的背景颜色scene.background = new THREE.Color(0xa0a0a0);
}这里创建了一个新的THREE.Scene对象，并将其赋值给变量scene。
接下来，为场景设置了背景颜色 0xa0a0a0。

四、初始化相机

初始化相机；就是你看到的角度，模型距离屏幕的位置，以及模型的垂直位置等
initCamera()
function initCamera() {// 初始化相机camera = new THREE.PerspectiveCamera(45, // 设置透视相机的角度，单位为度// 设置相机剪裁面的大小，即窗口的宽除以高window.innerWidth / window.innerHeight, 1, // 设置近距裁剪面到相机距离1000 // 设置远距裁剪面到相机距离);// 设置相机位置// 这里设置为距离地面2米的正上方，距离地面5米camera.position.set(1, 2, -5);
}这里使用new THREE.PerspectiveCamera(...)方法创建一个透视相机实例。
传入的参数包括摄像机视图的垂直夹角（vFov）、焦距（focalLength）、
近眼距离（near）和远眼距离（far）。这些参数会影响相机生成的图像的透视效果。然后使用camera.position.set(...)方法设置相机的初始位置。
这里设置了X轴、Y轴和Z轴的位置，分别对应于水平、垂直和近远距离。

五、初始化控制器

初始化控制器；就是是用于操纵相机和场景的交互性功能，如缩放、平移和旋转相机。
initControls();
function initControls() {// 初始化控制器const controls = new OrbitControls(camera, renderer.domElement);
}这里使用new OrbitControls(camera, renderer.domElement) 
创建了一个 OrbitControls 实例，
并将相机和渲染器的 DOM 元素作为参数传递给它。
这意味着用户可以通过鼠标或触摸设备操作三维空间中的相机，以控制视角和位置。

六、初始化需要加载的模型

初始化需要加载的模型；就是用来加载并显示一个名为"Soldier.glb"的模型。
initModels();
function initModels() {const loader = new GLTFLoader();loader.load("/models/Soldier.glb", function (glb) {打印查看模型文件console.log(glb);scene.add(glb.scene);});
}这里先使用new GLTFLoader()创建一个loader；
然后调用GLTFLoader的load方法，传入两个参数：
模型文件的URL（"/models/Soldier.glb"）和一个回调函数；
回调函数将在模型加载完成后执行。
最后通过scene.add(gltf.scene)方法，
将加载完成的模型添加到场景中（即Vue.js应用程序的渲染场景）。

可以看到控制台，打印成功，拿到glb模型，然后添加渲染。最后，就可以在页面对3d场景进行交互操作。

七、监听拖拽窗口事件，在事件触发时，重新绘制

监听窗口缩放
window.addEventListener("resize", function () {const sheepBox = document.getElementById("sheep_box");// 设置相机视野比camera.aspect = sheepBox.clientWidth / sheepBox.clientHeight;// 更新投影矩阵camera.updateProjectionMatrix();// 设置渲染器尺寸renderer.setSize(sheepBox.clientWidth, sheepBox.clientHeight);// // 设置相机视野比 浏览器、window的可视宽高// camera.aspect = window.innerWidth / window.innerHeight;// // 设置渲染器尺寸 浏览器、window的可视宽高// renderer.setSize(window.innerWidth, window.innerHeight);
});

八、如果是加载压缩后的glb / gltf 文件，则需要添加解压文件和解压步骤

加载压缩后的glb / gltf文件需要在项目中配置解码器，draco，具体操作如下：

1、首先需要解码文件，直接去github上下载，地址如下

dracoicon-default.png?t=N7T8https://github.com/google/draco

2、提取draco中的重要文件，放在public文件下，方便使用

对于 DRACO 解码器相关文件，只需要将以下文件放置在您的项目中：

  1. draco_decoder.wasm: 这是 DRACO 解码器的 WebAssembly 文件。
  2. draco_decoder.js: 这是 DRACO 解码器的 JavaScript 封装文件。
  3. draco_wasm_wrapper.js: 这是用于包装和加载 DRACO 解码器 WebAssembly 文件的 JavaScript 文件。

这些文件是用于在浏览器中解码 DRACO 压缩的模型数据的必要文件。可以将这些文件放置在项目的 public 目录下的一个名为 draco 的子目录中，然后在代码中使用相对于根目录的路径来指定 DRACO 文件的位置，以便 GLTFLoader 能够正确加载和使用解码器。

3、想直接拿draco文件，在这

Draco功能代码文件icon-default.png?t=N7T8https://download.csdn.net/download/weixin_65793170/89122540?spm=1001.2014.3001.5503

4、draco文件的具体引用

        //创建一个新的Draco实例const dracoLoader = new DRACOLoader();// 设置 DRACOLoader 的路径，通常是 DRACO 压缩库的路径// 请替换为您的实际路径dracoLoader.setDecoderPath("/draco/");// 将 DRACOLoader 实例传递给 GLTFLoaderloader.setDRACOLoader(dracoLoader);

5、全部代码，加载压缩的glb / gltf模型文件（初始化需要加载的模型）

function initModels() {const loader = new GLTFLoader();//创建一个新的Draco实例const dracoLoader = new DRACOLoader();// 设置 DRACOLoader 的路径，通常是 DRACO 压缩库的路径// 请替换为您的实际路径dracoLoader.setDecoderPath("/draco/");// 将 DRACOLoader 实例传递给 GLTFLoaderloader.setDRACOLoader(dracoLoader);loader.load("/models/forest_house.glb", function (glb) {// console.log(glb);scene.add(glb.scene);// const clip = glb.animations[1];// mixer = new THREE.AnimationMixer(glb.scene);// // const action = mixer.clipAction(clip).play();// const action = mixer.clipAction(clip);// action.play();});
}

Three.js支持的颜色格式？

.Color(0xa0a0a0); .Color("#8080ff") .Color("red")

如何全局使用Three.js

1、在main.js中引入Three.js库以及所需的组件

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

2、在Vue的原型链上设置全局变量，以便在整个应用中可以访问到Three.js及其组件

Vue.prototype.$THREE = THREE;
Vue.prototype.$OrbitControls = OrbitControls;
Vue.prototype.$GLTFLoader = GLTFLoader;

3、这样做后，可以在整个Vue应用的任何地方使用

通过以下方法，来访问Three.js库this.$THREE
this.$OrbitControls
this.$GLTFLoader

更多操作，Three.js官网  >>

Three.js官网icon-default.png?t=N7T8https://threejs.org/

创作不易，感觉有用，就一键三连，感谢(●'◡'●)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/822075.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式4-16

嵌入式4-16

tftpd #include <myhead.h> #define SER_IP "192.168.125.243" //服务器IP地址 #define SER_PORT 69 //服务器端口号 #define CLI_IP "192.168.125.244" //客户端IP地址 #define CLI_PORT 8889 //客户端端…
阅读更多...
解读科技智慧公厕改变生活的革命性创新之路

解读科技智慧公厕改变生活的革命性创新之路

公共厕所&#xff0c;作为城市基础设施的一部分&#xff0c;一直以来都备受人们诟病。脏乱差、设施老旧、管理混乱&#xff0c;成为公共厕所长期存在的问题。然而&#xff0c;随着科技的不断进步&#xff0c;智慧公厕应运而生&#xff0c;为解决公厕难题&#xff0c;智慧公厕源…
阅读更多...
【ElasticSearch】安装（bug篇）

【ElasticSearch】安装（bug篇）

以下解决办法参考自网友们的分享 1. JDK绑定问题 但其实这样也没有问题&#xff0c;因为内嵌的jdk版本与当前的es版本是适配的 但是&#xff0c;如果内嵌的jdk与当前es不适配&#xff0c;那就要修改配置文件 / 添加环境变量&#xff0c;让es启动的时候能扫描到我们本地的jdk …
阅读更多...
校园水电能源智能化管理系统

校园水电能源智能化管理系统

校园作为大量人员集聚的场所&#xff0c;水电能源的高效管理对于降低运营成本、保障安全稳定供应以及推动可持续发展至关重要。校园水电能源智能化管理系统应运而生&#xff0c;通过先进技术的应用&#xff0c;实现了对校园水电资源的智能监控、计量和管理。本文将从系统背景、…
阅读更多...
Elasticsearch：下载、启动和账号密码登录

Elasticsearch：下载、启动和账号密码登录

因为我的电脑是 window&#xff0c;以下都是以 window 环境举例。 一、下载 Elasticsearch 是使用 java 开发的&#xff0c;且 7.8 版本的 ES 需要 JDK 版本 1.8 以上&#xff0c;安装前注意java环境的准备。 官网地址&#xff1a;https://www.elastic.co/cn/ 下载地址&#xf…
阅读更多...
最新可用免费云服务器推荐汇总

最新可用免费云服务器推荐汇总

随着云计算技术的不断发展&#xff0c;越来越多的企业和个人开始关注并尝试使用云服务器。云服务器以其高度的灵活性、可扩展性和成本效益&#xff0c;成为了部署应用和存储数据的理想选择。本文将为大家汇总目前市场上最新可用的免费云服务器资源&#xff0c;帮助大家更好地了…
阅读更多...
Linux基础｜线程池Part.1｜线程池的定义和运行逻辑

Linux基础｜线程池Part.1｜线程池的定义和运行逻辑

线程池的定义和运行逻辑 多线程的问题&#xff1a; 如果并发的线程数量很多&#xff0c;并且每个线程都是执行一个时间很短的任务就结束了&#xff0c;这样频繁创建线程就会大大降低系统的效率&#xff0c;因为频繁创建线程和销毁线程需要时间。 那么一个很自然的想法就出现了…
阅读更多...
AI音乐，8大变现方式——Suno：音乐版的ChatGPT - 第505篇

AI音乐，8大变现方式——Suno：音乐版的ChatGPT - 第505篇

悟纤之歌 这是利用AI为自己制作的一首歌&#xff0c;如果你也感兴趣&#xff0c;可以花点时间阅读下本篇文章。 ​ 导读 随着新一代AI音乐创作工具Suno V3、Stable audio2.0、天工SkyMusic的发布&#xff0c;大家玩自创音乐歌曲&#xff0c;玩的不亦乐乎。而有创业头脑的朋友…
阅读更多...
mysql 转pg 两者不同的地方

mysql 转pg 两者不同的地方

因项目数据库&#xff08;原来是MySQL&#xff09;要改成PostgreSQL。 项目里面的sql要做一些调整。 1&#xff0c;写法上的区别&#xff1a; 1&#xff0c;数据准备&#xff1a; 新建表格&#xff1a; CREATE TABLE property_config ( CODE VARCHAR(50) NULL…
阅读更多...
【UE5.1】使用MySQL and MariaDB Integration插件——（4）修改、插入、删除数据

【UE5.1】使用MySQL and MariaDB Integration插件——（4）修改、插入、删除数据

目录 效果 步骤 一、修改 二、插入、删除 在上一篇博客&#xff08;【UE5.1】使用MySQL and MariaDB Integration插件——&#xff08;3&#xff09;表格形式显示数据&#xff09;基础上继续实现修改、插入和删除数据库数据的功能 效果 修改数据&#xff1a; 插入数据&…
阅读更多...
java线程（1）

java线程（1）

1、多线程启动 有两种启动方式 1、实现Runable接口 2、继承Thread类并且重写run&#xff08;&#xff09;方法 在执行进程中的任务才会产生线程&#xff0c;所以需要实现Runable接口并且重写run&#xff08;&#xff09;方法&#xff0c;然后将Runable的实现对象作为参数传…
阅读更多...
女上司问我：误删除PG百万条数据，可以闪回吗？

女上司问我：误删除PG百万条数据，可以闪回吗？

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验 擅长主流数据Oracle、MySQL、PG、openGauss运维 备份恢复&#xff0c;安装迁移&#xff0c;性能优化、故障应急处理等可提供技术业务&#xff1a; 1.DB故障处理/疑难杂症远程支援 2.Mysql/PG/Oracl…
阅读更多...
UML 介绍

UML 介绍

前言 UML 简介。 文章目录 前言一、简介1、事务2、关系1&#xff09;依赖2&#xff09;关联聚合组合 3&#xff09;泛化4&#xff09;实现 二、类图三、对象图四、用例图五、交互图1、序列图&#xff08;顺序图&#xff09;2、通信图 六、状态图七、活动图八、构件图&#xff0…
阅读更多...
【数据结构（七）】二叉树

【数据结构（七）】二叉树

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你学更多数据结构的知识 目录 1.前言2.树形结构2.1树的概念2.2常见概念2.3树的表示形式 3.二叉树3.1概念3…
阅读更多...
ES源码二：集群启动过程

ES源码二：集群启动过程

命令行参数解析 Elasticsearch&#xff1a;在main里面创建了Elasticsearch实例&#xff0c;然后调用了main方法&#xff0c;这个main方法最终会调用到父类Command的main方法 这里做了几件事&#xff1a; 注册一个 ShutdownHook&#xff0c;其作用就是在系统关闭的时候捕获IO…
阅读更多...
【Web】陇原战“疫“2021网络安全大赛 题解

【Web】陇原战“疫“2021网络安全大赛 题解

目录 CheckIN eaaasyphp EasyJaba CheckIN 拿到附件&#xff0c;贴出关键代码 func getController(c *gin.Context) {cmd : exec.Command("/bin/wget", c.QueryArray("argv")[1:]...)err : cmd.Run()if err ! nil {fmt.Println("error: ", …
阅读更多...
C++11(下篇)

C++11(下篇)

文章目录 C111. 模版的可变参数1.1 模版参数包的使用 2. lambda表达式2.1 Lambda表达式语法捕获列表说明 2.2 lambda的底层 3. 包装器3.1 function包装器3.2 bind 4. 线程库4.1 thread类4.2 mutex类4.3 atomic类4.4 condition_variable类 C11 1. 模版的可变参数 C11支持模版的…
阅读更多...
当全连接队列满了，tcp客户端收到服务端RST信令的模拟

当全连接队列满了，tcp客户端收到服务端RST信令的模拟

当tcp服务端全连接队列满了后&#xff0c;并且服务端也不accept取出连接&#xff0c;客户端再次连接时&#xff0c;服务端能够看到SYN_RECV状态。但是客户端看到的是ESTABLISHED状态&#xff0c;所以客户端自认为成功建立了连接&#xff0c;故其写往服务端写数据&#xff0c;发…
阅读更多...
鸿蒙入门02-首次安装和配置

鸿蒙入门02-首次安装和配置

注&#xff1a;还没有安装编辑器&#xff08; deveco studio &#xff09;的小伙伴请看鸿蒙入门01-下载和安装-CSDN博客 首次安装配置 编辑器&#xff08; deveco studio &#xff09;安装完毕以后需要进入配置界面进行相关配置配置完毕以后才可以正常使用 环境配置&#xf…
阅读更多...
中国人工智能产业年会智能交通与自动驾驶专题全景扫描

中国人工智能产业年会智能交通与自动驾驶专题全景扫描

中国人工智能产业年会&#xff08;CAIIAC&#xff09;是中国人工智能技术发展和应用的重要展示平台&#xff0c;不仅关注创新&#xff0c;还涵盖了市场和监管方面的内容&#xff0c;对于促进人工智能领域的发展起到了重要作用。年会汇集了来自学术界、工业界和政府的专家&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023