three.js 全景图切换

在使用 three.js 实现全景图切换时，主要涉及以下几个基础概念：

基础概念

全景图（Panorama）：全景图是一种能够展示360度视角的图像，通常用于虚拟现实（VR）、增强现实（AR）或网页中的全景展示。
Three.js：这是一个基于WebGL的JavaScript库，用于在浏览器中创建和显示3D图形。
SphereGeometry：在 three.js 中，SphereGeometry 用于创建球体几何体，常用于将全景图映射到一个内表面。
Texture：纹理是应用于3D对象表面的图像，全景图通常作为纹理应用到球体的内表面。

实现全景图切换的优势

沉浸感：提供360度的视觉体验，增强用户的沉浸感。
交互性：用户可以通过鼠标或触摸屏自由旋转视角，探索全景图的不同部分。
多媒体集成：可以结合音频、视频等多媒体元素，提供丰富的交互体验。

类型

球形全景图：最常见的类型，将全景图映射到一个内球面上。
立方体贴图（Cube Map）：将全景图分成六个面，每个面对应一个方向，适用于需要更高细节的场景。

应用场景

虚拟旅游：展示旅游景点的360度全景。
房地产展示：提供房屋内部的360度视图。
博物馆展览：展示艺术品的360度视角。

实现全景图切换的步骤

加载全景图：使用 THREE.TextureLoader 加载全景图像。
创建球体几何体：使用 THREE.SphereGeometry 创建一个球体，并将其半径设置为适当的值（通常为500）。
应用纹理：将加载的全景图作为纹理应用到球体的内表面。
设置相机位置：将相机放置在球体中心，以便用户可以看到全景图。
处理用户交互：监听鼠标或触摸事件，根据用户的输入旋转相机或球体。

示例代码

以下是一个简单的 three.js 全景图切换示例：

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
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('path/to/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.z = 0;

// 处理窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

// 处理用户交互（例如鼠标拖动旋转）
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

renderer.domElement.addEventListener('mousedown', (event) => {
    isDragging = true;
});

renderer.domElement.addEventListener('mouseup', (event) => {
    isDragging = false;
});

renderer.domElement.addEventListener('mousemove', (event) => {
    if (isDragging) {
        const deltaMove = {
            x: event.offsetX - previousMousePosition.x,
            y: event.offsetY - previousMousePosition.y
        };

        const deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
            ));

        sphere.quaternion.multiplyQuaternions(deltaRotationQuaternion, sphere.quaternion);
    }

    previousMousePosition = {
        x: event.offsetX,
        y: event.offsetY
    };
});

function toRadians(angle) {
    return angle * (Math.PI / 180);
}