在 Three.js 中播放全景视频可以使用 THREE.VideoTexture 类来创建视频纹理，并将其应用到球体几何体上，从而实现全景视频效果。
以下是一个简单的示例，演示如何在 Three.js 中播放全景视频：
- 引入 Three.js 库和其他必要的库
Copy
<script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
在这个示例中，我们只需要引入 Three.js 库。
- 创建 Three.js 场景、相机和渲染器
reasonmlCopy
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
在这个示例中，我们创建了 Three.js 场景、相机和渲染器。其中相机使用透视相机（PerspectiveCamera），并设置了视角、屏幕宽度和高度等参数。
- 创建球体几何体并应用视频纹理
iniCopy
var video = document.createElement('video');
video.src = 'path/to/video.mp4';
video.loop = true;
video.muted = true;
video.setAttribute('crossorigin', 'anonymous');
video.addEventListener('loadedmetadata', function() {
var texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.x = -1;
scene.add(mesh);
video.play();
});
在这个示例中，我们创建了一个视频元素，并设置了其源文件、循环播放和静音等属性。然后，我们通过 loadedmetadata 事件监听器，等待视频元素加载完毕，并创建了一个 VideoTexture 对象，将视频元素作为其参数。接着，我们创建了一个球体几何体，并使用 MeshBasicMaterial 材质，将视频纹理应用到球体上，并将球体添加到场景中。最后，我们通过 scale.x = -1 将球体翻转，使其内部成为观察者所处的全景视角。
- 渲染场景
Copy
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
最后，我们通过 requestAnimationFrame 方法，实现了场景的动态渲染。
通过以上步骤，我们就可以在 Three.js 中播放全景视频了。当然，在实际项目中，还需要根据具体需求，添加更多的元素和功能，来实现更为丰富的全景视频效果。