demo&&代码

1.three.js实现🔗 (opens new window)

2.借助JeremyHeleine/Photo-Sphere-Viewer插件实现🔗 (opens new window)

3.借助mistic100/Photo-Sphere-Viewer插件实现🔗 (opens new window)

· 示例代码地址（gitee）🔗 (opens new window)

🚨启动项目需要静态服务器🚨

---

以下示例只展示关键代码，完整代理去仓库查看即可

1.three.js实现

预览地址🔗 (opens new window)
完整代码🔗 (opens new window)

创建场景

//globe
var width = window.innerWidth;
var height = window.innerHeight;
const textureLoader = new THREE.TextureLoader();
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 0;
camera.position.z = 500;
scene.add(camera);

创建图片以及球体

这里我们为了实现全景，球的半径可以适当做大一些，就有那个全景的感觉了

//imgTexture
var 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再看下

渲染并加入控制器

//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
//controls
var 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🔗 (opens new window)
预览地址🔗 (opens new window)
完整代码🔗 (opens new window)

//html
<div id="photosphere"></div>
//js
var 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🔗 (opens new window)
预览地址🔗 (opens new window)
完整代码🔗 (opens new window)

//html
<div id="photosphere"></div>
//js
new PhotoSphereViewer.Viewer({
  panorama: "./sphere.jpg",
  container: "photosphere",
  caption:
    "全景照片<b>&copy; <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,
});