当前位置: 首页 > Web前端 > HTML5

3D仿真场景无障碍进入?ThingJS3D提供了两种查询方式

时间:2023-04-05 00:07:01 HTML5

3D模拟场景具有很强的吸引力。通过双击等不同的事件操作,还可以进入对象,添加需要的元素,旋转360°查看,模拟真实世界状态。ThingJS平台主要使用兄弟属性、类别属性和查询查询。通过查询这个对象,然后结合ThingJS中的图层切换功能,进入场景。ThingJS中查询对象的两种方式ThingJS中获取对象的方式有两种。这里的对象大到场景,小到元素。可以使用双击事件来查询。一种是通过父子树找到要控制的对象,另一种是使用Query方法直接查询我们要找的对象。1.利用父子兄弟属性找到需要控制的对象代码示例/\*\*\*描述:通过“父子树”访问场景中的对象\*操作:无,查看日志信息\*教程:ThingJSTutorial——>ParkandHierarchy—>SceneHierarchy\*难度:★★☆☆☆\*/varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});//执行app.on('load',function(ev){//获取校园对象varcampus=ev.campus;//通过父子树访问该对象场景varchildren=campus.children;for(vari=0;i获取对象\*难度:★☆☆☆☆\*/varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'});app.on('load',function(){newTHING.widget.Button('按id查询',queryById);newTHING.widget.Button('按名称查询',queryByName);newTHING.widget.Button('常规按名称查询',queryByRegExp);newTHING.widget.Button('按类型查询',queryByClass);newTHING.widget.Button('按属性查询',queryByProperty);});//搜索id为2271对象函数queryById(){varcar=app.query('#2271')\[0\];car.style.color='#ff0000';}//搜索名称为'car01'的对象functionqueryByName(){varcar=app.query('car01')\[0\];car.style.outlineColor='#ff0000';}//根据正则表达式函数queryByRegExp()匹配名称中包含'car'的对象{varcars=app.query(/car/);//上面的代码等同于//varreg=newRegExp('car');//varcars=app.query(reg);cars.forEach(function(obj){obj.style.color='#00ff00';})}//搜索类型为'Building'的对象functionqueryByClass(){varthings=app.query('.Building');对于(vari=0;i50\]').forEach(function(obj){obj.style.outlineColor='#ffff00';});}ThingJS在建筑物之间切换如果你想从一个建筑物跳到另一个建筑物或者直接进入我们的主要观察对象呢?其实很简单!第一步,我们使用查询功能找到我们要关注的对象。代码示例:varobj=app.query("#110")app.level.change(obj);第二步,利用这个函数实现直接进入这个对象对应的关卡,回到我们的校园关卡只需要这样做:app.level.change(app.root.defaultCampus);所有关于创建、获取和控制对象的操作都可以在ThingJS技术文档中找到。助你快速上手3D在线开发