ThingStudio森工厂开发者社区

发帖
分享
查看: 2193|回复: 1

[分享] ThingJS常用API之camera详细介绍

[复制链接]

ThingJS常用API之camera详细介绍

发表于 2019-11-19 15:15:57 来自 分享 阅读模式 倒序浏览
zzv_icon2193 zzr_icon1 查看全部

在物联网可视化中，不论是threejs，还是ThingJS ，都有着一个十分重要的组件，那就是camera摄像机，在制作的3D场景中，我们是如何移动视角的？答案就是控制camera的位置，在此我就归纳一下ThingJS 中如何控制camera的。


在ThingJS 中，摄像机包含两个重要的位置参数：镜头位置 position 和被拍摄物体的位置 target (又叫目标点)。其中ThingJS 中position的位置数组[0,0,0]分别代表着物体的xyz轴坐标，ThingJS 的原点[0,0,0]则是使用ThingJS创建场景时女性人物出现的位置。


1、在 ThingJS 中，可以通过 app.camera 获取摄像机对象。

1.1、通过获取 camera 的 position 和 target 属性可以得到 3D 场景中摄像机的位置信息，也可以将其打印在控制台中。

  1. var pos = app.camera.position; //获取摄像机镜头位置
  2. var target = app.camera.target; //获取摄像机目标点位置
  3. app.camera.log(); //在控制台中打印摄像机位置信息
  4. //打印结果中第一个数组为镜头位置，第二个数组为目标点位置，如下
  5. //[0, 20, 20], [-30, 10, 0]
复制代码


2、摄影机看某处或某物

2.1、通过 lookAt()方法让摄影机看某处或某物

  1. //摄像机一直“盯着”[0,0,0]点看
  2. app.camera.lookAt([0, 0, 0]); //
  3. //摄像机一直“盯着”某物体看
  4. var obj = app.query("car01")[0];
  5. app.camera.lookAt(obj);
  6. //取消摄影机一直盯着物体看
  7. app.camera.lookAt(null);
复制代码

2.2、通过fit() 方法设置摄影机位置

  1. app.camera.fit({
  2. position: [100, 100, 100],
  3. target: [0, 0, 0]
  4. });
复制代码

2.3、通过fit(obj) 方法设置摄影机位置

  1. //设置摄像机到物体的“最佳看点”
  2. app.camera.fit(obj);
  4. //当不传参数时，设置摄像机到当前整个场景下的“最佳看点”
  5. app.camera.fit();
复制代码


3、摄像机“最佳看点”

关于“最佳看点”当摄像机看向目标物体时，一般将物体中心点作为 “看点” 的 target 位置。我们可以通过相对于目标物体的坐标系下 x 轴旋转角度、 y 轴旋转角度以及距目标物体“中心”的距离来确定一个位置，作为“看点”的 position 位置。比如，当（ x 轴旋转角度， y 轴旋转角度，距离）=（0,0,1）时，是在正朝向物体 Z 轴方向上 1 倍包围球半径的位置看向物体。如图

ThingJS常用API之camera详细介绍

但是上图并不是物体的“最佳看点”， ThingJS 中会默认计算一个物体的“最佳看点”。ThingJS 将物体 包围盒 的中心点作为“最佳看点”的 target 位置。以中心点的 X 轴旋转 45 度（xAngle:45），Y 轴旋转 -45 度方向（yAngle:-45），2倍包围球半径距离（radiusFactor:2）的位置为“最佳看点”的 position 位置。


如果用户需自定义 fit() 物体的摄像机位置，可控制以下参数来进行设置：

  1. app.camera.fit({
  2. 'object': obj,
  3. 'xAngle': 60, //绕物体自身X轴旋转角度
  4. 'yAngle': 30, //绕物体自身Y轴旋转角度
  5. 'radiusFactor':3, //物体包围球半径的倍数
  6. });
复制代码


4、设置摄影机飞行

4.1、通过 flyTo()方法让摄影机从当前位置运动到设置的位置，大部分参数和 fit 相同，该方法增加了 time（飞行时间）和 lerpType （插值方式）参数来控制飞行过程的速度，还可通过 complete 设置飞行结束后的回调函数。

  1. //从当前摄像机位置飞到指定位置，飞行时间2s，飞行结束后调用回调函数
  2. app.camera.flyTo({
  3. position: [0, 20, 20],
  4. target: [-30, 10, 0],
  5. time: 2 * 1000,
  6. complete: function() {
  7. console.log("飞行结束");
  8. }
  9. });
  10. //以Quartic.In的插值方式 让飞行速度渐增
  11. app.camera.flyTo({
  12. position: [0, 20, 20],
  13. target: [-30, 10, 0],
  14. time: 3 * 1000,
  15. lerpType: THING.LerpType.Quartic.In
  16. });
  18. //飞到物体的最佳视角,默认飞行时间3s
  19. app.camera.flyTo(obj);
  21. //2s飞到物体的最佳视角
  22. app.camera.flyTo({
  23. object: obj,
  24. time: 2 * 1000,
  25. complete: function() {
  26. console.log("飞行结束");
  27. }
  28. });
  30. //自定义飞到物体的摄像机位置参数（同fit）
  31. app.camera.flyTo({
  32. object: obj,
  33. xAngle: 30, //绕物体自身X轴旋转角度
  34. yAngle: 60, //绕物体自身Y轴旋转角度
  35. radiusFactor: 3, //物体包围盒半径的倍数
  36. time: 5 * 1000,
  37. complete: function() {
  38. console.log("飞行结束");
  39. }
  40. });
  42. // 也可以通过设置距离物体包围盒中心的距离（radius）确定摄像机位置
  43. app.camera.flyTo({
  44. object: obj,
  45. xAngle: 30, //绕物体自身X轴旋转角度
  46. yAngle: 60, //绕物体自身Y轴旋转角度
  47. radius: 3, //距离物体包围盒中心的距离 单位米
  48. time: 5 * 1000,
  49. complete: function() {
  50. console.log("飞行结束");
  51. }
  52. });
复制代码

4.2、rotateAround 让摄像机环绕某坐标点（世界坐标系下）或某物体旋转飞行；

  1. //环绕[0,0,0]点旋转 180 度，5s 转完
  2. app.camera.rotateAround({
  3. target: [0,0,0],//环绕的坐标点
  4. time: 5*1000,//环绕飞行的时间
  5. yRotateAngle : 180,//环绕y轴飞行的旋转角度
  6. complete:function(){
  7. console.log('结束环绕飞行');
  8. }
  9. });
  11. //绕某物体飞行 180 度，5s 转完后反向转回，以此循环往复
  12. app.camera.rotateAround({
  13. object: obj,//环绕的物体
  14. time: 5*1000,//环绕飞行的时间
  15. yRotateAngle : 180,//环绕y轴飞行的旋转角度
  16. loopType:THING.LoopType.PingPong //循环往复环绕
  17. });
复制代码


5、控制摄影机的移动

5.1、对默认的交互操作，开发者可以控制操作过程中摄像机移动的速度，限制水平旋转角度、俯仰旋转角度。

  1. //设置鼠标输入时移动摄像机的速度
  2. app.camera.mousePanSpeed = 10;
  3. //设置键盘输入时移动摄像机的速度
  4. app.camera.keyPanSpeed = 10;
  6. //设置摄像机水平角度范围[最小值, 最大值]
  7. app.camera.xAngleLimited = [30, 60];
  9. //设置摄像机俯仰角度范围[最小值, 最大值]
  10. app.camera.yAngleLimited = [30, 60];
复制代码

5.2、也可以通过 camera 的 move()，zoom()，rotateY()，rotateX()来控制摄像机的移动、缩放、旋转。

  1. //摄像机水平移动 10m
  2. app.camera.move(10, 0);
  3. //摄像机垂直移动 10m
  4. app.camera.move(0, 10);
  5. //摄像机向前推进 10m
  6. app.camera.zoom(10);
  7. //设置摄像机target为圆心转在水平方向上旋转的夹角增量
  8. app.camera.rotateY(20);
  9. // 设置摄像机target为圆心转在竖直方向上旋转的夹角增量
  10. app.camera.rotateX(20);
复制代码


6、摄像机变动触发的事件

摄像机位置变动开始触发 cameraChangeStart
摄像机位置变动结束触发 cameraChangeEnd
摄像机位置变动中触发 cameraChange
摄像机位置缩放后触发 cameraZoom
改变摄像机观察模式后触发 cameraViewChange ；


7、补充

可以通过 app.camera.flying 属性，判断摄像机是否在飞行
可以通过 app.camera.stopFlying() 来停止摄像机飞行。

可以通过 app.camera.followObject ()方法让摄像机一直跟随某物体

相应的可调用 app.camera.stopFollowingObject() 方法停止摄像机跟随物体。

可以通过设置 app.camera.inputEnabled=false 关闭所有默认的交互操作（旋转、平移、缩放）；

可以通过设置 app.camera.enablePan=false 关闭默认的平移操作；

可以通过设置 app.camera.enableRotate=false 关闭默认的旋转操作；

可以通过设置 app.camera.enableZoom=false 关闭默认的缩放操作；


常用, api, camera, 详细, 介绍

相关帖子
回复

举报

avatar

10

主题

19

帖子

0

积分

游客

积分
0
17671714732 发表于 2019-11-20 09:35:18 显示全部楼层
比较好使，不过官方文档里面也有，就看thing友在哪看了。
回复

举报

avatar
游客~
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

avatar
zzzzzker

注册会员

  • 主题

    84

  • 帖子

    102

  • 粉丝

    0

关注 发私信
Ta的新帖
130700ppkpl8x3t7tt1b1t

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4