当前位置：首页 > JavaScript

js实现全景地图

2026-02-03 04:30:50JavaScript

实现全景地图的基本思路

全景地图通常通过将多个图像拼接成一个360度视图来实现。在JavaScript中，可以使用Three.js等3D库来创建全景效果。

使用Three.js创建全景地图

Three.js是一个流行的WebGL库，适合创建3D场景和全景效果。

安装Three.js：

npm install three

基础代码结构：

import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建全景球体
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 翻转球体内部可见

// 加载全景纹理
const texture = new THREE.TextureLoader().load('panorama.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 设置相机位置
camera.position.set(0, 0, 0.1);

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

添加交互控制

为了允许用户拖动查看全景，可以添加轨道控制器：

js实现全景地图

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false; // 禁用缩放
controls.enablePan = false; // 禁用平移

响应式调整

确保全景地图适应窗口大小变化：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

替代方案：使用全景库

对于更简单的实现，可以考虑专用全景库：

Pannellum：轻量级全景查看器
PhotoSphereViewer：功能丰富的全景查看器

使用Pannellum的示例：

js实现全景地图

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

<div id="panorama" style="width:100%;height:400px;"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "panorama.jpg",
    "autoLoad": true
});
</script>

性能优化技巧

对于大型全景图像，考虑使用多分辨率切片或渐进加载。WebGL渲染时，注意控制球体的分段数以平衡质量和性能。

移动设备上，确保添加陀螺仪支持：

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', (event) => {
        camera.rotation.y = event.alpha * Math.PI / 180;
        camera.rotation.x = event.beta * Math.PI / 180;
        camera.rotation.z = event.gamma * Math.PI / 180;
    }, true);
}