请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 485|回复: 0

从零起头进修3D可视化之摄像机

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-7-9 16:38:38 | 显示全部楼层 |阅读模式
数字孪生可视化场景中的摄像机,与大师摄影时利用相机的功用类似,数字孪生可视化场景中用摄像机来肯定观察 3D 场景的视角。摄像机包括两个重要的位置参数:镜头位置 position 和被拍摄物体的位置 target (又叫方针点)。

1、设备摄像机位置
将下面的代码输入到项目文件中,获得当前摄像机 camera 的 position 和 target 属性,便可以获得数字孪生可视化场景中摄像机的位置信息,也可以将其打印在控制台中。

  1. // 加载场景代码
  2. var app = new THING.App({
  3. url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
  4. });

  5. var pos = app.camera.position; //获得摄像机镜头位置
  6. var target = app.camera.target; //获得摄像机方针点位置

  7. console.log(pos);
  8. console.log(target);
复制代码


运转项目后,在预览窗口,可以展现出建立的数字孪生可视化物体,以下图所示。

从零起头进修3D可视化之摄像机



经过摄像机的 fit() 方式,也可以设备摄像机位置。

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

  4. // 加载完成事务
  5. app.on('load', function (ev) {
  6. /* 参数:
  7. ev.campus 园区,范例:Campus
  8. ev.buildings 园区修建物,范例:Selector
  9. */
  10. var campus = ev.campus;
  11. console.log('after load ' + campus.id);

  12. app.camera.fit({
  13. position: [100, 100, 100],
  14. target: [0, 0, 0]
  15. });
  16. });
复制代码


运转项目后,在预览窗口,可以展现出建立的数字孪生可视化物体,以下图所示。

从零起头进修3D可视化之摄像机



2、设备摄像机飞翔
经过 camera 的 flyTo() 方式,可以让摄像机飞翔到某位置或物体。

  1. app.camera.flyTo({
  2. name: value,
  3. })
复制代码


可以经过 app.camera.flying 属性,判定摄像机能否在飞翔。

可以经过 app.camera.stopFlying() 来停止摄像机飞翔。

3、设备摄像机扭转
经过 camera 的 rotateAround() 方式,可以让摄像机绕某点或某物体扭转

  1. app.camera.rotateAround({
  2. name: value,
  3. })
复制代码


4、控制摄像机交互
ThingJS 摄像机供给了默许的平移、扭转、缩放的交互操纵。

可以经过以下剧本对摄像机增加分歧的交互控制,依照自己的需求停止挑选。

  1. // 封闭一切默许的交互操纵(扭转、平移、缩放);
  2. app.camera.inputEnabled = false;
  3. // 封闭默许的平移操纵;
  4. app.camera.enablePan=false;
  5. // 封闭默许的扭转操纵;
  6. app.camera.enableRotate=false;
  7. // 封闭默许的缩放操纵;
  8. app.camera.enableZoom=false;

  9. // 设备鼠标输入时移动摄像机的速度
  10. app.camera.mousePanSpeed = 10;
  11. // 设备键盘输入时移动摄像机的速度
  12. app.camera.keyPanSpeed = 10;

  13. // 设备摄像机水平角度范围[最小值, 最大值]
  14. app.camera.yAngleLimitRange = [30, 60];
  15. // 设备摄像机俯仰角度范围[最小值, 最大值]
  16. app.camera.xAngleLimitRange = [30, 60];

  17. // 摄像机水平移动 10m
  18. app.camera.move(10, 0);
  19. // 摄像机垂直移动 10m
  20. app.camera.move(0, 10);
  21. // 摄像机向前推动 10m
  22. app.camera.zoom(10);

  23. // 设备摄像机target为圆心转在水平偏向上扭转的夹角增量
  24. app.camera.rotateY(20);
  25. // 设备摄像机target为圆心转在竖直偏向上扭转的夹角增量
  26. app.camera.rotateX(20);

  27. // 切换成 3D 形式
  28. app.camera.viewMode = THING.CameraView.Normal;
  29. // 切换成 2D 形式
  30. app.camera.viewMode = THING.CameraView.TopView;
复制代码


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

数字孪生可视化:https://www.thingjs.com/


回复

使用道具 举报

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

本版积分规则