我正在研究Three.js的示例:http://threejs.org/examples/#canvas_geometry_panorama_fisheye
在这个例子中,我使用了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的新手,第一次尝试使用视频作为纹理。 请告诉我如何在指定区域播放视频,帮帮我。