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

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

news 2026/2/9 20:39: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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50