从零开始学习3D可视化之摄像机自由飞行

[复制链接]
 楼主| 森友小锘 发表于 2021-7-13 16:40 | 显示全部楼层 |阅读模式
#申请原创# #每日话题# #有奖活动# #技术资源# #申请开发板#
我学习数字孪生可视化有一小段时间了,第一个制作目标就是在数字孪生可视化场景中实现一个自由飞行的摄像机。使用WSAD键控制摄像机的前后左右移动,使用QE控制摄像机的升降。

这个功能比较简单,代码也一目了然,不做过多解释了,直接上代码吧。

  1. var app = new THING.App({
  2.     url: 'https://www.thingjs.com/static/models/storehouse'
  3. });

  4. // 加载场景后执行
  5. app.on('load', function () {
  6. // 创建按钮
  7. new THING.widget.Button('添加控件', add_control);
  8. new THING.widget.Button('删除控件', remove_control);
  9. });

  10. /**
  11. * 添加控件
  12. */
  13. var ctrl = null;
  14. function add_control() {
  15. if (!ctrl) {
  16.         ctrl = app.addControl(new THING.FlyControl());

  17. initThingJsTip("控件添加成功!<br>键盘 W A S D 控制飞行, Q E 控制升降");
  18. }
  19. }

  20. /**
  21. * 删除控件
  22. */
  23. function remove_control() {
  24. if (ctrl) {
  25.         app.removeControl(ctrl);
  26.         ctrl = null;
  27. initThingJsTip("本例程展示了平台内置的键盘控制摄影机交互的控件,添加控件后可以通过键盘 W A S D 控制飞行, Q E 控制升降,点击左侧按钮进行体验");
  28. }
  29. }


不只可以用在摄像机上,也可以应用在数字孪生可视化场景中。

我采用的方法是使用平台内置的键盘控制摄影机交互的控件,添加控件后可以通过键盘 W A S D 控制飞行, Q E 控制升降,点击左侧按钮将触发THING.FlyControl 事件,使用键盘来控制相机角度。只需要简单的添加控件就能实现摄像机自由飞行,像我一样刚接触数字孪生可视化可视化的初学者可以试一试。








—————————————————



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
您需要登录后才可以回帖 登录 | 注册

本版积分规则

107

主题

107

帖子

0

粉丝
快速回复 返回顶部 返回列表