当前位置：首页 > JavaScript

js实现全景

2026-04-05 19:04:35JavaScript

使用Three.js实现全景图

Three.js是一个强大的JavaScript 3D库，可以用来实现全景图展示。以下是一个基本的实现方法：

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

使用Photo Sphere Viewer库

Photo Sphere Viewer是一个专门用于展示全景图的JavaScript库，使用起来更简单：

import { Viewer } from 'photo-sphere-viewer';

const viewer = new Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'panorama.jpg',
    size: {
        width: '100%',
        height: '500px'
    }
});

使用A-Frame实现WebVR全景

A-Frame是一个WebVR框架，可以用来创建VR全景体验：

js实现全景

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <a-sky src="panorama.jpg" rotation="0 -90 0"></a-sky>
    </a-scene>
</body>
</html>

使用Pannellum轻量级全景查看器

Pannellum是一个轻量级的全景查看器，适合简单的全景展示需求：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://pannellum.org/css/pannellum.css">
    <script src="https://pannellum.org/js/pannellum.js"></script>
    <style>
        #panorama {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="panorama"></div>
    <script>
        pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": "panorama.jpg",
            "autoLoad": true
        });
    </script>
</body>
</html>

全景图交互控制实现

为全景图添加鼠标交互控制，实现拖动查看：

js实现全景

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let rotation = { x: 0, y: 0 };

document.addEventListener('mousedown', (e) => {
    isDragging = true;
    previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    const deltaMove = {
        x: e.clientX - previousMousePosition.x,
        y: e.clientY - previousMousePosition.y
    };

    rotation.y += deltaMove.x * 0.01;
    rotation.x += deltaMove.y * 0.01;

    sphere.rotation.set(rotation.x, rotation.y, 0);
    previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});

响应式设计调整

确保全景图在不同设备上都能正确显示：

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

全景图热点添加

在全景图中添加可交互的热点：

const hotspotGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
hotspot.position.set(0, 0, -10);
scene.add(hotspot);

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseClick(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects([hotspot]);

    if (intersects.length > 0) {
        console.log('Hotspot clicked!');
    }
}

window.addEventListener('click', onMouseClick, false);