起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。
但是试了多几次 mp4均提示404,资源无法获取;
找了很多方案,最后发现将视频转为ogv 就可以完美适配了;
附threejs使用ogv进行环境贴图的代码:
js
// 视频纹理
const video = document.createElement("video");
video.src = "./images/test.ogv";
video.loop = true;
let palneTexture4 = new THREE.TextureLoader().load("./images/ruime7.jpg");
const planeGeometry4 = new THREE.PlaneGeometry(10, 12);
const planeMaterial4 = new THREE.MeshBasicMaterial({
// color: 0xffffff,
map: palneTexture4
});
const plane4 = new THREE.Mesh(planeGeometry4, planeMaterial4);
plane4.position.y = 2;
plane4.position.z = 16;
plane4.rotation.y = Math.PI + Math.PI / 2;
window.addEventListener("click", (e) => {
// 当鼠标移动的时候播放视频
// 判断视频是否处于播放状态
if (video.paused) {
video.play();
let texture = new THREE.VideoTexture(video);
planeMaterial4.map = texture;
planeMaterial4.map.needsUpdate = true;
} else {
video.pause()
}
});