【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查看效果

 

文章
BakeMyScan-为自动建模提供的模型优化工具

关于BakeMyScan BakeMyScan是一个免费的开源(GNU GPL v3)插件,基于blender2.79。该项目旨在为模型优化提供强大的工具箱,并可用于摄影测量和3D扫描,Sketchfab发布,游戏资产创建,雕刻,3D打印和 …

文章
3D美术的逆袭-从Web3D到桌面应用开发

如今前端技术真是无所不能,不仅能做前端网页开发,还涉足后端服务器、移动应用,甚至于桌面应用开发,简直有一统天下的气魄。对于移动端我还能理解,html5具有天然的跨平台优势,开发一些C/S架构的移动应用也属于正常现象,但是,对于桌面应用这方天 …

文章
虚拟主机HTTPS加密访问设置

https是安全版的http传输协议,简单地说就是http+ssl证书,因此加密的详细内容就需要ssl证书。https协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。 https协议 …