当前位置：首页 > JavaScript

js 实现全景

2026-03-14 00:49:23JavaScript

使用 Three.js 实现全景效果

Three.js 是一个强大的 3D 库，可以轻松实现全景效果。以下是实现步骤：

安装 Three.js

js 实现全景

npm install three

创建全景场景

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

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

// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
camera.position.z = 1;

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

使用 CSS 3D 实现简易全景

对于简单的全景展示，CSS 3D 变换也能实现基本效果：

js 实现全景

<div class="panorama-container">
    <div class="panorama"></div>
</div>

<style>
.panorama-container {
    width: 100vw;
    height: 100vh;
    perspective: 1000px;
    overflow: hidden;
}

.panorama {
    width: 200%;
    height: 100%;
    background-image: url('panorama.jpg');
    background-size: auto 100%;
    transform-style: preserve-3d;
    animation: rotate 60s infinite linear;
}

@keyframes rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
</style>

使用 Pannellum 轻量级库

Pannellum 是专门为全景设计的轻量级库：

<div id="panorama"></div>

<script src="pannellum.js"></script>
<link rel="stylesheet" href="pannellum.css">

<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "panorama.jpg",
    "autoLoad": true
});
</script>

移动端陀螺仪控制

在移动设备上实现陀螺仪控制的示例代码：

window.addEventListener('deviceorientation', (event) => {
    const beta = event.beta;  // -180到180
    const gamma = event.gamma; // -90到90

    // 转换为Three.js的旋转
    sphere.rotation.x = (beta * Math.PI / 180);
    sphere.rotation.y = (gamma * Math.PI / 180);
});