不到30行 JS 实现一个炫酷的全景交互

const scene = new THREE.Scene()

// 第二步:绘制一个球体

const geometry = new THREE.SphereBufferGeometry(radius, 32, 32)

geometry.scale(-1, 1, 1) // 球面反转,由外表面改成内表面贴图

const material = new THREE.MeshBasicMaterial({

map: new THREE.TextureLoader().load(‘./img/1.jpeg’) // 上面的全景图片

})

const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

// 第三步:创建相机,并确定相机位置

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)

camera.position.x = 0  // 确定相机位置移到球心

camera.position.y = 0

camera.position.z = 0

camera.target = new THREE.Vector3(radius, 0, 0) // 设置一个对焦点

// 第四步:拍照并绘制到canvas

const renderer = new THREE.WebGLRenderer()

renderer.setPixelRatio(window.devicePixelRatio)

renderer.setSize(width, height) // 设置照片大小

document.querySelector(‘#wrap’).appendChild(renderer.domElement) // 绘制到canvas

renderer.render(scene, camera)

let lat = 0, lon = 0

function render() {

lon += 0.003 // 每帧加一个偏移量

// 改变相机的对焦点,计算公式参考:2.2.2章节

camera.target.x = radius * Math.cos(lat) * Math.cos(lon);

camera.target.y = radius * Math.sin(lat);

camera.target.z = radius * Math.cos(lat) * Math.sin(lon)

camera.lookAt(camera.target) // 对焦

renderer.render(scene, camera)

requestAnimationFrame(render)

}

render()

复制代码

效果:

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)长度为,对应经纬度变化:

distanceX = clientX1 - clientX2   // X轴方向

distanceY = clientY1 - clientY2   // Y轴方向

// 其中R为球体半径,根据弧长公式:

lon = distanX / R

lat = distanY / R

复制代码

代码实现:

// 增加touch事件监听

let lastX, lastY       // 上次屏幕位置

let curX, curY         // 当前屏幕位置

const factor = 1 / 10  // 灵敏系数

const $wrap = document.querySelector(‘#wrap’)

// 触摸开始

$wrap.addEventListener(‘touchstart’, function (evt) {

const obj = evt.targetTouches[0] // 选择第一个触摸点

startX = lastX = obj.clientX

startY = lastY = obj.clientY

})

// 触摸中

$wrap.addEventListener(‘touchmove’, function (evt) {

evt.preventDefault()

const obj = evt.targetTouches[0]

curX = obj.clientX

curY = obj.clientY

// 参考:弧长公式

lon -= ((curX - lastX) / radius) * factor // factor为了全景旋转平稳,乘以一个灵敏系数

lat += ((curY - lastY) / radius) * factor

lastX = curX

lastY = curY

})

单指操作效果:

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

滑动惯性实现,手指在屏幕滑动过程:

  • touchstart:记录滑动起始的位置(startX,startY, startTime)

  • touchmove:记录当前位置(curX,curY)相减上一次位置的值,乘以factor,计算出(lon,lat),【触摸跟随】

  • touchend:记录endTime,计算本次滑动过程中的平均速度,然后,每帧减去减速度d,直至速度为0或者touchstart事件被触发 【触摸结束触发惯性动画】

代码实现:

let lastX, lastY         // 上次屏幕位置

let curX, curY           // 当前屏幕位置

let startX, startY       // 开始触摸的位置,用于计算速度

let isMoving = false     // 是否停止单指操作

let speedX, speedY       // 速度

const factor = 1 / 10    // 灵敏系数,经验值

const deceleration = 0.1 // 减速度,惯性动画使用

const $wrap = document.querySelector(‘#wrap’)

// 触摸开始

$wrap.addEventListener(‘touchstart’, function (evt) {

const obj = evt.targetTouches[0] // 选择第一个触摸点

startX = lastX = obj.clientX

startY = lastY = obj.clientY

startTime = Date.now()

isMoving = true

})

// 触摸中

$wrap.addEventListener(‘touchmove’, function (evt) {

evt.preventDefault()

const obj = evt.targetTouches[0]

curX = obj.clientX

curY = obj.clientY

// 参考:弧长公式

lon -= ((curX - lastX) / radius) * factor // factor为了全景旋转平稳,乘以一个系数

lat += ((curY - lastY) / radius) * factor

lastX = curX

lastY = curY

})

// 触摸结束

$wrap.addEventListener(‘touchend’, function (evt) {

isMoving = false

var t = Date.now() - startTime

speedX = (curX - startX) / t    // X轴方向的平均速度

speedY = (curY - startY) / t    // Y轴方向的平均速度

subSpeedAnimate() // 惯性动画

})

let animateInt

// 减速度动画

function subSpeedAnimate() {

lon -= speedX * factor // X轴

lat += speedY * factor

// 减速度

speedX = subSpeed(speedX)

speedY = subSpeed(speedY)

// 速度为0或者有新的触摸事件,停止动画

if ((speedX === 0 && speedY === 0) || isMoving) {

if (animateInt) {

cancelAnimationFrame(animateInt)

animateInt = undefined

}

} else {

requestAnimationFrame(subSpeedAnimate)

}

}

// 减速度

function subSpeed(speed) {

if (speed !== 0) {

if (speed > 0) {

speed -= deceleration;

speed < 0 && (speed = 0);

} else {

speed += deceleration;

speed > 0 && (speed = 0);

}

}

return speed;

}

预览地址:azuoge.github.io/Opanorama/

3.2 手势交互之缩放

手势交互之缩放是双指操作,跟放大图片一样。

前面介绍ThreeJS,提到过相机,全景缩放也是依据相机拍照时,缩放拍摄照片内容的原理是一样的。

image.png

使用ThreeJS创建相机代码如下:

const camera = new THREE.PerspectiveCamera( fov , aspect , near , fear )

参数说明:

image.png

其中,

  • near:取默认值:0.1即可

  • fear:只要大于球体半径就可,取值为:球体半径R

  • aspect:在全景的场景已经确定了,照片的长宽比:屏幕宽度 / 屏幕高度

  • fov:视场,缩放是通过修改它的值来完成全景图片的缩放;

其实,很好理解,睁大眼睛,我们就看的视野就广,看到物体就显得小些【缩小】,反之,眯着眼,看到的视野就窄,看到物体就显得大【放大】,可以通过修改右图的 fov 的值来缩放全景图片

那么如何计算fov呢?这时候我们需要双指交互,同计算,开始触摸计算第一次双指的距离,在双指移动中不断计算双指距离,与上一次距离相除即为缩放倍数。

关键代码如下:

// 其中,(clientX1,clientY1)和(clientX2,clientY2)为双指在屏幕的当前位置

// 计算距离,简化运输不用平方计算

const distance = Math.abs(clientX1 - clientX2) + Math.abc(clientY1 - clientY)

// 计算缩放比

const scale = distance / lastDiance

// 计算新的视角

fov = camera.fov / scale

// 视角范围取值

camera.fov = Math.min(90, Math.max(fov,60)) // 90 > fov > 60 ,从参数说明中选取

// 视角需要主动更新

camera.updateProjectionMatrix()

体验地址:azuoge.github.io/Opanorama/

3.3 手机陀螺仪交互

html5事件中,deviceorientation事件,此事件是检测设备方向变化时的事件。

H5有两份坐标:

  • 地球坐标 x/y/z:在任何情况下,都是恒定方向

  • 手机平面坐标 x/y/z:相对于手机屏幕定义的方向

取值范围:

  • X轴:上下旋转Beta(X) ,取值范围:[ -180° ~ 180° ]

  • Z轴:左右旋转扭曲Alpha(Z) ,取值范围:[ 0°, 360° ]

  • Y轴:扭转可以是 Gamma(Y) ,取值范围:[ -90° ,90° ]

image.png

当将手机垂直,且正面(90度)冲着自己。

image.png

从上图观察,并结合ThreeJS的坐标系,可以得出关键结论:

  • lat对应 (beta - 90) * (Math.PI / 180) 【角度换算弧度】

  • lon对应 gamma * (Math.PI / 180) 【角度换算弧度】

这alpha角度就不再这次全景交互中。

当将将手机垂直,且正面(90度)冲着自己,转动手机方向演示

Jietu20210530-104349-HD.gif

Chrome浏览器是可以开启陀螺仪模拟,操作如下:

image.png

那么代码就很简单:

// 角度换算弧度公式

const L = Math.PI / 180

// 陀螺仪交互

window.addEventListener(‘deviceorientation’, function (evt) {

lon = evt.alpha * L

lat = (evt.beta - 90) * L

})

复制代码

效果如下:

Jietu20210530-112850-HD.gif

需要注意的是:H5获取的手机方向数值,在部分android手机,存在明显的抖动,就算手机静止放在桌面上,陀螺仪输出的数据也会抖动;(该问题不属于原理,只是在全景应用过程遇到的问题,不感兴趣的同学可以跳过???)

Jietu20210530-112405-HD.gif

我们需要对陀螺仪的输出的数字做处理,这里采用信号传输中使用的 低通滤波算法

公式如下:

当K=1时,就是真实的数据,小于1,就可以稀释变化值。

但是又有了新的问题:灵敏度和平稳度的矛盾

  • 滤波系数越小,滤波结果越平稳,但是灵敏度越低

  • 滤波系数越大,灵敏度越高,但是滤波结果越不稳定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TNcXtfEz-1650867026473)(https://img 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 -blog.csdnimg.cn/img_convert/84a597068d10d0b962e97cf76fffb19c.png)]

image.png

通过统计数据得出的结论, K取值为10,灵敏度和平稳度表现较好。

体验地址:azuoge.github.io/Opanorama/

3.4 手势和陀螺仪交互结合

手势和陀螺仪的交互都转化成经纬度来驱动全景,那么,两者结合也就很简单了。

具体思路如下:

10530-112850-HD.gif

需要注意的是:H5获取的手机方向数值,在部分android手机,存在明显的抖动,就算手机静止放在桌面上,陀螺仪输出的数据也会抖动;(该问题不属于原理,只是在全景应用过程遇到的问题,不感兴趣的同学可以跳过???)

Jietu20210530-112405-HD.gif

我们需要对陀螺仪的输出的数字做处理,这里采用信号传输中使用的 低通滤波算法

公式如下:

当K=1时,就是真实的数据,小于1,就可以稀释变化值。

但是又有了新的问题:灵敏度和平稳度的矛盾

  • 滤波系数越小,滤波结果越平稳,但是灵敏度越低

  • 滤波系数越大,灵敏度越高,但是滤波结果越不稳定

[外链图片转存中…(img-TNcXtfEz-1650867026473)]

image.png

通过统计数据得出的结论, K取值为10,灵敏度和平稳度表现较好。

体验地址:azuoge.github.io/Opanorama/

3.4 手势和陀螺仪交互结合

手势和陀螺仪的交互都转化成经纬度来驱动全景,那么,两者结合也就很简单了。

具体思路如下:

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值