不到30行 JS 实现一个炫酷的全景交互手机陀螺仪「不到30行 JS 实现一个炫酷的全景交互」 - 文章中心

不到30行 JS 实现一个炫酷的全景交互手机陀螺仪「不到30行 JS 实现一个炫酷的全景交互」

2025-02-16

点击上方“前端开发博客”，选择“设为星标”

回复“2”加入前端群

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

1.1 全景定义

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

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

全景示例：

Jietu20210527-113413-HD.gif

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

image.png

1.2 全景展示方式

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

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

image.png

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

2.1 认识ThreeJS

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

实现方式费用是否开源学习成本开发难度兼容性扩展性能CSSS 3D免费是中难支持CSS3D的浏览器易低ThreeJS免费是高中支持WebGL的部分浏览器易高全景工具(Krpano)收费否易无支持flash和canvas的浏览器难中

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

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

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

第一步：构建一个空间直角坐标系：Three中称之为场景(Scene)
第二步：在坐标系中，绘制几何体：Three中的几何体有很多种，包括BoxGeometry（立方体），SphereGeometry（球体）等等
第三步：选择一个观察点，并确定观察方向等：Three中称之为相机(Camera)
第四步：将观察到的场景渲染到屏幕上的指定区域：Three中使用Renderer完成这一工作（相当于拍照）

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

球体全景所需的图片素材（下图）：宽是高的两倍，数值是2的整数倍最好，建议图片宽高为2048px*1024px（后面实现全景会用到哈）

image.png

具体代码实现：

浏览器页面效果（记得开启手机模拟调试）：

image.png

2.2 基础知识点

2.2.1 经纬度

本文是使用经纬度来操作全景，需要科普一下经纬度的知识

经纬度是经度与纬度的合称组成一个坐标系统。称为地理坐标系统，它是一种利用三度空间的球面来定义地球上的空间的球面坐标系统，能够标示地球表面上的任何一个位置。

image.png

如图所示，经度：lon，取值范围：[0,360]，纬度：lat，取值范围：[-90,90];

2.2.2 经纬度转换三维坐标

球面的点{lon,lat}，其中R为球体的半径，求球面的点的在ThreeJS的坐标的位置为：

image.png

解：

X = R * cos（lat）* sin( lon )
Y = R * sin( lat )
Z = R * cos( lat )*cos( lon )

注：ThreeJS中默认的坐标系是右手坐标系，X轴为左右，Y轴为上下，Z轴为前后。

2.3 生成全景的步骤

在2.1的章节中，我们已经完成了绘制一个球体，绘制全景是在其基础上要做调整：

1、将相机移到球体的球心位置；
2、将全景图片贴到球体的内表面；

具体步骤如下：

第一步：创建一个场景（Scene）
第二步：创建一个球体，并将全景图片贴到球体的内表面，放入场景中
第四步：创建一个透视投影相机将camera拉到球体的中心，相机观看球体内表面
第五步：通过修改经纬度来，改变相机观察的点

具体代码实现：

效果：

Jietu20210527-172203-HD.gif

至此，我们全景制作已经完成了，（只统计js代码：共_28行_代码,我才不是标题党呢？????）。

3.1 手势交互之旋转

手势交互之旋转指单指滑动操作，这与滑动地球仪的交互是一致的。

屏幕坐标系，左上角为原点，X轴：由左向右，Y轴：由上到下，手指在屏幕滑动会依次触发三个事件：touchstart、touchmove和touchend；event对象中记录了手指屏幕的位置

TeamTalk_IMG_2021-05-27-173217.jpg

手指在屏幕滑动过程：

touchstart：记录滑动起始的位置（startX，startY）
touchmove：记录当前位置（curX，curY）相减上一次位置的值，计算出弧长除于半径乘以factor，计算出（lon，lat）
touchend：暂时没有用的

其中：弧长R值的是屏幕的滑动距离

那么单指在屏幕的滑动，由P1 (clientX1,clientY1)移动到P2 (clientX1,clientY1)长度为，对应经纬度变化：

代码实现：

单指操作效果：

上面的代码已经加上全景的单指交互，但是，缺少了旋转惯性。接下来，我们加一下惯性动画：

滑动惯性实现，手指在屏幕滑动过程：

touchstart：记录滑动起始的位置（startX，startY, startTime）
touchmove：记录当前位置（curX，curY）相减上一次位置的值，乘以factor，计算出（lon，lat），【触摸跟随】
touchend：记录endTime,计算本次滑动过程中的平均速度，然后，每帧减去减速度d，直至速度为0或者touchstart事件被触发【触摸结束触发惯性动画】