当前位置： 首页 > news >正文

站在JavaScript的视角去看，HTML的DOM和GLTF的Json数据。

news 2026/2/9 22:38:45

很多前端小伙伴没有见过、操作过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文件&#xff0c;对非常懵逼&#xff0c;本文从前端小伙伴最熟悉的dom模型为切入口&#xff0c;以类别的方式来学习一下gltf文件。 一、结构与组织形式 HTML DOM&#xff08;文档对象模型&#xff09;&#xff1a; 树形结构&#xff1a;HT…...

编程日记 2025/2/5 5:15:00

传输层协议 UDP 与 TCP

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; 前置复盘&#x1f98b; 传输层&#x1f98b; 再谈端口号&#x1f98b; 端口号范围划分&#x1f98b; 认识知名端口号 (Well-Know Port Number) 二&#xf…...

编程日记 2025/2/5 5:13:58

VSCode源码分析参考资料

VSCode Architecture Analysis - Electron Project Cross-Platform Best Practices 中文版 VSCode 架构分析 - Electron 项目跨平台最佳实践 Sihan Li博客上的vscode源码分析系列&#xff1a;分析了微服务架构、事件体系、资源管理、配置系统等 文召博客上的vscode 源码解析…...

编程日记 2025/2/5 5:11:53

使用VCS对Verilog/System Verilog进行单步调试的步骤

Verilog单步调试&#xff1a; System Verilog进行单步调试的步骤如下&#xff1a; 1. 编译设计 使用-debug_all或-debug_pp选项编译设计&#xff0c;生成调试信息。 我的4个文件&#xff1a; 1.led.v module led(input clk,input rst_n,output reg led );reg [7:0] cnt;alwa…...

编程日记 2025/2/5 5:10:44

ROS-激光雷达-消息包格式-获取激光雷达数据-激光雷达避障

文章目录 激光雷达原理 消息包格式获取激光雷达数据激光雷达避障 激光雷达 原理 激光雷达&#xff08;LiDAR&#xff09; 是一种利用激光进行距离测量和环境感知的传感器。它通过发射激光束并接收反射光来测量物体的距离&#xff0c;生成点云数据&#xff0c;用于构建环境的三…...

编程日记 2025/2/5 5:09:41

c++之模板进阶

在前面的文章中&#xff0c;我们已经简单的了解了模板的使用&#xff0c;在这篇文章中&#xff0c;我们将继续深入探讨模板 1.模板的特化 1.1 概念 通常情况下&#xff0c;使用模板可以实现一些与类型无关的代码&#xff0c;但对于一些特殊类型的可能会得到一些错误的结果&a…...

编程日记 2025/2/5 5:05:37

关于Internet Download Manager(IDM)强制下载合并相关二次开发

目录 前言 强制下载视频 强制合并 迁移下载列表 免责声明 附录 前言 那个下载工具IDM不说了&#xff0c;确实有很多便捷的功能&#xff0c;不过也有一些限制 常见的包括但不限于&#xff1a; 1.无法下载有版权保护的视频&#xff08;不管真假&#xff09; 2.有时候下载…...

编程日记 2025/2/5 5:04:36

鸿蒙HarmonyOS Next 视频边播放边缓存- OhosVideoCache

OhosVideoCache 是一个专为OpenHarmony开发(HarmonyOS也可以用)的音视频缓存库&#xff0c;旨在帮助开发者轻松实现音视频的边播放边缓存功能。以下是关于 OhosVideoCache 的详细介绍&#xff1a; 1. 核心功能 边播放边缓存&#xff1a;将音视频URL传递给 OhosVideoCache 处理后…...

编程日记 2025/2/5 5:03:35

（10） 如何获取 linux 系统上的 TCP 、 UDP 套接字的收发缓存的默认大小，以及代码范例

&#xff08;1&#xff09; 先介绍下后面的代码里要用到的基础函数&#xff1a; 以及&#xff1a; &#xff08;2&#xff09; 接着给出现代版的 读写 socket 参数的系统函数 &#xff1a; 以及&#xff1a; &#xff08;3&#xff09; 给出 一言的 范例代码&#xff0c;获取…...

编程日记 2025/2/5 5:02:34

程序代码篇---项目目录结构HSV掩膜Opencv图像处理

文章目录 前言第一部分&#xff1a;项目目录结构第二部分&#xff1a;HSV提取HSV色调&#xff08;Hue&#xff09;含义取值范围 饱和度&#xff08;Saturation&#xff09;含义取值范围 亮度&#xff08;Value&#xff09;含义取值范围 第三部分&#xff1a;Opencv图像处理1. 读…...

编程日记 2025/2/5 4:59:27

注解与反射基础

注解 概述 注解&#xff08;Annotation&#xff09;&#xff0c;从jdk5.0引入。 作用 不是程序本身&#xff0c;可以对程序作出解释&#xff08;这一点和注释没什么区别&#xff09;可以被其他程序读取 格式 注释是以“注释名”在代码中存在的&#xff0c;还可以添加一些…...

编程日记 2025/2/5 4:54:17

Vue指令v-html

目录 一、Vue中的v-html指令是什么&#xff1f;二、v-html指令与v-text指令的区别&#xff1f; 一、Vue中的v-html指令是什么&#xff1f; v-html指令的作用是&#xff1a;设置元素的innerHTML&#xff0c;内容中有html结构会被解析为标签。 二、v-html指令与v-text指令的区别…...

编程日记 2025/2/5 4:52:15

院校联合以项目驱动联合培养医工计算机AI人才路径探析

一、引言 1.1 研究背景与意义 在科技飞速发展的当下&#xff0c;医疗人工智能作为一个极具潜力的新兴领域&#xff0c;正深刻地改变着传统医疗模式。从疾病的早期诊断、个性化治疗方案的制定&#xff0c;到药物研发的加速&#xff0c;人工智能技术的应用极大地提升了医疗服务…...

编程日记 2025/2/5 4:48:05

CDDIS从2025年2月开始数据迁移

CDDIS 将从 2025 年 2 月开始将我们的网站从 cddis.nasa.gov 迁移到 earthdata.nasa.gov&#xff0c;并于 2025 年 6 月结束。 期间可能对GAMIT联网数据下载造成影响。...

编程日记 2025/2/5 4:44:56

前端 | JavaScript中的reduce方法

1. 什么是reduce reduce 方法是 JavaScript 中数组的重要方法之一&#xff0c;用于对数组中的元素进行累积计算。它接收一个回调函数作为参数&#xff0c;并返回一个最终计算结果。reduce 在许多场景下都非常有用&#xff0c;比如求和、数组扁平化、对象计数、数据转换等。 2…...

编程日记 2025/2/5 4:43:55

【C++】B2124 判断字符串是否为回文

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述输入格式&#xff1a;输出格式&#xff1a;样例&#xff1a; &#x1f4af;方法一&#xff1a;我的第一种做法思路代码实现解析 &#x1f4af;方法二&#xff1a;我…...

编程日记 2025/2/5 4:41:53

人工智能学习（五）之机器学习逻辑回归算法

深入剖析机器学习逻辑回归算法 一、引言 在机器学习领域&#xff0c;逻辑回归是一种极为经典且应用广泛的算法。虽说名字里带有 “回归”&#xff0c;但它主要用于解决分类问题&#xff0c;在医学、金融、互联网等多个领域都发挥着关键作用。例如&#xff0c;在医学上辅助判断…...

编程日记 2025/2/5 4:37:47

Bash 基础与进阶实践指南

目录 Bash 简介与基础基本命令与文件操作权限管理与用户管理重定向与管道变量与环境变量通配符与正则表达式Shell 脚本结构与控制流常用内建命令与技巧文本处理常用命令作业控制与进程管理别名与函数实用技巧与注意事项更多 Bash 进阶话题参考资源 1. Bash 简介与基础 1.1 什…...

编程日记 2025/2/5 4:35:45

基于开源AI智能名片2 + 1链动模式S2B2C商城小程序视角下的个人IP人设构建研究

摘要&#xff1a;本文深入探讨在开源AI智能名片2 1链动模式S2B2C商城小程序的应用场景下&#xff0c;个人IP人设构建的理论与实践。通过剖析个人IP人设定义中的“诉求”“特质”“可感知”三要素&#xff0c;结合该小程序特点&#xff0c;阐述其对个人IP打造的影响与推动作用&…...

编程日记 2025/2/5 4:34:42

基于springboot+vue的航空散货调度系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2025/2/5 4:33:41

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/2/9 10:58:49

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/12/23 11:08:56

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/12/14 16:22:05