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演示
填寫即可獲得免費服務和資料下載/工作人員基于您的需求遠程 演示數字孿生解決方案

姓名



公司名稱



工作郵箱



手機號



所在城市



我想要


 數據中心

 數據可視化大屏

 我搭世界

 成為合作伙伴



其他需求


一级黄色录像影片 - 视频 - 在线观看 - 电影影院 - 品赏网