Realize 360° preview of panoramic pictures with the help of three.js

Introduction

The last article uses three.js to realize a picture-covered sphere , we use three.js to realize a 3D rotating sphere. In this article, we slightly modify the code to implement a panoramic image preview example.
This article will use three.js and plug-ins to implement 3 kinds of demos

demo&&code

1.Three.js implementation 🔗

2. With the help of JeremyHeleine/Photo-Sphere-Viewer plug-in implementation 🔗

3. With the help of mistic100/Photo-Sphere-Viewer plug-in implementation 🔗

· Sample code address (gitee) 🔗

🚨Starting a project requires a static server🚨

---

The following example only shows the key code, the complete agent can go to the warehouse to check

1.Three.js implementation

preview address 🔗
complete code 🔗

Create the scene

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

Create pictures and spheres

Here, in order to achieve a panoramic view, the radius of the sphere can be appropriately larger, so that it will feel like a panoramic view.

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

Key code var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
Let’s change the radius to 50 see

500 to 0614a8b2bc77e6 and look again,

Render and add controller

//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. Realize with JH/PSV plug-in

Plug-in address: JeremyHeleine/Photo-Sphere-Viewer🔗
preview address🔗
complete code 🔗

//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. Realize with m100/PSV plug-in

Plug-in address: mistic100/Photo-Sphere-Viewer🔗
preview address🔗
complete code 🔗

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

end

Like it if you like it