多语言网站 自助,江门建设局网站,wordpress刷不出图片,教务管理系统登录入口Three.js加载360全景图片/视频
效果 原理
将全景图片/视频作为texture引入到three.js场景中将贴图与球形网格模型融合#xff0c;将球模型当做成环境容器使用处理视频时需要以dom为载体#xff0c;加载与控制视频动作每次渲染时更新当前texture#xff0c;以达到视频播放效…Three.js加载360全景图片/视频
效果 原理
将全景图片/视频作为texture引入到three.js场景中将贴图与球形网格模型融合将球模型当做成环境容器使用处理视频时需要以dom为载体加载与控制视频动作每次渲染时更新当前texture以达到视频播放效果全景图片加载有球体与正方体两种模式区别在于是加载单张图片还是多张图片
核心方法 // 添加VR全景图const addVrPicture async () {// 创建贴图const loader new THREE.TextureLoader();const texture await loader.load(./img/vr.jpg);texture.wrapS THREE.RepeatWrapping;texture.repeat.x -1;// 创建球形载体const sphereGeometry new THREE.SphereGeometry(200, 60, 40);const sphereMaterial new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);};// 添加VR全景视频const addVrVideo async () {// 通过Dom引入并控制视频源const video document.createElement(video);video.src ./video/vr.mp4;video.loop true;video.muted true;video.autoplay true;// 创建视频贴图const texture new THREE.VideoTexture(video);texture.minFilter THREE.LinearFilter;// 创建球形载体const sphereGeometry new THREE.SphereGeometry(200, 60, 40);const sphereMaterial new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);// 添加动画序列animationList.push(() {// 更新视频纹理// 播放视频video.play();if (video.readyState video.HAVE_ENOUGH_DATA) {texture.needsUpdate true;}});// 调整相机视角const point new THREE.Vector3(200, 0, 0);camera.lookAt(point);};完整代码
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;}/style/headbodyscript typemoduleimport * as util from ./js/util.js;import * as THREE from ./node_modules/three/build/three.module.js;import { creatWallByPath } from ./js/effect.js;const scene util.initScene();const stats util.initStats();const camera util.initCamera(-1, 0, 0);const renderer util.initRender();const controls util.initOrbitControls(camera, renderer);util.windowReSize(renderer, camera);util.addAxisHelper(scene, 100);util.addAmbientLight(scene);util.addDirectionalLight(scene);// 动画序列每个渲染周期执行const animationList [];// 添加VR全景图const addVrPicture async () {// 创建贴图const loader new THREE.TextureLoader();const texture await loader.load(./img/vr.jpg);texture.wrapS THREE.RepeatWrapping;texture.repeat.x -1;// 创建球形载体const sphereGeometry new THREE.SphereGeometry(200, 60, 40);const sphereMaterial new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);};// 添加VR全景视频const addVrVideo async () {// 通过Dom引入并控制视频源const video document.createElement(video);video.src ./video/vr.mp4;video.loop true;video.muted true;video.autoplay true;// 创建视频贴图const texture new THREE.VideoTexture(video);texture.minFilter THREE.LinearFilter;// 创建球形载体const sphereGeometry new THREE.SphereGeometry(200, 60, 40);const sphereMaterial new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });const sphere new THREE.Mesh(sphereGeometry, sphereMaterial);scene.add(sphere);// 添加动画序列animationList.push(() {// 更新视频纹理// 播放视频video.play();if (video.readyState video.HAVE_ENOUGH_DATA) {texture.needsUpdate true;}});// 调整相机视角const point new THREE.Vector3(200, 0, 0);camera.lookAt(point);};const main async () {// 添加VR图像await addVrPicture();// 添加VR视频// await addVrVideo();};// 渲染函数const render () {renderer.render(scene, camera);stats.update();animationList.forEach((callback) callback());requestAnimationFrame(render);};window.onload () {main();render();};/script/body
/html
