【Threejs】从零开始(十)--加载gltf模型和压缩后的模型
一.加载普通的gltf模型
glTF(gl传输格式)是一种开放格式的规范 (open format specification), 用于更高效地传输、加载3D内容。该类文件以JSON(.gltf)格式或二进制(.glb)格式提供, 外部文件存储贴图(.jpg、.png)和额外的二进制数据(.bin)。一个glTF组件可传输一个或多个场景, 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。
1.导入
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
2.创建实例
//实例化加载器
const loader = new GLTFLoader()
3.导入模型文件
loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})
这样就可以导入我们的模型文件

如果画面是一片漆黑的话,调整一下场景的颜色,因为没有光源,模型是纯黑色的,在黑色背景下看不到。
scene.background = new THREE.Color(0x999999)
想让我们的模型有颜色可以加入光源,也可以加入背景贴图,用环境光照亮模型。
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'// 全景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./assets/night.hdr', (texture) => {//设置球型映射texture.mapping = THREE.EquirectangularReflectionMapping // scene.background = texture // 设置背景scene.environment = texture // 设置环境//反射贴图// material.envMap = texture
})

二、加载压缩的模型
对于一些占比比较大模型,往往会进行压缩。对于这种压缩的模型,我们直接导入会报错THREE.GLTFLoader: No DRACOLoader instance provided.

这时我们需要使用DRACOLoader(一个用于加载经过Draco压缩的图形库)来处理。
1.导入DRACOLoader
// 解压模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
2.创建实例
// 解压模型
const dracoLoader = new DRACOLoader()
3.设置解压路径
//设置解压库的路径
dracoLoader.setDecoderPath('./draco/')
在这里我们需要在node_modules\three\examples\jsm\libs文件下找到draco文件,将改文件复制到public文件下。
4.加载模型
//实例化加载器
const loader = new GLTFLoader()
// 设置解压库
loader.setDRACOLoader(dracoLoader)loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})

5.全部代码
<template>
</template><script setup>
// 导入three
import * as THREE from 'three' // 导入threejs
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 解压模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x999999)// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)//辅助坐标系
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//自适应窗口
window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)
})// 全景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./assets/night.hdr', (texture) => {//设置球型映射texture.mapping = THREE.EquirectangularReflectionMapping // scene.background = texture // 设置背景scene.environment = texture // 设置环境//反射贴图// material.envMap = texture
})// 解压模型
const dracoLoader = new DRACOLoader()
//设置解压库的路径
dracoLoader.setDecoderPath('./draco/')//实例化加载器
const loader = new GLTFLoader()
// 设置解压库
loader.setDRACOLoader(dracoLoader)
// 加载模型
// loader.load('./models/mingzhu.glb', function (gltf) {
// scene.add(gltf.scene)// console.log(gltf)
// }, undefined, function (error) {
// console.error(error)
// })
loader.load('./models/car.glb', function (gltf) {scene.add(gltf.scene)console.log(gltf)
}, undefined, function (error) {console.error(error)
})// 创建场景fog
scene.fog = new THREE.Fog(0x000000, 0.5, 50)
//创建场景指数雾
// scene.fog = new THREE.FogExp2(0x000000, 0.1)// 渲染循环
function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)
}
animate()</script><style lang="scss" scoped>
</style>
相关文章:
【Threejs】从零开始(十)--加载gltf模型和压缩后的模型
一.加载普通的gltf模型 glTF(gl传输格式)是一种开放格式的规范 (open format specification), 用于更高效地传输、加载3D内容。该类文件以JSON(.gltf)格式或二进制(.glb)…...
国标GB28181平台EasyGBS在安防视频监控中的信号传输(电源/视频/音频)特性及差异
在现代安防视频监控系统中,国标GB28181协议作为公共安全视频监控联网系统的国家标准,该协议不仅规范了视频监控系统的信息传输、交换和控制技术要求,还为不同厂商设备之间的互联互通提供了统一的框架。EasyGBS平台基于GB28181协议,…...
Day9 神经网络的偏导数基础
多变量函数与神经网络 在神经网络中,我们经常遇到多变量函数。这些函数通常描述了网络的输入、权重、偏置与输出之间的关系。例如,一个简单的神经元输出可以表示为: z f ( w 1 x 1 w 2 x 2 … w n x n b ) z f(w_1x_1 w_2x_2 \ldots…...
day4:tomcat—maven-jdk
一,java项目部署过程 编译:使用javac命令将.java源文件编译成.class宇节码文件打包:使用工具如maven或Gradle将项目的依赖、资源和编译后的字节码打包成一个分发格式,如.jar文件,或者.war文件(用于web应用)…...
apache-tomcat-6.0.44.exe Win10
apache-tomcat-6.0.44.exe Win10...
Redis(2)常用命令
安装Redis 现在我们安装Redis 5,Redis安装在Linux上面安装,如果想在本机上面安装多个Redis的话,就要使用Docker。 在Ubuntu上面安装: 切换到root用户使用apt命令搜索相关的软件包(apt search redis)apt …...
【原生js案例】ajax的简易封装实现后端数据交互
ajax是前端与后端数据库进行交互的最基础的工具,第三方的工具库比如jquery,axios都有对ajax进行第二次的封装,fecth是浏览器原生自带的功能,但是它与ajax还是有区别的,总结如下: ajax与fetch对比 实现效果 代码实现 …...
安卓环境配置及打开新项目教程,2024年12月20日最新版
1.去官网下载最新的Android Studio,网址:https://developer.android.com/studio?hlzh-cn 2.下载加速器,注册账号,开启加速器。网址:放在文末。 3.下载安卓代码,项目的路径上不能有中文,特别是…...
Docker 安装 禅道-21.2版本-外部数据库模式
Docker 安装系列 1、拉取最新版本(zentao 21.2) [rootTseng ~]# docker pull hub.zentao.net/app/zentao Using default tag: latest latest: Pulling from app/zentao 55ab1b300d4b: Pull complete 6b5749e5ef1d: Pull complete bdccb03403c1: Pul…...
写SQL太麻烦?免费搭建 Text2SQL 应用,智能写 SQL | OceanBase AI 实践
自OceanBase 4.3.3版本推出以来,向量检索的能力受到了很多客户的关注,也纷纷表达希望OB能拓展更多 多模数据库大模型 的AI应用实践。 在上篇文章 👉 OceanBase LLM,免费构建你的专属 AI 助手 ,我们介绍了如何去搭建一…...
数据分析实战—鸢尾花数据分类
1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class(种类)项中的异常值,其他异常值也同时处理 。 import pandas as pd from sklearn.datasets import load_iris pd.set_option(display.max_columns, N…...
【专题】2024抖音电商母婴行业分析报告汇总PDF洞察(附原数据表)
原文链接:https://tecdat.cn/?p38651 在数字化浪潮的席卷下,抖音电商母婴行业正经历着深刻变革。当下,年轻一代父母崛起,特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…...
堆栈粉碎的原理与预防攻击措施
1、堆栈粉碎的原理 “堆栈粉碎”(stack smashing)指的是在计算机程序中利用缓冲区溢出漏洞来修改或破坏函数调用栈的过程。以下是其基本原理: 缓冲区溢出:当程序接收输入数据时,如果没有适当的边界检查和验证&#x…...
Flutter组件————AppBar
AppBar 是 Flutter 中用于创建应用程序顶部栏的组件,它遵循 Material Design 规范。 参数: 参数名称类型描述titleWidget设置 AppBar 中的标题文本或自定义标题小部件。automaticallyImplyLeadingbool决定是否自动添加返回按钮(如果页面不是…...
请问深度学习直接缝了别的模型,在论文中这种创新点应该如何描述呢?
作者:星辰 链接:https://www.zhihu.com/question/599461738/answer/3289126344 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作为散养硕士,我们希望能早早发小论文,…...
微流控专题 | 微流体应用说明——藻酸盐微球生产简介
基于水凝胶的递送系统正被越来越多地应用于各个领域,包括封装、保护以及在制药、保健品、食品工业中释放生物活性物质,还用于细胞/细菌/微生物的培养与植入,以及生物研究中基于细胞的基因操作。 尺寸在 50m 范围内的高度单分散的藻酸盐微球 —…...
【前后端】HTTP网络传输协议
近期更新完毕,建议关注、收藏! http请求 URL 严格意义上应该是URI http or https http不加密不安全;https加密协议(公网使用) http端口号80 https端口号443GET or POST GET和POST是HTTP请求的两种基本方法. 因为POST需…...
Fastdfs V6.12.1集群部署(arm/x86均可用)
文章目录 一、 Fastdfs 介绍二、部署 信息三、步骤tracker/storage 机器的 compose 内容storage 机器的 composetracker 与 storage 启动目录层级与配置文件测试测试集群扩容与缩减注意事项 一、 Fastdfs 介绍 FastDFS 是一款高性能的分布式文件系统,特别适合用于存…...
【LeetCode每日一题】——434.字符串中的单词数
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【时空频度】八【代码实现】九【提交结果】 一【题目类别】 字符串 二【题目难度】 简单 三【题目编号】 434.字符串中的单词数 四【题目描述】 统计字符串中的单词个…...
windows C#-使用构造函数
实例化类或结构时,将会调用其构造函数。 构造函数与该类或结构具有相同名称,并且通常初始化新对象的数据成员。 在下面的示例中,通过使用简单构造函数定义了一个名为 Taxi 的类。 然后使用 new 运算符对该类进行实例化。 在为新对象分配内存…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果:嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
命令行关闭Windows防火墙
命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)方法二:CMD命令…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中,经常会遇到端口被占用的问题(如 8080、3306 等常用端口)。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口,帮助你高效解决此类问题。 一、准…...
第22节 Node.js JXcore 打包
Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...
Git 命令全流程总结
以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结,按操作场景分类整理: 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...
