【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 运算符对该类进行实例化。 在为新对象分配内存…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
