关于javascript:从零开始学习3D可视化之摄像机

数字孪生可视化场景中的摄像机，与大家拍照时应用相机的性能类似，数字孪生可视化场景中用摄像机来确定察看 3D 场景的视角。摄像机蕴含两个重要的地位参数：镜头地位 position 和被拍摄物体的地位 target (又叫指标点)。

1、设置摄像机地位

将上面的代码输出到我的项目文件中，获取以后摄像机 camera 的 position 和 target 属性，就能够失去数字孪生可视化场景中摄像机的地位信息，也能够将其打印在控制台中。

// 加载场景代码 
var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址});
 
var pos = app.camera.position; // 获取摄像机镜头地位
var target = app.camera.target; // 获取摄像机指标点地位
 
console.log(pos);
console.log(target);

运行我的项目后，在预览窗口，能够展现出创立的数字孪生可视化物体，如下图所示。

通过摄像机的 fit() 办法，也能够设置摄像机地位。

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址});
 
// 加载实现事件 
app.on('load', function (ev) {
 /* 参数:
 ev.campus 园区, 类型:Campus
 ev.buildings 园区建筑物, 类型:Selector
 */
 var campus = ev.campus;
 console.log('after load' + campus.id);
 
 app.camera.fit({position: [100, 100, 100],
 target: [0, 0, 0]
 });
});

运行我的项目后，在预览窗口，能够展现出创立的数字孪生可视化物体，如下图所示。

2、设置摄像机航行
通过 camera 的 flyTo() 办法，能够让摄像机航行到某地位或物体。

app.camera.flyTo({name: value,})

能够通过 app.camera.flying 属性，判断摄像机是否在航行。
能够通过 app.camera.stopFlying() 来进行摄像机航行。
3、设置摄像机旋转
通过 camera 的 rotateAround() 办法，能够让摄像机绕某点或某物体旋转

app.camera.rotateAround({name: value,})

4、管制摄像机交互
ThingJS 摄像机提供了默认的平移、旋转、缩放的交互操作。
能够通过以下脚本对摄像机增加不同的交互管制，依照本人的需要进行抉择。

// 敞开所有默认的交互操作（旋转、平移、缩放）；app.camera.inputEnabled = false;
// 敞开默认的平移操作；app.camera.enablePan=false; 
// 敞开默认的旋转操作；app.camera.enableRotate=false; 
// 敞开默认的缩放操作；app.camera.enableZoom=false; 
 
// 设置鼠标输出时挪动摄像机的速度
app.camera.mousePanSpeed = 10; 
// 设置键盘输入时挪动摄像机的速度
app.camera.keyPanSpeed = 10; 
 
// 设置摄像机程度角度范畴[最小值, 最大值]
app.camera.yAngleLimitRange = [30, 60]; 
// 设置摄像机俯仰角度范畴[最小值, 最大值]
app.camera.xAngleLimitRange = [30, 60]; 
 
// 摄像机程度挪动 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); 
 
// 切换成 3D 模式
app.camera.viewMode = THING.CameraView.Normal; 
// 切换成 2D 模式
app.camera.viewMode = THING.CameraView.TopView;

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