简介

上篇文章前端如何实现一个图片覆盖的球体，我们借助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实现

预览地址??
完整代码??

创建场景

//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??
预览地址??
完整代码??

//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??
预览地址??
完整代码??

//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,
});

结尾

喜欢的话就点个赞吧
更多问题欢迎加入前端交流群交流749539640

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000040279014
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！