前言：本文将围绕：了解什么是全景 --> 怎么构成全景 --> 全景交互原理来进行讲解，手把手教你从零基础实现一个酷炫的Web全景，并讲解其中的原理。小白也能学习，建议收藏学习,有任何疑问，请在评论区讨论，笔者经常查看并回复。

一、了解什么是全景1.1 全景定义

定义：全景是某一空间的_全部_景色。

通俗地说：大家都拍过照片，那我们想想一下拍照片的过程：站在某个空间，拿着相机，朝着某一角度拍摄，就可以获得这角度的景色照片了，而全景呢？是站在某个空间，拿着相机站着，朝着360角度拍摄，获得所有角度的景色照片，组合起来，再通过专门的技术展示给大家看的可交互的照片。

全景示例：

Jietu20210527-113413-HD.gif

体验二维码（支持微信扫码）：

image.png 1.2 全景展示方式

全景的展示方式有很多中，比如：柱体全景、立方体全景、球体全景等等……

最最通俗的理解：用一个大的纸箱套在头上，看的场景（这种展示方式就是立方体全景）

image.png

柱体、立方体存在交叉区域，界面在交叉区域交互会呈现死角。所以，最好全景呈现方式是球体全景，360度无死角，本文将以球体全景来讲解。

二、怎么构成全景2.1 认识ThreeJS

目前主流全景的前端实现方式：

作为一个有追求（瞎折腾）前端开发，当然要选择ThreeJS！！！

ThreeJS是Three（3D）+JS（Java），它封装了底层的WebGL接口，使得我们能够在不了解图形学知识的前提下，也能用简单的代码实现三维场景的渲染。

要想在屏幕中展示3D图像，大致思路：

• 第一步：构建一个空间直角坐标系 ：Three中称之为场景(Scene)

• 第二步：在坐标系中，绘制几何体：Three中的几何体有很多种，包括BoxGeometry（立方体），SphereGeometry（球体）等等

• 第三步：选择一个观察点，并确定观察方向等：Three中称之为相机(Camera)

• 第四步：将观察到的场景渲染到屏幕上的指定区域 ：Three中使用Renderer完成这一工作（相当于拍照）

以上是ThreeJS渲染物体的固定写法，不理解的话记住也行的