three.js - 通过 Three.js 使用视频作为纹理

Question

我正在尝试使用 .mp4 视频作为纹理创建一个简单的矩形。根据 three.js 文档（http://threejs.org/docs/#Reference/Textures/Texture），这应该是直截了当的。

当我放置视频链接时，我得到的只是一个没有纹理的黑色盒子。我已经通过用 jpg 图像替换视频来测试代码，它工作正常。有人可以解释一下我做错了什么。

我已经看到了通过首先将视频链接到视频元素然后将帧复制到画布上来播放视频的示例。我想尝试一下three.js文档中提到的直接方式。

Answer 1

将视频视为一系列图像。因此，要在您的 3D 对象上“播放”该视频 - 您必须将该序列的每一帧传递给您的材质，然后更新该材质。

好的起点在这里：https ://github.com/mrdoob/three.js/wiki/Updates

在这里：http ://stemkoski.github.io/Three.js/Video.html

Answer 2

第 1 步：将视频添加到您的 HTML 并“隐藏”它：

<video id="video" playsinline webkit-playsinline muted loop autoplay width="320" height="240" src="some-video.mp4" style="display: none;"></video>

第2步：

//Get your video element:
const video = document.getElementById('video');

//Create your video texture:
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial =  new THREE.MeshBasicMaterial( {map: videoTexture, side: THREE.FrontSide, toneMapped: false} );
//Create screen
const screen = new THREE.PlaneGeometry(1, 1);
const videoScreen = new THREE.Mesh(screen, videoMaterial);
scene.add(videoScreen);