Egret3D之初體驗

• 2020 年 1 月 10 日
• 筆記

一 : 資源

Ⅰ,Egret3D官方文檔 : https://developer.egret.com/cn/docs/3d/docs/guide/getting-started-introduction/

Ⅱ,安裝3D編輯器(以前叫paper , 現在交 Egret Pro) 地址 : http://developer.egret.com/cn/docs/3d/

①,確定3D編輯器如下

②,下載並安裝paper編輯器

③,安裝完畢出現如下圖標

二 : 創建項目

Ⅰ : 裝備Egret 5.3.x版本庫 , (這個是目前最新的).

①,加壓版本庫如下:

②,打開Egret Launcher軟件 , 切換至安裝本地版本 , 如下:

③,將解壓後的版本文件夾( egret-core-5.3.x ) 拖入到Egret Launcher工作區 , 如下

Ⅱ : 打開Egret Pro(Paper)編輯器 ①,創建紋理(建textures文件夾)

重點 : 需要在windows的資源管理器中創建圖片 , 會自動生成紋理相關文件 . 目前還不支持拖動 . 這是一個bug

②,創建材質(建materials文件夾)

將名稱命名為 my_test.mat.json 編輯材質如下:

③,在默認scene中創建cube , 屬性如下:

④,scenes結構如下:

三 : 運行結果

總體來說 , 有一個簡單的3D編輯器確實比Laya要好很多 . 只是Egret Pro軟件還有不少的問題待優化 . 相信在不久會得到改善…

補充 —

① , 簡單腳本

export default class Cube extends paper.Behaviour{        // public constructor() {      //     super();      //     this.onStart();      // }      onStart() : void{          let $meshFilter : egret3d.MeshFilter = this.entity.getComponent( egret3d.MeshFilter ) as egret3d.MeshFilter;          // $meshFilter.mesh = egret3d.DefaultMeshes.CUBE;          RES.getResAsync( "Assets/textures/icon.png" , (value: egret3d.Texture, key: string) : void => {              const $texture : egret3d.Texture = RES.getRes("Assets/textures/icon.png") as egret3d.Texture;              let $meshRender : egret3d.MeshRenderer = this.entity.getComponent( egret3d.MeshRenderer ) as egret3d.MeshRenderer;              ( $meshRender.material as egret3d.Material).setTexture( "map" , $texture );          } , this );      }  }

② , 注意註冊腳本 Cube(自定義的)

③ , 新建一個cube綁定自定義腳本Cube

④ , 運行如下