Three.js 实现 360 度全景浏览的最简单方式-卡咪卡咪哈-一个博客

什么是全景图？

一般我们拍照都是拍一个方向，而全景图是拍上下左右前后 6 个方向，360 度，这样能够立体的记录所在的场景。

那全景图怎么浏览呢？

全景图拍的是六个方向的图，放在一个平面看会很别扭，所以会有专门的浏览的工具，根据视角的改变来切换看到的内容，这样就能 360 度的还原拍照的场景。

用 Three.js 做这样的一个全景图浏览工具，是再简单不过的事情，只需要几行代码，但却很有用。

那我们就来学一下 Three.js 怎么做全景图浏览吧。

Three.js 基础回顾

我们简单回顾下 Three.js 的基础：

Three.js 是通过场景 Scene 来管理 3D 场景中的各种物体的，有一个三维坐标系，每个物体放在不同的位置，然后在某个位置放置相机，来观察 Scene 中的各种物体，看到的内容就是二维的，通过渲染器 Renderer 渲染出来就行。这就是 Three.js 的 3D 场景的创建和渲染成 2D 的流程。

简单回顾了下基础，那全景图改怎么浏览呢？

全景图浏览的原理

全景图是六个方向的照片，我们可以在 3D 的场景中放一个立方体，六个面贴上不同方向的图，相机放在其中，转动相机就可以看到不同方向的内容。这也是为什么全景图浏览也叫天空盒，因为就是通过立方体贴图的方式实现的。

当然，也可以用球体来做，直接贴上一个大的全景图，相机放在中间，转动相机也可以看到不同方向的内容。

那这么说做全景图浏览需要先创建个立方体或者球体喽？

其实不用，场景 Scene 是可以设置背景的纹理的，我们可以设置成立方体纹理 CubeTexture，也就是 6 个面的图片，这样转动相机，就能看到场景 Scene 的不同方向的内容。根本不用单独创建立方体或球体。

设置个纹理也就几行代码的事情，我们来写下代码。

Three.js 实现全景图浏览

我们创建 3D 场景 Scene：

const scene = new THREE.Scene();

然后设置它的背景，用立方体的纹理来设置，需要分别指定左右上下前后的 6 个方向的图：

let urls = [ ./img/home.left.jpg, ./img/home.right.jpg, ./img/home.top.jpg, ./img/home.bottom.jpg, ./img/home.front.jpg, ./img/home.back.jpg ]; let cubeTexture = new THREE.CubeTextureLoader().load(urls); scene.background = cubeTexture;

这样整个背景就是一个全景图，就这么几行代码。

当然，我们还要设置下相机位置，这里用透视相机就行，它的特点是从一个点去看 3D 场景，看到的内容是近大远小的。

const width = window.innerWidth; const height = window.innerHeight; const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position.set(0,0, 100); camera.lookAt(scene.position);

需要设置看到的角度，这里设置了 45 度，看到内容的宽高比，这里用窗口宽高比，再就是远近范围，这个设置范围大一点就行。

相机位置设置在了 z 轴 100 的位置，这样看 z 为 0 的位置就是从正面去看的，可以感受下这个看的方向。

有了 3D 的 Scene，设置好了相机，就可以用 Renderer 把它渲染出来了。

const renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement) function render() { renderer.render(scene, camera); requestAnimationFrame(render); } render();

我们用 requestAnimationFrame 来一帧帧的调用 renderer 渲染。

当然，还要加上鼠标控制，可以通过鼠标的拖动方向来改变相机看到的角度，这个用 Three.js 提供的 Controls 就行，不用自己写。

我们需要 360 度的看，用 OrbitsControls 来做交互就行，他叫轨道控制器，也就是卫星绕地球的那种轨道的感觉。

const controls = new THREE.OrbitControls(camera);

OrbitControls 参数是 camera，因为它就是通过改变 camera 位置实现的。

至此，我们就实现了全景图的浏览。来看下效果：

全部代码上传了 github： https://github.com/QuarkGluonPlasma/threejs-exercize

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>全景图</title> <style> body { margin: 0; overflow: hidden; } </style> <script src=“./js/three.js”></script> <script src=“./js/OrbitControls.js”></script> </head> <body> <script> const width = window.innerWidth; const height = window.innerHeight; const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); const scene = new THREE.Scene(); const renderer = new THREE.WebGLRenderer(); camera.position.set(0,0, 100); camera.lookAt(scene.position); renderer.setSize(width, height); document.body.appendChild(renderer.domElement) function create() { let urls = [ ./img/home.left.jpg, ./img/home.right.jpg, ./img/home.top.jpg, ./img/home.bottom.jpg, ./img/home.front.jpg, ./img/home.back.jpg ]; let cubeTexture = new THREE.CubeTextureLoader().load(urls); scene.background = cubeTexture; } function render() { renderer.render(scene, camera); requestAnimationFrame(render); } create(); render(); const controls = new THREE.OrbitControls(camera); </script> </body> </html>

一共也没几行代码。

我们来做下小结：

全景图浏览不用创建立方体或者球体，直接给场景（Scene）设置立方体纹理（CubeTexture）的背景就可以了，贴上 6 张图。之后设置下相机（Camera）位置，用渲染器（Renderer）一帧帧渲染出来，还要加上轨道控制器来支持拖拽改变相机位置。

主要的逻辑讲完了，但还有一个支线剧情要讲：6 张图是怎么来的？