乐趣区

关于three.js:借助threejs实现全景图片360°预览

jiezi

简介

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

退出移动版