您好,登錄后才能下訂單哦!
這篇文章主要介紹了基于Cesium怎么實現(xiàn)拖拽3D模型的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇基于Cesium怎么實現(xiàn)拖拽3D模型文章都會有所收獲,下面我們一起來看看吧。
然后這篇博文介紹的主要不是添加模型,但是也簡單把代碼直接粘貼過來吧,就不詳細(xì)說了。
// 添加基站模型 function addSite() { let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0); // 設(shè)置模型方向 let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0); let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll); // 添加模型 let model = viewer.entities.add({ id: 'site', // 模型id position: position, // 模型位置 orientation: orientation, // 模型方向 model: { uri: './models/siteModel/scene.gltf', // 模型路徑,自己換成自己的模型 scale: 1, show: true, // 模型是否可見 }, description: '基站模型' // 添加模型描述 }); viewer.trackedEntity = model; // 視角切換到模型 }
上邊的代碼就完成了在界面上添加模型功能。
其實拖拽就是給這個cesium加一個監(jiān)聽事件。
比如說這個拖拽的簡單邏輯分析哈:
1、鼠標(biāo)按下事件,如果有模型的話,可以給模型設(shè)置一個顏色,知道按下選中的是哪個模型。
2、然后再監(jiān)聽鼠標(biāo)拖拽事件,獲取鼠標(biāo)拖拽的位置,賦值給模型。
3、鼠標(biāo)抬起事件,結(jié)束鼠標(biāo)移動事件,然后把顏色改回去。
// 注冊事件 function setHandler() { handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 注冊鼠標(biāo)按下事件 handler.setInputAction((e) => { const pick = viewer.scene.pick(e.position); if (!Cesium.defined(pick)) { return; };// 如果點擊空白區(qū)域,則不往下執(zhí)行 viewer.scene.screenSpaceCameraController.enableRotate = false;// 將相機(jī)鎖定,不然后續(xù)移動實體時相機(jī)也會動 pick.id.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1) //設(shè)置顏色 // 注冊鼠標(biāo)拖拽事件 viewer.screenSpaceEventHandler.setInputAction((arg) => {// 為viewer綁定MOUSE_MOVE事件監(jiān)聽器(執(zhí)行函數(shù),監(jiān)聽的事件) const position = arg.endPosition;// arg有startPosition與endPosition兩個屬性,即移動前后的位置信息:Cartesian2對象 const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);//將Cartesian2轉(zhuǎn)為Cartesian3 pick.id.position._value = cartesian }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 綁定鼠標(biāo)抬起事件 viewer.screenSpaceEventHandler.setInputAction(({ position }) => {//為viewer綁定LEFT_UP事件監(jiān)聽器(執(zhí)行函數(shù),監(jiān)聽的事件) viewer.scene.screenSpaceCameraController.enableRotate = true;// 取消相機(jī)鎖定 pick.id.model.color = null //設(shè)置顏色 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 解除viewer的MOUSE_MOVE事件監(jiān)聽器 }, Cesium.ScreenSpaceEventType.LEFT_UP) }, Cesium.ScreenSpaceEventType.LEFT_DOWN); }
關(guān)于“基于Cesium怎么實現(xiàn)拖拽3D模型”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“基于Cesium怎么實現(xiàn)拖拽3D模型”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。