在three.js中添加视频作为纹理

问题描述

我正在研究 Three.js 的这个例子:

图像渲染良好，但我没有看到视频正在播放.它的位置只有白色文本.没有其他的.

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

解决方案

查看这个页面(Three.js 60版).
你可以看到他正在做更多的工作来让他的视频正常工作.
具体来说，就是将视频绘制到画布上，并将画布作为材质的纹理.

//创建视频元素video = document.createElement('视频');video.src = "textures/videos/Row1Col1.ogv";视频加载()；//必须在设置/更改源后调用视频播放()；videoImage = document.createElement('canvas');videoImage.width = 480;videoImage.height = 204;videoImageContext = videoImage.getContext('2d');//如果没有视频，背景颜色videoImageContext.fillStyle = '#000000';videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );videoTexture = new THREE.Texture( videoImage );videoTexture.minFilter = THREE.LinearFilter;videoTexture.magFilter = THREE.LinearFilter;

这个答案现在已经过时了(three.js v60)，查看替代方法的其他答案

I am working on this example of Three.js: http://threejs.org/examples/#canvas_geometry_panorama_fisheye

In this example, instead of using 6 images, I am using 5 images and one video as a texture (The video format is .ogv). I have edited the above example as follows to achieve what I desire:

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 )
);

The rest of the code is exactly same as in the aforementioned example.

Instead of getting the desired result (which has five images rendered onto the sphere and one video playing on one of the 'side'), I am getting this:

The images are being rendered fine, but I don't see a video playing. There's just white text in it's place. Nothing else.

I am new to Three.js and I am trying to use videos as textures for the first time. Please help me out by letting me know that how can I get the video played, in the specified region.

解决方案

Check the source of THIS page (Three.js version 60).
You can see he is doing a bit more to get his video working.
Specifically, drawing the video onto a canvas and using the canvas as the texture of the material.

// 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;

This answer is now old (three.js v60), view other answers for alternative methods

这篇关于在three.js中添加视频作为纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！