egret-docs-master/Engine3D/Egret3DModel/staticModel/README.md

4.9 KiB
Raw Blame History

静态模型需要先加载esm文件然后进行模型创建渲染。导出方法请参考《Egret3D 模型导出》部分。

首先,通过URLLoader加载已经制作好的模型文件。

var loader:egret3d.URLLoader = new egret3d.URLLoader();
        loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoad,this);
loader.load("resource/laohu/Mon_04.esm");

private onLoad(evt: egret3d.LoaderEvent3D)
{
}

当文件加载完成后,可以通过evt.loader.data访问到被加载的数据。

需要注意的是由于URLLoader内部已包含文件解析功能此时我们获取到的数据类型为egret3d.Geometry

当获取到egret3d.Geometry文件,我们可以借助Mesh来创建我们的可视化对象。

接下来,创建一个TextureMaterial纹理材质,并通过URLLoader加载模型对应的贴图文件。

与此同时,你可以创建Mesh对象并将其添加到view中。代码如下

private _mat:egret3d.TextureMaterial;
private _mesh:egret3d.Mesh;
private _geom:egret3d.Geometry;
private onLoad(evt: egret3d.LoaderEvent3D)
{
        this._geom = evt.loader.data;
        this._mat = new egret3d.TextureMaterial();
        this._mesh = new egret3d.Mesh(this._geom, this._mat);
        this._mesh.rotation = new egret3d.Vector3D(30,30,0);
        this._view.addChild3D( this._mesh );


        var loader:egret3d.URLLoader = new egret3d.URLLoader();
        loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onTextureLoad,this);
        loader.load("resource/laohu/Mon_04.png");
}

当我们的贴图纹理加载完成后,可以将其设置给TextureMaterialdiffuseTexture漫反射属性。代码如下:

private onTextureLoad(evt: egret3d.LoaderEvent3D)
{
        var texture:egret3d.ImageTexture = evt.loader.data;
        this._mat.diffuseTexture = texture;
}

至此,我们的静态模型使用的代码就已经全部完成,编译并运行,效果如图:

完整代码如下:

class Main extends egret.DisplayObject{
    // Canvas操作对象
    protected _egret3DCanvas: egret3d.Egret3DCanvas;
    
    // View3D操作对象
    protected _view: egret3d.View3D;
    /**
    * look at 摄像机控制器 。</p>
    * 指定摄像机看向的目标对象。</p>
    * 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。</p>
    * 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。</p>
    * 3.滑动鼠标滚轮可以控制摄像机的视距。</p>
    */
    private cameraCtl: egret3d.LookAtController;

    // 灯光组
    private lights: egret3d.LightGroup = new egret3d.LightGroup();

    // 模型对象
    private model: egret3d.Mesh;
    
    // 待机动画
    private idle: egret3d.SkeletonAnimationClip;
    
    // 加载界面
    private loadingUI = new LoadingUI();
    public constructor() {
        super();
        
        //创建Canvas对象。
        this._egret3DCanvas = new egret3d.Egret3DCanvas();
        //Canvas的起始坐标页面左上角为起始坐标(0,0)。
        this._egret3DCanvas.x = 0;
        this._egret3DCanvas.y = 0;
        //设置Canvas页面尺寸。
        this._egret3DCanvas.width = window.innerWidth;
        this._egret3DCanvas.height = window.innerHeight;
        
        //创建View3D对象,页面左上角为起始坐标(0,0)
        this._view = new egret3d.View3D(0,0,window.innerWidth,window.innerHeight);
        //当前对象对视位置,其参数依次为:
        //@param pos 对象的位置
        //@param target 目标的位置
        this._view.camera3D.lookAt(new egret3d.Vector3D(0,0,1000),new egret3d.Vector3D(0,0,0));
        //View3D的背景色设置
        this._view.backColor = 0xffffffff;
        //将View3D添加进Canvas中
        this._egret3DCanvas.addView3D(this._view);
        
        //启动Canvas。
        this._egret3DCanvas.start();
        
        this.loadingUI.CloseLoadingView();

        var loader:egret3d.URLLoader = new egret3d.URLLoader();
        loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoad,this);
        loader.load("resource/laohu/Mon_04.esm");

    }
    
    private _mat:egret3d.TextureMaterial;
    private _mesh:egret3d.Mesh;
    private _geom:egret3d.Geometry;
    private onLoad(evt: egret3d.LoaderEvent3D)
    {
        this._geom = evt.loader.data;
        this._mat = new egret3d.TextureMaterial();
        this._mesh = new egret3d.Mesh(this._geom, this._mat);
        this._mesh.rotation = new egret3d.Vector3D(30,30,0);
        this._view.addChild3D( this._mesh );


        var loader:egret3d.URLLoader = new egret3d.URLLoader();
        loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onTextureLoad,this);
        loader.load("resource/laohu/Mon_04.png");
    }

    private onTextureLoad(evt: egret3d.LoaderEvent3D)
    {
        var texture:egret3d.ImageTexture = evt.loader.data;
        this._mat.diffuseTexture = texture;
    }
    
}