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

glTF 添加数据属性（extras）

news 2025/9/13 7:43:44

使用3D 模型作为可视化界面的一个关键是要能够在3D模型中添加额外的数据属性，利用这些数据属性能够与后台的信息模型建立对应关系，例如后台信息模型是opcua 信息模型的话，在3D模型中要能够包含OPC UA 的NodeId，BrowserName 等基本信息。

glTF 是一种流行的3D 模型的标准，它使用JSON 语言描述3D模型。其中可以包含所谓的extras 。

另一方面，Three.JS 的object能够包含userData ，也是为了定义数据属性。通过GLTFLoader能够将extras 转换成为Three 的userData。

网络上介绍glTF的extras和ThreeJS 的userData 都比较零散。自己做了各种尝试，将结果分享给读者。

glTF 2.0 导出的内容

Meshes（网格）
Materials 材质(Principled BSDF) and Shadeless (Unlit)
Textures纹理
Cameras相机
Punctual lights准点灯 (point, spot, and directional)
Extensions扩展 (listed below)
Extras附加功能 (custom properties自定义属性)
Animation动画 (keyframe, shape key, and skinning关键帧、形状关键帧和外观)

glTF extras 数据的插入

我尝试使用solidworks visualize 导出glTF 。但是，在solidworks visualize 没有插入extras 的方法。而且objects 的名称是渲染的名称（例如blue high gloss plastic）。这是难以使用的。

于是我尝试在glTF 的JSON 文档中手工插入extras。每一个mesh都对应Three 的object ，所以，每个mesh 中都应该添加extras.

extras 的json格式

"extras": {
"opc":{
"BrowserName":"Cube1" 
}
}

注意，他不能定义为：

"extras": {"BrowserName":"Cube1" }

extras 中的成员是对象。

glTF 中extras 的定义（mesh）


"nodes" : [{"mesh" : 0,"extras": {"opc": { "BrowserName": "Cube1"}}}],

也可以使用Three editor 在线编辑器添加

https://threejs.org/editor/

在Three 中定义object 的userData

在下面的代码中，为地板添加的userData，格式与extras 类似

 var plane = new THREE.Mesh(planeGeometry,planeMaterial);plane.name="Ground"plane.userData={opc:{BrowserName:"Plane"}}scene.add(plane);

点击对象，显示userData

function onClick() {event.preventDefault();const mouse = new THREE.Vector2();const rect = screenDom.value.getBoundingClientRect()mouse.x = ((event.clientX+rect.left) / window.innerWidth) * 2 - 1;mouse.y = -((event.clientY+rect.top)/ window.innerHeight) * 2 + 1;console.log("x:"+mouse.x,"y:"+mouse.y);const raycaster = new THREE.Raycaster();raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects(scene.children,true); //if (intersects.length > 0) {var selectedObject = intersects[0];SelectObject.value.innerHTML=selectedObject.object.userData.opc.BrowserNameconsole.log(selectedObject.object.userData)

selectedObject.object.userData.opc.BrowserName 引用了opc 中的BrowserName值。SelectObject.value.innerHTML是网页<div >