百度商橋

在線咨詢

400-660-9989

[email protected]

如何使用PUI3DCreator快速開發3D園區項目

發布時間:2020-2-28 19:02:31

一.項目案例介紹

為了利于客戶更加了解PUI3DCreator的功能,本篇將以UIPower智慧園區項目為例,對PUI3DCreator這款工具做更加全面的介紹。

UIpower案列-PUI3DCreator

二.組件如何運用

之前 《3D可視化開發工具PUI3DCreator的操作方法》 這篇文章中,簡單的提到過組件,但是并沒有詳細介紹過它。組件好比一個個預先準備好的零部件,組件可以有自己的屬性和方法。屬性是組件數據的簡單訪問者,方法則是組件的一些簡單而可見的功能。使用組件可以實現拖放式編程、快速的屬性處理以及真正的面向對象的設計。

PUI3DCreator中組件是用JavaScript語言編寫的,組件推薦寫在獨立的js文件中,使用時直接通過script標簽引入到工具庫代碼的下方。

UIpower案列-PUI3DCreator

三.組件編寫與對象操作方法

1.基本內置組件介紹

PUI3DCreator中的組件分為內置組件與自定義組件。自定義組件的編寫方法鏈接:http://www.590148.buzz/news/PUI3DCreator.html;

內置組件用于開發人員完成基本的3D場景搭建和效果呈現。比如geomery組件與material組件,用于在實體中構建3D對象,gltf-model組件用于導入外部模型,這也是該次園區項目搭建的基礎。就以項目中的代碼解釋下組件。

UIpower案列-PUI3DCreator

PUI3DCreator通過<pui3d-entity>元素表示實體,組件將以屬性的形式插入,組成它的樣式、功能、行為。每個實體都有位置(position)、縮放比例(scale)、旋轉角度(rotation)三個屬性,可以直接用PUI3DCreator來修改屬性值,調整模型對象。

UIpower案列-PUI3DCreator

實體內的屬性名就是組件名,所以命名時注意用英文,而且不能有大寫字母。屬性值就是組件內的參數值,可以通過修改參數值得到不同的展示效果。就拿gltf-mode組件舉例,選中,模型物體,修改路徑,模型自動變更。

UIpower案列-PUI3DCreator UIpower案列-PUI3DCreator
UIpower案列-PUI3DCreator

2.關于對象的操作方法

PUI3DCreator支持js的dom操作,比如整個場景可以通過以下語句獲得: var sceneEl = document.querySelector('a-scene'); sceneEl.object3D調用.object3D方法,可以直接獲得threeJS對象。工具中直接點中物體獲得該對象,既可以進行相關的拉伸、平移等基礎操作,也可對其進行組件附加的高級應用。
設置與去除事件監聽,可以通過以下形式操作:
實體.addEventListener(“事件名”,function(){}); 實體.removeEventListener(“事件名”,function(){});
觸發事件操作:
實體.emit(“事件名”);
工具的基類中具有添加與刪除的部分相關方法:
實體.getObject3D('mesh'); 實體.getObject3D('light'); 實體.setObject3D('light', new THREE.PointLight()); 實體.removeObject3D('light'); 實體.setAttribute(“組件名”); 實體.getAttribute(“組件名”);

3.對象的動效設置

PUI3DCreator中自帶有animation組件(基于tween動畫庫編寫)。 開發人員也可運用TWEENMax.js、anime.js等等動畫庫通過.object3D方法進行對象操作。

<pui3d-entity rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></pui3d-entity>

UIpower案列-PUI3DCreator

四.組件開發的相關技術總結

組件編寫時,開發人員需要按照一定的規范,組件本身就具有靈活性和復用性,寫法上不可只滿足單個項目要求。事件的監聽上注意好事件的排序,監聽觸發完后注意使用remove方法去除監聽。PUI3DCreator具有可視化添加組件和效果調試的功能,所以要利用該特點進行相關調試。后續我們將陸續推出更多功能,優化工具效果,提高我們的產品質量,為3D開發人員的工作提供更多便利。





捕鱼大师最新官网