javascript – 在three.js中将视频添加为纹理

2019-05-19 12:25:16 阅读：159 来源： 互联网

我正在研究Three.js的这个例子：http://threejs.org/examples/#canvas_geometry_panorama_fisheye

在这个例子中,我使用5个图像和一个视频作为纹理(视频格式为.ogv),而不是使用6个图像.我已按如下方式编辑上述示例以实现我的目标：

video = document.createElement('video');
video.autoplay = true;
video.src = "textures/videos/Row1Col1.ogv";
var videoTexture = new THREE.Texture(video);
    videoTexture.needsUpdate = true;

var materials = [
    videoTexture, // right
    loadTexture( 'textures/cube/Park2/negx.jpg' ), // left
    loadTexture( 'textures/cube/Park2/posy.jpg' ), // top
    loadTexture( 'textures/cube/Park2/negy.jpg' ), // bottom
    loadTexture( 'textures/cube/Park2/posz.jpg' ), // back
    loadTexture( 'textures/cube/Park2/negz.jpg' ) // front
];

mesh = new THREE.Mesh( 
    new THREE.BoxGeometry( 300, 300, 300, 32, 32, 32 ), 
    new THREE.MultiMaterial( materials ) 
);

其余代码与上述示例完全相同.

我没有得到想要的结果(有五个图像渲染到球体上,一个视频在’侧面’上播放),我得到了这个：

图像渲染得很好,但我没有看到视频播放.它的位置只有白色文字.没有其他的.

我是Three.js的新手,我第一次尝试将视频用作纹理.请告诉我如何在指定区域播放视频,请帮助我.

解决方法:

检查THIS页面的来源.
你可以看到他正在做更多的事情让他的视频正常工作.
具体来说,将视频绘制到画布上并使用画布作为材质的纹理.

// create the video element
video = document.createElement( 'video' );
video.src = "textures/videos/Row1Col1.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement( 'canvas' );
videoImage.width = 480;
videoImage.height = 204;

videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

videoTexture = new THREE.Texture( videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

标签：javascript,rendering,three-js
来源： https://codeday.me/bug/20190519/1134959.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在three.js中将视频添加为纹理