当前位置：首页 > JavaScript

js 实现全景

2026-02-01 02:35:50JavaScript

实现全景效果的方法

在JavaScript中实现全景效果通常需要使用WebGL或Three.js库来处理3D渲染。以下是两种常见的实现方式：

使用Three.js创建全景图

Three.js是一个流行的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 textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('panorama.jpg');

// 创建球体几何体
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 反转几何体使其面向内部

// 创建材质并应用纹理
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();

使用纯JavaScript和CSS实现简单全景

对于简单的全景效果，可以使用CSS 3D变换来实现。

js 实现全景

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

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

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

    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // 更新全景图位置
    panorama.style.transform = `rotateX(${-deltaY * 0.2}deg) rotateY(${deltaX * 0.2}deg)`;
});

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

全景图的最佳实践

确保全景图像具有足够高的分辨率，通常建议至少8000×4000像素以获得良好的视觉效果。

对于移动设备支持，添加触摸事件处理：

js 实现全景

panorama.addEventListener('touchstart', (e) => {
    isDragging = true;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

window.addEventListener('touchmove', (e) => {
    if (!isDragging) return;

    const deltaX = e.touches[0].clientX - startX;
    const deltaY = e.touches[0].clientY - startY;

    panorama.style.transform = `rotateX(${-deltaY * 0.2}deg) rotateY(${deltaX * 0.2}deg)`;
});

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

性能优化技巧

使用纹理压缩可以减少内存占用，特别是在移动设备上。

对于Three.js实现，考虑使用Equirectangular投影来创建更精确的全景效果。

// 使用CubeTextureLoader加载立方体贴图
const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
    'px.jpg', 'nx.jpg',
    'py.jpg', 'ny.jpg',
    'pz.jpg', 'nz.jpg'
]);

scene.background = texture;

添加惯性效果可以让用户体验更加自然：

let momentumX = 0;
let momentumY = 0;
let lastX = 0;
let lastY = 0;

// 在mousemove/touchmove中
momentumX = deltaX * 0.1;
momentumY = deltaY * 0.1;
lastX = deltaX;
lastY = deltaY;

// 在动画循环中
if (!isDragging) {
    momentumX *= 0.95;
    momentumY *= 0.95;
    // 应用动量到旋转
}