手机网站源码大全,网站平台内容建设提纲,网站策划流程,网站设计风格升级很多前端小伙伴没有见过、操作过gltf文件#xff0c;对非常懵逼#xff0c;本文从前端小伙伴最熟悉的dom模型为切入口#xff0c;以类别的方式来学习一下gltf文件。
一、结构与组织形式
HTML DOM#xff08;文档对象模型#xff09;#xff1a; 树形结构#xff1a;HT…很多前端小伙伴没有见过、操作过gltf文件对非常懵逼本文从前端小伙伴最熟悉的dom模型为切入口以类别的方式来学习一下gltf文件。
一、结构与组织形式
HTML DOM文档对象模型 树形结构HTML DOM 将 HTML 页面表示为一个树形结构树的根节点是 document 对象每个 HTML 元素如 div、p、img 等都是树上的节点节点之间存在父子、兄弟等层级关系。例如一个简单的 HTML 页面结构如下
!DOCTYPE html
htmlbodydiv idmainp这是一段文本/pimg srcimage.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 APIJavaScript 内置了一套完善的 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 模型相关应用这两个不同的应用场景需求。
