在线做网站图标网站关键词优化
使用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 >
结束语
哪一个glTF 编辑器（sketchups，blender）支持extras 的添加和编辑呢？有了解的读者请推荐。
遗憾的是solidworks 没有这一功能 。