提供Verge3D教程和Web3D开发技术服务
【Verge3D】视频纹理

【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;” />
  3.     <source src=“sintel.ogv” type=“video/ogg; codecs=&quot;theora, vorbis&quot;” />
  4. <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下面
  3.     var screen, video, texture, material
  4.     video =document.getElementById(“video”);
  5.     screen = app.scene.getObjectByName(“screen”);
  6.     texture = new v3d.VideoTexture(video);
  7.     texture.minFilter = v3d.LinearFilter;
  8.     texture.format = v3d.RGBFormat;
  9.     material = new v3d.MeshBasicMaterial({map : texture});
  10.     screen.material = material;
  11.     app.animate();
  12. }

5.运行video.html查看效果

 

zjbcool

zjbcool
关闭菜单
×
×

产品入口: 产品添加到购物车