我分享技术,你专注艺术。

【Verge3D】视频纹理

注:微信小程序无法正确显示代码,可点击右下角更多功能,阅读原文查看

1.在app管理中创建一个名为video的工程;

2.在video.blend文件中创建一个名为screen的面片,后面将在这个面片上呈现视频纹理;

3.在video.html文件中添加如下代码:

    1. <video id=“video” autoplay=“autoplay” loop=“loop” width=“300” height=“150”>
    2.     <source src=“sintel.mp4” type=“video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;” />
  1.     <source src=“sintel.ogv” type=“video/ogg; codecs=&quot;theora, vorbis&quot;” />
  2. <video>

视频名字可替换,其它的不要修改。.ogg格式可以通过格式工厂等工具转换。
代码解释:为了保证在所有浏览器上都能正确播放视频,需要制作两个版本的视频.mp4和.ogg格式,因为各大浏览器对video标签的支持各不相同,具体如下:

视频格式

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

4.在video.js文件找到runCode函数,在函数内加入如下代码:

    1. function runCode(app) {
    2.     // 复制下面的代码到runCode下面
    1.     var screen, video, texture, material
    1.     video =document.getElementById(“video”);
    2.     screen = app.scene.getObjectByName(“screen”);
    1.     texture = new v3d.VideoTexture(video);
    2.     texture.minFilter = v3d.LinearFilter;
    1.     texture.format = v3d.RGBFormat;
    2.     material = new v3d.MeshBasicMaterial({map : texture});
    1.     screen.material = material;
  1.     app.animate();
  2. }

5.运行video.html查看效果

example file,download

zjbcool

zjbcool
关闭菜单