在线做网站图标李守洪

 使用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 没有这一功能 。