我正在研究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 )
);
Run Code Online (Sandbox Code Playgroud)
其余代码与上述示例完全相同.
我没有得到想要的结果(有五个图像渲染到球体上,一个视频在'侧面'上播放),我得到了这个:
图像渲染得很好,但我没有看到视频播放.它的位置只有白色文字.没有其他的.
我是Three.js的新手,我第一次尝试将视频用作纹理.请告诉我如何在指定区域播放视频,请帮助我.