three.js 加载全景图

基础概念

Three.js 是一个基于 WebGL 的 JavaScript 库，用于在网页上创建和显示三维图形。它简化了 WebGL 的复杂操作，使得开发者可以更容易地创建交互式的三维场景。

全景图 是一种可以全方位展示场景的图像，通常用于虚拟现实（VR）或增强现实（AR）应用中。全景图可以通过特定的相机拍摄或通过图像拼接技术生成。

类型

球面全景图：图像被映射到一个球体的表面，用户可以从任何方向查看场景。
立方体贴图全景图：图像被分成六个面，分别代表前、后、左、右、上、下六个方向。

应用场景

虚拟旅游：展示世界各地的名胜古迹。
房地产展示：通过全景图展示房屋的内部结构。
教育培训：在教学中使用全景图进行场景模拟。
游戏开发：创建沉浸式的游戏环境。

示例代码

以下是一个简单的 Three.js 示例，展示如何加载和显示一个球面全景图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Panorama</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    // 创建场景、相机和渲染器
    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 texture = new THREE.TextureLoader().load('path/to/your/panorama.jpg');
    texture.minFilter = THREE.LinearFilter;

    // 创建球体几何体和材质
    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;

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

    // 处理鼠标移动事件
    document.addEventListener('mousemove', (event) => {
        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        camera.rotation.y = mouseX * Math.PI;
        camera.rotation.x = mouseY * Math.PI / 2;
    });

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

常见问题及解决方法

图像加载失败：
- 原因：图像路径错误或图像文件损坏。
- 解决方法：检查图像路径是否正确，确保图像文件存在且未损坏。

全景图显示扭曲：
- 原因：球体几何体的参数设置不当或图像分辨率不匹配。
- 解决方法：调整球体几何体的细分参数（如 SphereGeometry 的 widthSegments 和 heightSegments），确保图像分辨率足够高。
交互不流畅：
- 原因：动画循环或事件处理效率低下。
- 解决方法：优化动画循环和事件处理逻辑，减少不必要的计算。