当前位置：首页 > JavaScript

js 实现全景

2026-04-05 18:58:09JavaScript

实现全景效果的 JavaScript 方法

使用 Three.js 库

Three.js 是一个强大的 3D 库，可以用于创建全景效果。以下是一个基本示例：

js 实现全景

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 mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.set(0, 0, 0.1);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

使用 Pannellum 库

Pannellum 是一个轻量级的全景查看器，专门用于创建交互式全景体验。

js 实现全景

pannellum.viewer('panorama-container', {
    "type": "equirectangular",
    "panorama": "panorama.jpg",
    "autoLoad": true,
    "showControls": true
});

使用纯 CSS 和 JavaScript

对于简单的全景效果，可以使用 CSS 3D 变换和 JavaScript 事件处理：

const panorama = document.getElementById('panorama');
let isDragging = false;
let startX, startY;
let rotateX = 0, rotateY = 0;

panorama.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
});

window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    rotateY -= (e.clientX - startX) * 0.1;
    rotateX += (e.clientY - startY) * 0.1;
    panorama.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    startX = e.clientX;
    startY = e.clientY;
});

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

使用 WebVR API

对于 VR 设备支持的全景体验，可以使用 WebVR API：

navigator.getVRDisplays().then(displays => {
    if (displays.length > 0) {
        const vrDisplay = displays[0];
        // 设置 VR 模式
        // 创建全景场景
    }
});