ThingJS常用API之camera详细介绍

zzzzzker 10月前 720

在物联网可视化中,不论是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 场景中摄像机的位置信息,也可以将其打印在控制台中。

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


2、摄影机看某处或某物

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

//摄像机一直“盯着”[0,0,0]点看
app.camera.lookAt([0, 0, 0]); //
//摄像机一直“盯着”某物体看
var obj = app.query("car01")[0];
app.camera.lookAt(obj);
//取消摄影机一直盯着物体看
app.camera.lookAt(null);

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

app.camera.fit({
    position: [100, 100, 100],
    target: [0, 0, 0]
});

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

//设置摄像机到物体的“最佳看点”
app.camera.fit(obj);

//当不传参数时,设置摄像机到当前整个场景下的“最佳看点”
app.camera.fit();


3、摄像机“最佳看点”

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

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


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

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


4、设置摄影机飞行

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

 //从当前摄像机位置飞到指定位置,飞行时间2s,飞行结束后调用回调函数
app.camera.flyTo({
    position: [0, 20, 20],
    target: [-30, 10, 0],
    time: 2 * 1000,
    complete: function() {
    console.log("飞行结束");
    }
});
//以Quartic.In的插值方式 让飞行速度渐增
app.camera.flyTo({
    position: [0, 20, 20],
    target: [-30, 10, 0],
    time: 3 * 1000,
    lerpType: THING.LerpType.Quartic.In
});

//飞到物体的最佳视角,默认飞行时间3s
app.camera.flyTo(obj);

//2s飞到物体的最佳视角
app.camera.flyTo({
    object: obj,
    time: 2 * 1000,
    complete: function() {
    console.log("飞行结束");
    }
});

//自定义飞到物体的摄像机位置参数(同fit)
app.camera.flyTo({
    object: obj,
    xAngle: 30, //绕物体自身X轴旋转角度
    yAngle: 60, //绕物体自身Y轴旋转角度
    radiusFactor: 3, //物体包围盒半径的倍数
    time: 5 * 1000,
    complete: function() {
    console.log("飞行结束");
    }
});

// 也可以通过设置距离物体包围盒中心的距离(radius)确定摄像机位置
app.camera.flyTo({
    object: obj,
    xAngle: 30, //绕物体自身X轴旋转角度
    yAngle: 60, //绕物体自身Y轴旋转角度
    radius: 3, //距离物体包围盒中心的距离 单位米
    time: 5 * 1000,
    complete: function() {
    console.log("飞行结束");
    }
});

 

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

//环绕[0,0,0]点旋转 180 度,5s 转完
app.camera.rotateAround({
target: [0,0,0],//环绕的坐标点
time: 5*1000,//环绕飞行的时间
yRotateAngle : 180,//环绕y轴飞行的旋转角度
complete:function(){
    console.log('结束环绕飞行');
}
});
 
//绕某物体飞行 180 度,5s 转完后反向转回,以此循环往复
app.camera.rotateAround({
object: obj,//环绕的物体
time: 5*1000,//环绕飞行的时间
yRotateAngle : 180,//环绕y轴飞行的旋转角度
loopType:THING.LoopType.PingPong //循环往复环绕
});


5、控制摄影机的移动

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

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

//设置摄像机水平角度范围[最小值, 最大值]
app.camera.xAngleLimited = [30, 60];

//设置摄像机俯仰角度范围[最小值, 最大值]
app.camera.yAngleLimited = [30, 60];

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

//摄像机水平移动 10m
app.camera.move(10, 0);
//摄像机垂直移动 10m
app.camera.move(0, 10);
//摄像机向前推进 10m
app.camera.zoom(10);
//设置摄像机target为圆心转在水平方向上旋转的夹角增量
app.camera.rotateY(20);
// 设置摄像机target为圆心转在竖直方向上旋转的夹角增量
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 关闭默认的缩放操作;


最后于 10月前 被ThingJS_用户支持编辑 ,原因:
最新回复 (1)
  • 17671714732 10月前
    0 引用 2
    比较好使,不过官方文档里面也有,就看thing友在哪看了。

你可以在 登录 or 注册 后,对此帖发表评论!

返回