重庆綦江网站制作公司电话,wordpress生成静态教程,贵阳app开发公司,玉林网站建设使用3D 模型作为可视化界面的一个关键是要能够在3D模型中添加额外的数据属性#xff0c;利用这些数据属性能够与后台的信息模型建立对应关系#xff0c;例如后台信息模型是opcua 信息模型的话#xff0c;在3D模型中要能够包含OPC UA 的NodeId#xff0c;BrowserName 等基本… 使用3D 模型作为可视化界面的一个关键是要能够在3D模型中添加额外的数据属性利用这些数据属性能够与后台的信息模型建立对应关系例如后台信息模型是opcua 信息模型的话在3D模型中要能够包含OPC UA 的NodeIdBrowserName 等基本信息。 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.nameGroundplane.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.clientXrect.left) / window.innerWidth) * 2 - 1;mouse.y -((event.clientYrect.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.innerHTMLselectedObject.object.userData.opc.BrowserNameconsole.log(selectedObject.object.userData)
selectedObject.object.userData.opc.BrowserName 引用了opc 中的BrowserName值。SelectObject.value.innerHTML是网页div
结束语 哪一个glTF 编辑器sketchupsblender支持extras 的添加和编辑呢有了解的读者请推荐。
遗憾的是solidworks 没有这一功能 。
