Three.js 360全景房看

在 360° 看房功能中，我们需要在浏览器中创建一个类似虚拟现实的场景，使得用户能够查看环境的每一个角落。这一功能的实现本质上是利用 球体映射技术，即通过将全景图作为纹理贴图映射到一个反向的球体上，用户可以通过旋转视角来“环顾四周”。

我们先来看一下效果
 exceeds the configured maximum (2097152))

步骤拆解

创建球体模型

为了让用户能够查看 360° 环境，我们需要构建一个大球体。通过将球体的内表面作为视图区域，用户的相机将被放置在球体的中心。

球体内表面可见：通过将球体的外表面设置为不可见，而把全景图像贴图到球体的内侧，使得相机站在球体的中心时，所有视野范围都被全景图包围。

全景图像作为纹理贴图

全景图是一种特殊的图像格式，通常是水平或垂直方向无缝拼接的图像，通常为环状。我们可以将全景图作为纹理，映射到球体的内表面。

映射全景图：全景图的每个像素会映射到球体表面的某个位置，形成一个 3D 场景，用户通过旋转相机来查看不同的部分。

相机位置与控制

为了让用户从球体的中心观察全景图，必须将相机的位置设置在球体的内部。同时，我们需要监听用户的输入（如鼠标或触控）来旋转视角。

相机控制：通过旋转相机的方位角（通常是使用 lon 和 lat）来改变用户的视角，从而模拟 360° 环视的效果。

球体的反向显示

由于默认情况下，Three.js 的球体表面是朝外的，因此我们需要将球体反转，让其内表面可见。这通过 geometry.scale(-1, 1, 1) 来实现。

创建 360° 看房 Demo

下面，我们将按照以下步骤一步步实现一个简易的 360° 看房功能。

项目准备

全景图下载

可以通过网站 Poly Haven 下载，这是一个提供免费高质量纹理的网站。 

安装和引入依赖

在项目中，你需要通过 npm 安装 Three.js，并且确保你的项目支持使用 ES Modules（现代 JavaScript 模块）。

npm install three

然后在你的 JavaScript 文件中引入 Three.js 和 EXRLoader：

import * as THREE from "three";
import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
import "