Egret3D之初体验

男娘i 2022-01-15 07:01 199阅读 0赞

# 一 : 资源 #

Ⅰ,Egret3D官方文档 : [https://developer.egret.com/cn/docs/3d/docs/guide/getting-started-introduction/][https_developer.egret.com_cn_docs_3d_docs_guide_getting-started-introduction]

![Egret3D之初体验][Egret3D]  
Ⅱ,安装3D编辑器(***以前叫paper , 现在交 Egret Pro***)  
地址 : [http://developer.egret.com/cn/docs/3d/][http_developer.egret.com_cn_docs_3d]

**①,确定3D编辑器如下**  
![Egret3D之初体验][Egret3D 1]  
②,下载并安装paper编辑器  
![Egret3D之初体验][Egret3D 2]  
③,安装完毕出现如下图标  
![Egret3D之初体验][Egret3D 3]

# 二 : 创建项目 #

Ⅰ : 装备Egret 5.3.x版本库 , (这个是目前最新的).  
![Egret3D之初体验][Egret3D 4]  
①,加压版本库如下:  
![Egret3D之初体验][Egret3D 5]  
②,打开Egret Launcher软件 , 切换至安装本地版本 , 如下:  
![Egret3D之初体验][Egret3D 6]  
③,将解压后的版本文件夹( egret-core-5.3.x ) 拖入到Egret Launcher工作区 , 如下  
![Egret3D之初体验][Egret3D 7]

## Ⅱ : 打开Egret Pro(Paper)编辑器   ①,创建纹理(建textures文件夹) ##

重点 : 需要在windows的资源管理器中创建图片 , 会自动生成纹理相关文件 . 目前还不支持拖动 . 这是一个bug  
![Egret3D之初体验][Egret3D 8]  
②,创建材质(建materials文件夹)  
![Egret3D之初体验][Egret3D 9]  
将名称命名为 my\_test.mat.json  
编辑材质如下:  
![Egret3D之初体验][Egret3D 10]

③,在默认scene中创建cube , 属性如下:  
![Egret3D之初体验][Egret3D 11]

④,scenes结构如下:  
![Egret3D之初体验][Egret3D 12]

# 三 : 运行结果 #

![Egret3D之初体验][Egret3D 13]

总体来说 , 有一个简单的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(自定义的)  
![Egret3D之初体验][Egret3D 14]

③ , 新建一个cube绑定自定义脚本Cube  
![Egret3D之初体验][Egret3D 15]

④ , 运行如下  
![Egret3D之初体验][Egret3D 16]

转载于:https://blog.51cto.com/aonaufly/2392107

[https_developer.egret.com_cn_docs_3d_docs_guide_getting-started-introduction]: https://developer.egret.com/cn/docs/3d/docs/guide/getting-started-introduction/
[Egret3D]: https://s1.51cto.com/images/blog/201905/10/e65ea20b12cb4daff9d778606821e984.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[http_developer.egret.com_cn_docs_3d]: http://developer.egret.com/cn/docs/3d/
[Egret3D 1]: https://s1.51cto.com/images/blog/201905/10/ae20e27831ff303861b7b95e99e719dc.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 2]: https://s1.51cto.com/images/blog/201905/10/e8ae5455568fdd5e96048200b2a06204.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 3]: https://s1.51cto.com/images/blog/201905/10/6c0b57979e25770037f1f3ea6d410ce6.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 4]: https://s1.51cto.com/images/blog/201905/10/5ae1511be890e33d0b78721795d8ff50.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 5]: https://s1.51cto.com/images/blog/201905/10/30e359edfd5c644b8953255d28da834c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 6]: https://s1.51cto.com/images/blog/201905/10/01972373ddb12bda0de59fa7684a0b4e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 7]: https://s1.51cto.com/images/blog/201905/10/8a85f761b52b09f74286f4b2e5241eda.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 8]: https://s1.51cto.com/images/blog/201905/10/c6243fb659114660e5eb4d854a01d436.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 9]: https://s1.51cto.com/images/blog/201905/10/d1ef3ace79fb2d6e7bf28beb5ed1ada1.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 10]: https://s1.51cto.com/images/blog/201905/10/2d044f819ef1cde2c64dc9cdfbd49d68.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 11]: https://s1.51cto.com/images/blog/201905/10/ac69e4169911ea14f7cff0cbca4a9acc.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 12]: https://s1.51cto.com/images/blog/201905/10/1a1fb844082d5b4ca043c3f482c9e2c4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 13]: https://s1.51cto.com/images/blog/201905/10/12ea50c814bf8bf8bb4739f31f095c2c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 14]: https://s1.51cto.com/images/blog/201905/29/952ee08cd59b2d5eb08aa1f912a2a448.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 15]: https://s1.51cto.com/images/blog/201905/29/653064618b69c34ab97c7eaf2ba27e06.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Egret3D 16]: https://s1.51cto.com/images/blog/201905/29/555fbcaf889a26c363bf9edeec9e6d03.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=