WELCOME TO BIG DATA VISUALIZATION

新闻中心 

最新的一体化系统新闻资讯 时刻在线 持续服务
CRAFTSMANSHIP TO
CREATE A “SAID” WORKS

使用我搭世界SDK创建3D应用之相机操作(二)

发布于 2022年09月26日

这期文章讲解如何使用MJGL.JS对3D场景进行相机操作,关于如何运行3D场景的问题,想了解的小伙伴可以查看上一期的文章。

 

MJGL.JS的相机操作含有通用相机(Unicersal Camera)和弧度旋转相机(Arc Rotate Camera)。

 

1、通用相机(Unicersal Camera),可以使用键盘、鼠标、触摸板、游戏手柄输入控制,通用相机一般在场景中使用第一人称。

 

2、弧度旋转相机(Arc Rotate Camera),这个相机总是指向一个给定的目标位置,并且可以围绕目标旋转,目标是旋转的中心。它可以用鼠标来控制,也可以用触摸事件来控制。对于目标的位置可以设置三个参数,alpha(弧度)的纵向旋转,beta(弧度)横向旋转以及与目标的距离。

 

1

 

其中我们MJGL.JS中是使用弧度旋转相机(Arc Rotate Camera),是对场景查看和操作中的不同视角调节,通过调节alpha、beta、target这个三个参数来进行视角操作;并且我们MJGL.JS是用JavaScript来调用的,现在就来进行深入的学习吧!

 

 

一、设置楼层最佳相机视角

 

1、获取当前视角

 

MJGL.objectMgr.GetCurrentPerspective();

 

效果:

 

2

 

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中的鼠标事件!

 

3

建模 三维可视化
预约产品DEMO演示
填写即可获得免费服务和资料下载/工作人员基于您的需求远程 演示数字孪生解决方案

姓名



公司名称



工作邮箱



手机号



所在城市



我想要


 数据中心

 数据可视化大屏

 我搭世界

 成为合作伙伴



其他需求