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

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

news 2026/2/7 20:19:30

很多前端小伙伴没有见过、操作过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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01