我正在处理 Three.js 的这个示例:http://threejs.org/examples/#canvas_geometry_panorama_fisheye
在此示例中,我没有使用 6 张图像,而是使用 5 张图像和一个视频作为纹理(视频格式为 .ogv)。我对上面的例子进行了如下编辑以实现我的愿望:
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 的来源页面(Three.js 版本 60)。
您可以看到他在视频工作方面做得更多。
具体来说,将视频绘制到 Canvas 上,并使用 Canvas 作为 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;
这个答案现在是旧的(three.js v60),查看其他答案以获得替代方法
关于javascript - 在 three.js 中添加视频作为纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37884013/