简介
上篇文章前端如何实现一个图片笼罩的球体，咱们借助three.js实现了一个3D的旋转球体。这篇文章咱们略微革新下代码，实现一个全景图片预览示例。
本文会应用three.js以及插件来实现3种demo
demo&&代码
1.three.js实现
2.借助JeremyHeleine/Photo-Sphere-Viewer插件实现
3.借助mistic100/Photo-Sphere-Viewer插件实现
· 示例代码地址（gitee）
启动我的项目须要动态服务器
以下示例只展现要害代码，残缺代理去仓库查看即可
1.three.js实现
预览地址
残缺代码
创立场景
//globevar width = window.innerWidth;var height = window.innerHeight;const textureLoader = new THREE.TextureLoader();//scenevar scene = new THREE.Scene();//cameravar camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);camera.position.y = 0;camera.position.z = 500;scene.add(camera);创立图片以及球体
这里咱们为了实现全景，球的半径能够适当做大一些，就有那个全景的感觉了
//imgTexturevar imgTexture = textureLoader.load("./park.jpg");imgTexture.minFilter = THREE.LinearFilter;imgTexture.magFilter = THREE.LinearFilter;imgTexture.format = THREE.RGBFormat;var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);var sphereMat = new THREE.MeshBasicMaterial({ map: imgTexture });sphereMat.side = THREE.BackSide;var cube = new THREE.Mesh(cubeGeometry, sphereMat);scene.add(cube);要害代码var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
咱们把半径改为50看下
改为500再看下，
渲染并退出控制器
//renderervar renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);document.body.appendChild(renderer.domElement);//controlsvar controls = new THREE.OrbitControls(camera);controls.enableDamping = true;controls.dampingFactor = 0.25;controls.enableZoom = false;controls.maxDistance = 500;controls.minDistance = 500;function render() { requestAnimationFrame(render); cube.rotation.y += 0.001; renderer.render(scene, camera);}render();2.借助JH/PSV插件实现
插件地址:JeremyHeleine/Photo-Sphere-Viewer
预览地址
残缺代码
//html<div id="photosphere"></div>//jsvar div = document.getElementById("container");var PSV = new PhotoSphereViewer({ panorama: "./parc-saint-pierre-amiens.jpg", loading_msg: "正在加载全景图，请急躁期待...", anim_speed: "0.5rpm",//主动挪动速度 vertical_anim_speed: "0.5rpm", container: div, time_anim: 3000, navbar: true, navbar_style: { backgroundColor: "rgba(58, 67, 77, 0.7)", },});3.借助m100/PSV插件实现
插件地址:mistic100/Photo-Sphere-Viewer
预览地址
残缺代码
//html<div id="photosphere"></div>//jsnew PhotoSphereViewer.Viewer({ panorama: "./sphere.jpg", container: "photosphere", caption: "全景照片<b>© <a href='https://github.com/mistic100/Photo-Sphere-Viewer' target=’_blank‘ rel=’noopener noreferrer‘>Photo Sphere Viewer</a></b>", loadingImg: "./photosphere-logo.gif", defaultLat: 0.3, autorotateDelay: 2000, autorotateSpeed: "0.5rpm", touchmoveTwoFingers: true, mousewheelCtrlKey: true,});结尾
喜爱的话就点个赞吧
更多问题欢送退出前端交换群交换749539640