hexo-blog/source/_posts/egret3d-用视频video做纹理贴图.md

title, id, categories, tags, date

title	id	categories	tags	date
egret3d 用视频video做纹理贴图	267	分享	egret video 纹理贴图 Texture	2018-01-29 17:50:02

前段时间学习了一下egret3d，然后有些奇妙的想法，如果用视频video来做纹理贴图可不可以呢？于是就尝试了一下，效果还不错。

思路也很简单，创建一个立方体，然后把立方的纹理设置成一个视频video，主要代码如下

     public createGameScene() {

        this.createVideoTexture();

        this.loaderSkyBox();
    }
    //创建视频纹理
    private createVideoTexture() {
        this.video = new egret3d.VideoTexture(640,264);
        this.video.source = "resource/oceans-clip.mp4";
    }

    // 加载资源
    private loaderSkyBox() {
        this.queueLoader = new egret3d.QueueLoader();
        this.queueLoader.load("resource/background.jpg");
        this.queueLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onSkyBoxTexture, this);
    }

    // 资源加载完成 创建立方体
    private onSkyBoxTexture(e: egret3d.LoaderEvent3D) {
        // 设置背景
        let panelIamge: egret3d.ITexture = this.queueLoader.getAsset("resource/background.jpg");
        this.view.backImage = panelIamge;

        // 创建立方体和cube贴图
        this.ge = new egret3d.CubeGeometry(200, 200, 200);
        this.mat = new egret3d.TextureMaterial(panelIamge);
        this.mat.diffuseTexture = this.video;

        this.mesh = new egret3d.Mesh(this.ge,this.mat);
        this.view.addChild3D(this.mesh);

        // 更新摄像机信息
        this.cameraCtl.distance = 1000;
        this.cameraCtl.rotationX = 45;
        this.cameraCtl.rotationY = 45;

        this.cameraCtl.update();
        
    }

效果->传送门