写点什么

从零开始学习 3D 可视化之摄像机

用户头像
森友小锘
关注
发布于: 3 小时前

数字孪生可视化场景中的摄像机,与大家拍照时使用相机的功能相似,数字孪生可视化场景中用摄像机来确定观察 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];  // 摄像机水平移动 10mapp.camera.move(10, 0); // 摄像机垂直移动 10mapp.camera.move(0, 10); // 摄像机向前推进 10mapp.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;
复制代码

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

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

发布于: 3 小时前阅读数: 3
用户头像

森友小锘

关注

还未添加个人签名 2021.04.28 加入

还未添加个人简介

评论

发布
暂无评论
从零开始学习3D可视化之摄像机