ThingJS,控制3D摄像头也是一门技术活
3D仿真场景下，摄像头的交互是不可或缺的元素，场景层级不同，视角也可以随之变化，ThingJS提供官方示例，让你体验不同的互动效果。
作为一个物联网可视化平台， ThingJS的优点我们就不再赘述，而开发物联网可视化项目，除了场景模型，就是对于摄像机的控制了（ThingJS将渲染封装到了最底层，使得开发人员无需过多了解建模知识，只需要专注于三维场景的开发），ThingJS中的摄像机是camera对象，我们如果是在ThingJS平台中，打印出camera的信息则需要使用到以下代码：
|
1 |
app.camera.log() // 在控制台中打印摄像机位置信息 |
接下来讲一下ThingJS控制摄像头的方法：
-
位置信息用position属性
-
目标点信息用target属性
-
盯着物体用LookAt()
-
设置摄像机位置用fit()方法
-
摄像机分为园区使用和地球场景使用
-
摄像机交互控制，包括水平移动、垂直移动、推进或旋转
摄像机的位置信息以及目标点信息
camera 摄像机有position属性以及target属性：
````
var pos = app.camera.position; // 获取摄像机镜头位置
var target = app.camera.target; // 获取摄像机目标点位置
console.log(pos +target); // 在控制台打印出摄像机镜头位置以及摄像机目标点位置
````
摄像机的 lookAt() 方法
一般我们通过摄像机的 lookAt() 方法，可以让摄像机一直“盯着”某个位置或物体看。
````
// 摄像机一直 “ 盯着 ”[0,0,0] 点看
app.camera.lookAt([0, 0, 0]);
// 摄像机一直 “ 盯着 ” 某物体看
var obj = app.query("car01")[0];app.camera.lookAt(obj);
// 取消摄影机一直盯着物体看
app.camera.lookAt(null);
````
摄像机的 fit() 方法
通过摄像机的 fit() 方法，也可以设置摄像机位置。
````
app.camera.fit({
position: [100, 100, 100],
target: [0, 0, 0]
});
````
如果 fit() 方法中传的是物体对象，那么镜头将“聚焦”到该物体，此时 ThingJS 会计算出该对象的“最佳看点”，从而“自适应”该对象来设置摄像机位置。
````
// 设置摄像机到物体的 “ 最佳看点 ”
app.camera.fit(obj);
// 当不传参数时，设置摄像机到当前整个场景下的 “ 最佳看点 ”
app.camera.fit();
````
园区& 地球摄像机飞行
ThingJS 中的摄像机分为在园区使用以及在地球场景中使用，所以对于经常在ThingJS中开发园区场景，突然有一天需要将场景应用在地球上时，就会发现摄像机飞行事件无法使用，这是因为在园区中，我们一般使用 flyTo() 方法，而地球中我们需要使用 earthFlyTo() 方法。
园区场景 -flyTo()
````
// 从当前摄像机位置飞到指定位置，飞行时间 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(" 飞行结束 ");
}});
地球场景 -earthFlyTo() 用法：
// 设置地图中心和相机高度
app.camera.earthFlyTo({
lonlat: [116.372, 39.863],// 目标点经纬度
height: 5000,// 离地高度
heading: 60,// 水平方向角度
pitch: 45// 垂直方向角度 });
// 调整地图视角到地图数据范围
app.camera.earthFlyTo({
lonlat: [116.372, 39.863],// 目标点经纬度
height: 5000,// 离地高度
heading: 60,// 水平方向角度
pitch: 45// 垂直方向角度 });
// 飞到指定位置
app.camera.earthFlyTo({
time: 3000,
lonlat: [116.39, 39.96],
height: 5000,
heading: 90,
pitch: 45,
complete: function () {
console.log('earth fly finished');
}
});
// 飞到物体
let geoPolygon = app.query('.GeoPolygon')[0];
app.camera.earthFlyTo({
time: 3000,
object: geoPolygon,
complete: function () {
console.log('earth fly finished');
}
});
// 停止地球上的飞行和旋转动作
app.camera.stopEarthFly()
````
摄像机交互控制
在 ThingJS中有着关于摄像机使用的官方示例，在这里则仅展示摄像机控制这一示例：
````
/**
* 说明：摄像机控制
* 操作：点击按钮进行摄像机操作，如果需要复位可直接操作鼠标
* 教程：摄像机 ——> 交互控制
* 难度： ★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 水平移动
new THING.widget.Button(' 水平右移 ', function () {
app.camera.move(10, 0);
});
new THING.widget.Button(' 水平左移 ', function () {
app.camera.move(-10, 0);
});
// 垂直移动
new THING.widget.Button(' 垂直上移 ', function () {
app.camera.move(0, 10);
});
new THING.widget.Button(' 垂直下移 ', function () {
app.camera.move(0, -10);
});
// 推进
new THING.widget.Button(' 向前 ', function () {
app.camera.zoom(10);
});
new THING.widget.Button(' 向后 ', function () {
app.camera.zoom(-10);
});
// 旋转
new THING.widget.Button(' 水平旋转 ', function () {
app.camera.rotateAround({
target: app.camera.target,
yRotateAngle: 10,
time: 3000
});
});
new THING.widget.Button(' 俯仰旋转 ', function () {
app.camera.rotateAround({
target: app.camera.target,
xRotateAngle: 10,
time: 1000
});
});
````
建筑内的变化层次较多，摄像头的效果是可以以代码形式嵌入到场景中的，非开发人员也容易理解，ThingJS帮助你更好地进行项目演示和审核！
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69980539/viewspace-2711132/ ，如需转载，请注明出处，否则将追究法律责任。
