新闻中心
CREATE A “SAID” WORKS
使用我搭世界SDK创建3D应用之相机操作(二)
这期文章讲解如何使用MJGL.JS对3D场景进行相机操作,关于如何运行3D场景的问题,想了解的小伙伴可以查看上一期的文章。
MJGL.JS的相机操作含有通用相机(Unicersal Camera)和弧度旋转相机(Arc Rotate Camera)。
1、通用相机(Unicersal Camera),可以使用键盘、鼠标、触摸板、游戏手柄输入控制,通用相机一般在场景中使用第一人称。
2、弧度旋转相机(Arc Rotate Camera),这个相机总是指向一个给定的目标位置,并且可以围绕目标旋转,目标是旋转的中心。它可以用鼠标来控制,也可以用触摸事件来控制。对于目标的位置可以设置三个参数,alpha(弧度)的纵向旋转,beta(弧度)横向旋转以及与目标的距离。
其中我们MJGL.JS中是使用弧度旋转相机(Arc Rotate Camera),是对场景查看和操作中的不同视角调节,通过调节alpha、beta、target这个三个参数来进行视角操作;并且我们MJGL.JS是用JavaScript来调用的,现在就来进行深入的学习吧!
一、设置楼层最佳相机视角
1、获取当前视角
MJGL.objectMgr.GetCurrentPerspective();
效果:
2、设置视角
通过第一步获取的相机视角值。
MJGL.projectData.SetStoreyAngle([
{
sceneId: this.objectId, //需要调整视角的楼层编码
visualAngle: {
alpha: 1.5580901449562032,
focus: { x: -1.844, y: 1.495, z: -0.482 },
radius: 16.22968234387436,
beta: 1.1397125596803954,
}, //相机视角值
},
]);
MJGL.objectMgr.Perspective(); //重置3D视角
二、设置2D视角
把场景模型以平面图形的形式展示。
MJGL.objectMgr.Orthographic();
三、设置3D视角
把上一步2D视角恢复回3D视角。
MJGL.objectMgr.Perspective();
四、飞向模型
通过模型编号,进行快速找到该模型在场景的位置,并且飞到它附近。
MJGL.objectMgr.FlyTo(this.objectId);
五、正向飞向模型
通过模型编号,进行快速找到该模型在场景的位置,并且正视飞到它正面。
MJGL.objectMgr.DisplayObject(this.objectId);
六、自定义飞向模型
可以根据用户所需要得视角进行飞向模型。
1、先锁定需要自定义飞向的模型设备
MJGL.objectMgr.SetCameraTarget(true, this.objectId);
2、手动调整合适角度
this.getPerspectiveValue = MJGL.objectMgr.returnTargetOff();
3、飞向设备
let a = JSON.parse(this.getPerspectiveValue);
MJGL.objectMgr.FlyToByAngle(
this.objectId,
a.alpha,
a.radius,
a.beta,
a.Xoffset,
a.Yoffset,
a.Zoffset
);
七、场景旋转
可以使场景进行逆时针旋转,更好的查看全景;
MJGL.render.isAutoRotation = true;
八、代码
以上就是MJGL.JS中的相机操作,下期讲解MJGL.JS中的鼠标事件!
相关新闻
- 机房三维建模常用技巧——怎么设置模型...
- 麦景数据中心可视化管理平台版本迭代记...
- 推动“数字孪生”城市建设|《广州市数...
- 如何制作无缝贴图
- 使用SDK(MJGL.JS)实现温度...
- 如何使用编辑器搭建配电、制冷拓扑图
- 智慧档案库房可视化管理平台
- 初学者如何做一个机房设备模型
- echarts水滴图在纯HTML开发...
- 焕然一新、新版我搭世界如期上线
- 数字孪生产业技术白皮书(2022版)...
- 快速制作机房3D效果图教程
- 使用我搭世界SDK创建属于你的一个3...
- 智慧校园数字孪生平台
- 技术|如何使用BlenderGIS获...
- 如何帮助零基础的客户快速搭建三维场景
- 使用我搭世界SDK创建3D应用之相机...
- 如何快速上手数据可视化设计
- 智慧楼宇三维可视化管理平台
- 使用SDK(MJGL.JS)对3D场...
- 某供电局机房三维可视化系统资产管理及...
- 浅谈数据中心三维可视化产品功能解析
- Echarts柱状图在JavaScr...