小编Gal*_*rma的帖子

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

我正在研究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的新手,我第一次尝试将视频用作纹理.请告诉我如何在指定区域播放视频,请帮助我.

javascript rendering three.js

7
推荐指数
2
解决办法
6930
查看次数

标签 统计

javascript ×1

rendering ×1

three.js ×1