当前位置：首页 > JavaScript

js实现360全景

2026-03-01 05:05:02JavaScript

实现360全景的JavaScript方法

使用Three.js库

Three.js是一个强大的3D JavaScript库，适合创建360全景效果。以下是一个基础实现示例：

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

使用Panolens.js库

Panolens.js是专门为全景查看设计的轻量级库：

js实现360全景

const panorama = new PANOLENS.ImagePanorama('panorama.jpg');
const viewer = new PANOLENS.Viewer({
    container: document.getElementById('panorama-container')
});
viewer.add(panorama);

纯CSS实现简单全景

对于简单的需求，可以使用CSS 3D变换：

js实现360全景

<div class="panorama-container">
    <img src="panorama.jpg" class="panorama-image">
</div>

<style>
.panorama-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    perspective: 1000px;
}
.panorama-image {
    width: 300%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 60s linear infinite;
}
@keyframes rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
</style>

移动设备支持

为支持移动设备陀螺仪控制：

window.addEventListener('deviceorientation', (event) => {
    const beta = event.beta;  // -180到180
    const gamma = event.gamma; // -90到90
    // 根据陀螺仪数据更新相机位置
    camera.rotation.set(
        THREE.MathUtils.degToRad(beta * 0.5),
        THREE.MathUtils.degToRad(gamma * 0.5),
        0
    );
}, true);

性能优化建议

使用压缩的等矩形全景图（建议分辨率不超过8000x4000）
启用WebGL抗锯齿
对于Three.js，考虑使用BufferGeometry代替常规Geometry
实现动态分辨率调整

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

交互功能实现

添加热点和交互控制：

// Three.js中添加热点
const hotspotGeometry = new THREE.SphereGeometry(1, 16, 16);
const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const hotspot = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
hotspot.position.set(0, 0, -10);
scene.add(hotspot);

// 点击事件
window.addEventListener('click', (event) => {
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('点击了全景中的对象');
    }
});