站在JavaScript的视角去看,HTML的DOM和GLTF的Json数据。
很多前端小伙伴没有见过、操作过gltf文件,对非常懵逼,本文从前端小伙伴最熟悉的dom模型为切入口,以类别的方式来学习一下gltf文件。
一、结构与组织形式
- HTML DOM(文档对象模型):
-
- 树形结构:HTML DOM 将 HTML 页面表示为一个树形结构,树的根节点是 document 对象,每个 HTML 元素(如 <div>、<p>、<img> 等)都是树上的节点,节点之间存在父子、兄弟等层级关系。例如,一个简单的 HTML 页面结构如下:
<!DOCTYPE html>
<html><body><div id="main"><p>这是一段文本</p><img src="image.jpg" alt="示例图片"></div>
</body></html>
在 DOM 中,document 是根,body 是 document 的子节点,div 又是 body 的子节点,p 和 img 则是 div 的子节点,以此类推形成一棵完整的树。
- 标签属性与文本内容:每个 DOM 节点有对应的 HTML 标签属性(如 id、class、src 等),同时可能包含文本内容(像 p 标签里的文字),这些属性和内容都可以通过 JavaScript 进行访问和修改。
- GLTF JSON:
-
- 对象层次结构:GLTF 的 JSON 部分同样呈现出一种层次化的对象结构,不过它围绕着 3D 模型与场景的描述来组织。如前面所述,包含 asset、scenes、nodes、meshes 等不同层级的对象来完整定义 3D 资源,例如:
{"asset": {"version": "2.0","generator": "SomeTool"},"scenes": [{"name": "Scene1","nodes": [0]}],"nodes": [{"name": "ModelNode","translation": [0, 0, 0],"rotation": [0, 0, 0, 1],"scale": [1, 1, 1]}],"meshes": [{"name": "Mesh1","primitives": [{"attributes": {"POSITION": 0,"NORMAL": 1},"indices": 2,"material": 0}]}]
}
这里不同的对象相互关联,共同构建起 3D 模型在场景中的布局、几何形状、外观等信息的描述体系。
- 特定语义字段:有着众多用于描述 3D 相关概念的特定字段,像节点的位置(translation)、旋转(rotation)、缩放(scale)属性,材质相关的 pbrMetallicRoughness 等字段用于定义外观,与 HTML DOM 基于 HTML 标签属性的组织方式有明显不同的语义内涵。
二、JavaScript 操作目的
- HTML DOM:
-
- 页面交互与动态更新:主要用于实现网页的交互效果,例如响应用户的点击事件(通过给 DOM 元素添加 onclick 等事件监听器),动态修改页面内容(改变元素的文本、样式属性等),实现页面的局部刷新、元素的显示隐藏、动画效果等。比如以下 JavaScript 代码可以改变一个 p 标签的文本内容:
const pElement = document.querySelector('p');
pElement.textContent = '新的文本内容';
- DOM 遍历与查询:常常需要在 DOM 树中查找特定的元素,可通过像 document.getElementById、document.querySelectorAll 等方法来定位元素,以便后续进行相关操作。例如,获取所有具有某个类名的元素:
const elements = document.querySelectorAll('.my-class');
- GLTF JSON(通过 JavaScript 在相关 3D 应用场景下操作):
-
- 3D 模型渲染与展示:JavaScript 代码配合 WebGL 等 3D 渲染技术,读取 GLTF JSON 中的结构和属性信息,将 3D 模型渲染到浏览器页面或其他支持的平台上。比如解析 nodes 的位置和 meshes 的几何形状等数据,构建相应的 3D 图形对象用于渲染。
- 3D 场景交互与修改:实现对 3D 场景中模型的交互操作,像根据用户输入旋转、平移模型(通过修改 nodes 的 translation、rotation 等属性),或者动态更换模型的材质(改变 materials 相关的配置字段)等。以下是简单示意如何修改一个 GLTF 模型节点的位置(假设已经有解析 GLTF 并获取到对应节点对象的代码基础):
const modelNode = getModelNodeFromGltf(); // 假设的获取节点方法
modelNode.translation[0] = 1; // 改变 x 轴坐标位置
modelNode.translation[1] = 0.5; // 改变 y 轴坐标位置
// 然后重新渲染场景以体现位置变化
renderScene();
三、操作方式与 API
- HTML DOM:
-
- 标准 DOM API:JavaScript 内置了一套完善的 DOM API,涵盖了元素的创建(如 document.createElement)、添加删除(parentElement.appendChild、parentElement.removeChild)、属性获取与设置(element.getAttribute、element.setAttribute)等丰富的操作方法,开发者可以直接使用这些接口来操作 DOM 树。
- 事件处理机制:有专门的事件绑定和监听机制,通过给元素添加类似 onclick、onmouseover 等事件属性(或者使用 addEventListener 方法)来响应各种用户操作引发的事件,从而实现交互逻辑。例如:
const button = document.createElement('button');
button.textContent = '点击我';
button.addEventListener('click', function () {alert('你点击了按钮');
});
document.body.appendChild(button);
- GLTF JSON:
-
- 自定义解析与处理逻辑:并没有像 DOM API 那样统一内置在 JavaScript 语言环境中的标准 API 来操作 GLTF JSON。通常需要借助第三方的 GLTF 解析库(如 three.js 中相关的 GLTF 加载和处理模块等),这些库会提供自己的一套方法来解析 JSON 数据,将其转换为便于操作的 JavaScript 对象,再基于这些对象进行如前面提到的 3D 相关操作。例如使用 three.js 加载 GLTF 文件并操作模型的简单代码示例:
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';const scene = new THREE.Scene();
const loader = new GLTFLoader();loader.load('model.gltf', function (gltf) {const model = gltf.scene;scene.add(model);// 后续可以对 model 进行如位置等属性的修改等操作animate(); // 假设的渲染循环函数用于展示模型
}, function (xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function (error) {console.log('An error happened', error);
});
- 与 3D 渲染集成:操作 GLTF JSON 往往是和 3D 渲染紧密结合的,在解析出模型结构等信息后,需要将其传递给合适的 3D 渲染引擎(如 WebGL 底层结合 three.js 这样的上层库)来进行实际的图形绘制,而不像 DOM 操作主要聚焦于页面结构和内容展示层面的 2D 处理。
四、数据变化频率与更新特点
- HTML DOM:
-
- 高频率动态变化:在现代网页应用中,DOM 的更新频率往往较高,尤其是在实现复杂交互界面、实时数据展示(如聊天窗口、实时图表等场景)时,会频繁地修改 DOM 元素的属性、内容或者添加删除元素,以响应用户操作和后端推送的数据变化。
- 局部更新与重绘:为了性能优化,通常会采用局部 DOM 更新的方式,只改变需要变化的部分,浏览器会智能地进行对应的局部重绘,避免整个页面重新渲染,像使用 innerHTML 等属性有选择地更新某个元素内部内容或者通过 classList 修改元素的类名来切换样式实现动态效果。
- GLTF JSON(在 3D 场景中):
-
- 相对低频变化(取决于应用场景):在一些静态 3D 展示场景中,模型和场景的结构等数据一旦加载解析完成后可能长时间不会变动;而在交互性较强的 3D 应用(如 3D 游戏中角色模型动作变化等),其数据变化频率会随着用户交互而变高,但总体相对 DOM 在常规网页交互中的更新频率还是可能稍低一些。
- 整模型或场景更新关联渲染:当对 GLTF JSON 里的关键数据(如模型的几何形状、材质、节点位置等)进行修改后,一般需要重新进行整个模型或者相关部分的 3D 渲染,不像 DOM 那样可以较细粒度地进行局部内容更新,因为 3D 图形的渲染是基于完整的模型数据和场景配置来进行的。
总体而言,HTML 的 DOM 文件和 GLTF 的 JSON 文件从 JavaScript 操作角度有着不同的结构特点、操作目的、方式以及数据更新特点,分别服务于网页 2D 交互展示和 3D 模型相关应用这两个不同的应用场景需求。
相关文章:
站在JavaScript的视角去看,HTML的DOM和GLTF的Json数据。
很多前端小伙伴没有见过、操作过gltf文件,对非常懵逼,本文从前端小伙伴最熟悉的dom模型为切入口,以类别的方式来学习一下gltf文件。 一、结构与组织形式 HTML DOM(文档对象模型): 树形结构:HT…...
js --- 获取时间戳
介绍 使用js获取当前时间戳 语法 Date.now()...
冰蝎v3.0 beta7来啦
我用了一台kali,一台centos,一台windows,做了一个文件上传和一个反弹shell实验,载荷是AES加密的,终于感受到了对加密流量的无可奈何~ kali(php8.1)centos(php7.1)window…...
将markdown文件和LaTex公式转为word
通义千问等大模型生成的回答多数是markdown类型的,需要将他们转为Word文件 一 pypandoc 介绍 1. 项目介绍 pypandoc 是一个用于 pandoc 的轻量级 Python 包装器。pandoc 是一个通用的文档转换工具,支持多种格式的文档转换,如 Markdown、HTM…...
Elasticsearch Kibana的下载与安装
1.下载Elasticsearch安装包 Elastic — 搜索 AI 公司 | Elastic Download Elasticsearch | Elastic 2.下载Kibana安装包 Download Kibana Free | Get Started Now | Elastic http://localhost:5601/?code708785...
WPS计算机二级•幻灯片的配色、美化与动画
听说这是目录哦 配色基础颜色语言❤️使用配色方案🩷更改PPT的颜色🧡PPT动画添加的原则💛PPT绘图工具💚自定义设置动画💙使用动画刷复制动画效果🩵制作文字打字机效果💜能量站😚 配色…...
高精度乘法(高×高)
高精度乘法(高高) 前言 ACWing算法基础课讲解了高低的乘法,这里高高作为一个进一步的补充,也是对闫总的板子做一个补充。 以下内容改编自《洛谷深入浅出》123页,我对代码进行了一点修改。 A*B Problem P1303 题目…...
出现 Can not find ‘Converter‘ support class Year 解决方法
目录 前言1. 问题所示2. 原理分析3. 解决方法前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. 问题所示 执行代码的时候,出现如下问题: 2025-02-03 19:16:23.638 |...
一表总结 Java 的3种设计模式与6大设计原则
设计模式通常分为三大类:创建型、结构型和行为型。 创建型模式:主要用于解决对象创建问题结构型模式:主要用于解决对象组合问题行为型模式:主要用于解决对象之间的交互问题 创建型模式 创建型模式关注于对象的创建机制…...
蓝桥与力扣刷题(141 环形链表)
题目:给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的…...
Cursor如何使用Google Gemini以及碰到的坑
Cursor如何使用Google Gemini以及碰到的坑 Cursor介绍下载安装Google Gemini介绍Google Gemini 官网申请Google Gemini API网址 配置Cursor使用Google Gemini打开Corsur设置 Cursor介绍 Cursor是一款基于人工智能的代码编辑器,旨在帮助开发者更高效地编写代码。…...
e2studio开发RA4M2(6)----GPIO外部中断(IRQ)配置
e2studio开发RA4M2.6--GPIO外部中断(IRQ)配置 概述视频教学样品申请硬件准备参考程序源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置SWD调试口设置GPIO口配置按键中断配置中断回调函数主程序 概述 GPIO(通用输入/输出&a…...
day38|leetcode 322零钱兑换,279.完全平方数,139.单词拆分
322. 零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的数量是…...
Windsurf cursor vscode+cline 与Python快速开发指南
Windsurf简介 Windsurf是由Codeium推出的全球首个基于AI Flow范式的智能IDE,它通过强大的AI助手功能,显著提升开发效率。Windsurf集成了先进的代码补全、智能重构、代码生成等功能,特别适合Python开发者使用。 Python环境配置 1. Conda安装…...
使用shell命令安装virtualbox的虚拟机并导出到vagrant的Box
0. 安装virtualbox and vagrant [rootolx79vagrant ~]# cat /etc/resolv.conf #search 114.114.114.114 nameserver 180.76.76.76-- install VirtualBox yum install oraclelinux-developer-release-* wget https://yum.oracle.com/RPM-GPG-KEY-oracle-ol7 -O /etc/pki/rpm-g…...
【25考研】南开软件考研复试复习重点!
一、复试内容 复试采取现场复试的方式。复试分为笔试、机试和面试三部分。三部分合计100分,其中笔试成绩占30%、机试成绩占30%、面试成绩占40%。 1.笔试:专业综合基础测试 考核方式:闭卷考试,时长为90分钟。 笔试考查内容范围…...
设计模式 - 行为模式_Template Method Pattern模板方法模式在数据处理中的应用
文章目录 概述1. 核心思想2. 结构3. 示例代码4. 优点5. 缺点6. 适用场景7. 案例:模板方法模式在数据处理中的应用案例背景UML搭建抽象基类 - 数据处理的 “总指挥”子类定制 - 适配不同供应商供应商 A 的数据处理器供应商 B 的数据处理器 在业务代码中整合运用 8. 总…...
C++基础(2)
目录 1. 引用 1.1 引用的概念和定义 1.2 引用的特性 1.3 引用的使用 2. 常引用 3. 指针和引用的关系 4. 内联函数inline 5. nullptr 1. 引用 1.1 引用的概念和定义 引用不是新定义一个变量,而是给已存在变量取了一个别名,编译器不会为引用变量开…...
C#中的if判断语句详解
SEO Meta Description: 了解C#中的if判断语句,包括基本用法、嵌套使用、多条件判断以及最佳实践,全面掌握条件控制在C#编程中的应用。 介绍 在编程中,条件判断语句是控制程序流程的关键部分。C#提供了多种条件判断语句,其中 if语…...
PythonStyle MVC 开发框架
在 Python 中,MVC(Model - View - Controller,模型 - 视图 - 控制器)是一种常见的软件设计模式,它将应用程序分为三个主要部分,各自承担不同的职责,以提高代码的可维护性、可扩展性和可测试性。…...
excel实用问题:提取文字当中的数字进行运算
0、前言: 这里汇总在使用excel工作过程中遇到的问题,excel使用wps版本,小规模数据我们自己提取数据可行,大规模数据就有些难受了,因此就产生了如下处理办法。 需求:需要把所有文字当中的数字提取出来&…...
FFmpeg:多媒体处理的瑞士军刀
FFmpeg:多媒体处理的瑞士军刀 前言 FFmpeg 是一个功能强大且跨平台的开源多媒体框架,广泛应用于音视频处理领域。 它由多个库和工具组成,能够处理各种音视频格式,涵盖编码、解码、转码、流处理等多种操作。 无论是专业视频编辑…...
在K8S中,如何把某个worker节点设置为不可调度?
在Kubernetes中,如果你想要把一个worker节点设置为不可调度,意味着你不想让Kubernetes调度器在这个节点上调度新的Pod。这通常用于维护或升级节点,或者当节点遇到硬件故障或性能问题时,要将某个worker节点设置为不可调度。 方法1…...
雷赛LC2000
【一,概述】 这个是中型PLC 【二,外观】 网口编号: 【2】【3】 //默认ip:192.168.1.xxx 【0】【1】 可视化授权不如禾川Q系。 【三,总线轴】 因为本次带的轴是台达A2系列伺服 A2最快总线是【1ms】的倍数…...
Android学习20 -- 手搓App2(Gradle)
1 前言 昨天写了一个完全手搓的:Android学习19 -- 手搓App-CSDN博客 后面谷歌说不要用aapt,d8这些来搞。其实不想弄Gradle的,不过想着既然开始了,就多看一些。之前写过一篇Gradle,不过是最简单的编译,不涉…...
Mac M1 Comfyui 使用MMAudio遇到的问题解决?
问题1: AssertionError: Torch not compiled with CUDA enabled? 解决办法:修改代码以 CPU 运行 第一步:找到 /ComfyUI/custom_nodes/ComfyUI-MMAudio/mmaudio/ext/autoencoder/vae.py文件中的下面这两行代码 self.data_mean nn.Buffer(t…...
Vim的基础命令
移动光标 H(左) J(上) K(下) L(右) $ 表示移动到光标所在行的行尾, ^ 表示移动到光标所在行的行首的第一个非空白字符。 0 表示移动到光标所在行的行首。 W 光标向前跳转一个单词 w光标向前跳转一个单词 B光标向后跳转一个单词 b光标向后跳转一个单词 G 移动光标到…...
【后端面试总结】ES的_template与_index_template技术详解
在Elasticsearch(简称ES)中,索引模板(Index Template)和组件模板(Component Template)是两种用于预定义索引配置的强大工具。它们允许用户在索引创建时自动应用预设的设置、映射(Map…...
使用LightGlue进行图像配准并提取图像重叠区域
发表日期:2023年6月23日 项目地址:https://github.com/cvg/LightGlue https://github.com/cvg/glue-factory/ LightGlue是一个在精度上媲美Superglue,但在速度上比Superglue快一倍的模型。通过博主实测,LightGlue的配准效果比Su…...
RK3568使用QT搭建TCP服务器和客户端
文章目录 一、让RK3568开发板先连接上wifi二、客户端代码1. `widget.h` 文件2. `widget.cpp` 文件**详细讲解**1. **`Widget` 类构造函数 (`Widget::Widget`)**2. **UI 布局 (`setupUI`)**3. **连接按钮的槽函数 (`onConnectClicked`)**4. **发送消息按钮的槽函数 (`onSendMess…...
解释 Java 中的垃圾回收机制,以及如何优化垃圾回收性能?
Java中的垃圾回收机制是一种自动管理内存的机制,它负责在程序运行过程中检测和清除不再被引用的对象,从而释放其占用的内存空间。 垃圾回收机制通过标记-清除、复制、标记-整理等算法实现,能够有效避免内存泄漏,提高程序的性能和…...
读写锁: ReentrantReadWriteLock
在多线程编程场景中,对共享资源的访问控制极为关键。传统的锁机制在同一时刻只允许一个线程访问共享资源,这在读写操作频繁的场景下,会因为读操作相互不影响数据一致性,而造成不必要的性能损耗。ReentrantReadWriteLock࿰…...
2022ACMToG | 寻找快速的去马赛克算法
文章标题:Searching for Fast Demosaicking Algorithms 1. Abstract 本文提出了一种方法,用于在给定损失函数和训练数据的情况下,自动合成高效且高质量的去马赛克算法,涵盖各种计算开销。该方法执行多目标的离散-连续优化&#x…...
暴力破解与验证码安全
目录 前言 暴力破解:简单粗暴的黑客攻击手段 暴力破解的前提条件 暴力破解的定义与原理 常见的暴力破解工具 暴力破解的常见场景 暴力破解的危害 验证码:抵御暴力破解的第一道防线 验证码的定义与作用 验证码的工作原理 验证码的类型 验证码…...
基于区块链的数字身份认证:安全与隐私的未来
友友们好! 我的新专栏《Python进阶》正式启动啦!这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏,无论你是已经有一定基础的开发者,还是希望深入挖掘Python潜力的爱好者,这里都将是你不可错过的宝藏。 在这个专栏中,你将会找到: ● 深入解析:每一篇文章都将…...
ComfyUI工作流 图像反推生成人像手办人像参考(SDXL版)
文章目录 图像反推生成人像手办人像参考SD模型Node节点工作流程效果展示开发与应用图像反推生成人像手办人像参考 本工作流旨在通过利用 Stable Diffusion XL(SDXL)模型和相关辅助节点,实现高效的人像参考生成和手办设计。用户可通过加载定制的模型、LORA 调整和控制节点对…...
MyBatis-Plus速成指南:基本CURD
BaseMapper: MyBatis-Plus 中的基本 CURD 在内置的 BaseMapper 中都已得到了实现,我们可以直接使用接口,接口如下: // // Source code recreated from a .class file by IntelliJ IDEA // (powered by FernFlower decompiler) //p…...
K8S集群部署--亲测好用
最近在自学K8S,花了三天最后终于成功部署一套K8S Cluster集群(masternode1node2) 在这里先分享一下具体的步骤,后续再更新其他的内容:例如部署期间遇到的问题及其解决办法。 部署步骤是英文写的,最近想练…...
【C++】B2124 判断字符串是否为回文
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述输入格式:输出格式:样例: 💯方法一:我的第一种做法思路代码实现解析 💯方法二:我…...
大语言模型概述
一、主流大语言模型(LLMs) GPT系列(OpenAI) 基于Transformer解码器架构,以生成能力著称,代表产品包括ChatGPT(GPT-3.5/4),支持多轮对话、文本生成和复杂推理。其优势在于…...
【网络】应用层协议http
文章目录 1. 关于http协议2. 认识URL3. http协议请求与响应格式3.1 请求3.2 响应 3. http的常见方法4. 状态码4.1 常见状态码4.2 重定向 5. Cookie与Session5.1 Cookie5.1.1 认识Cookie5.1.2 设置Cookie5.1.3 Cookie的生命周期 5.2 Session 6. HTTP版本(了解&#x…...
Node.js常用知识
Nodejs 总结Node.js基础知识,便于定期回顾 1、fs 文件写入 1、require(‘fs’) 2、fs.writeFile() 3、fs.appendFile() 4、fs.createwriteStream() //流式写入 ws.write() 文件读取 1、fs.readFile(‘’,(err,data)>{ }) const …...
Block Blaster Online:免费解谜游戏的乐趣
Block Blaster Online 是一款免费的在线解谜游戏,它将挑战你的思维和反应能力!在这里,你可以匹配五彩缤纷的方块,创造出令人惊叹的组合,享受无尽的解谜乐趣。无需安装,点击即可开始,加入全球数百…...
4 前置技术(下):git使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 前言...
Qwen2.5-Max:AI技术的新里程碑
随着人工智能(AI)技术的不断进步,全球各大科技公司都在竞相推出更强大的语言模型。近日,阿里巴巴发布了其最新的超大规模混合专家模型(MoE)——Qwen2.5-Max,这一成果不仅在多个基准测试中超越了…...
PyQt4学习笔记1】使用QWidget创建窗口
目录 一、创建一个简单的 QWidget 窗口 二、设置窗口属性 1. 设置窗口标题 2. 设置背景颜色 3. 设置窗口大小和位置 4. 设置窗口模式 5. 关闭窗口 6. QWidget 及其子控件的样式 三、添加控件到 QWidget 1. 添加按钮 2. 添加标签 3. 添加文本框 4. 控件布局管理 四、自定义样式 …...
九. Redis 持久化-RDB(详细讲解说明,一个配置一个说明分析,步步讲解到位)
九. Redis 持久化-RDB(详细讲解说明,一个配置一个说明分析,步步讲解到位) 文章目录 九. Redis 持久化-RDB(详细讲解说明,一个配置一个说明分析,步步讲解到位)1. RDB 概述2. RDB 持久化执行流程3. RDB 的详细配置4. RDB 备份&恢…...
Redis --- 秒杀优化方案(阻塞队列+基于Stream流的消息队列)
下面是我们的秒杀流程: 对于正常的秒杀处理,我们需要多次查询数据库,会给数据库造成相当大的压力,这个时候我们需要加入缓存,进而缓解数据库压力。 在上面的图示中,我们可以将一条流水线的任务拆成两条流水…...
使用VCS对Verilog/System Verilog进行单步调试的步骤
Verilog单步调试: System Verilog进行单步调试的步骤如下: 1. 编译设计 使用-debug_all或-debug_pp选项编译设计,生成调试信息。 我的4个文件: 1.led.v module led(input clk,input rst_n,output reg led );reg [7:0] cnt;alwa…...
Go语言中结构体字面量
结构体字面量(Struct Literal)是在 Go 语言中用于创建和初始化结构体实例的一种语法。它允许你在声明结构体变量的同时,直接为其字段赋值。结构体字面量提供了一种简洁、直观的方式来创建结构体对象。 结构体字面量有两种主要形式࿱…...