66 lines
1.9 KiB
Markdown
66 lines
1.9 KiB
Markdown
---
|
|
title: egret3d 用视频video做纹理贴图
|
|
id: '267'
|
|
categories:
|
|
- 分享
|
|
tags:
|
|
- egret
|
|
- video
|
|
- 纹理贴图
|
|
- Texture
|
|
date: 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();
|
|
|
|
}
|
|
```
|
|
|
|
效果->[传送门](https://demo.dengtongyu.com/videocude/)
|
|
|
|
|