介绍
我的位置:ljn1998codeing.love
该网页是我模仿一位国外大佬的网页实现,网页功能大概模仿实现了 7 成,如果想看原网页效果可以前往传送门
下面简单聊聊在该 demo 中我做了什么以及各位能学到什么:
- 二维方面实现了网页滚动翻页和元素展示动画
- 三维方面实现了天空图、相机模型位置根据滚动位置变化
- 大模型预览
- 使用精灵实现标点
- 精灵标点被模型遮挡隐藏
- 鼠标移到标点处弹出提示框
- 点击标点进入下一场景
实现
二维实现滚动翻页和元素展示动画
配合 CSS3 动画可以达到以下效果:
三维效果实现
初始化场景、相机、渲染器、灯光
使用three.js里面的CubeTextureLoader渲染一个天空图
模型加载
模型加载需要使用three.js里面的DRACOLoader、GLTFLoader两个类,需要从node_modules中把draco拷贝出来放到项目的public目录中
使用DRACOLoader是因为glTF 模型使用了DRACO压缩算法进行了压缩
DRACO是一种用于压缩 3D 几何数据的算法,它可以将 3D 模型文件的大小减小到原来的 10%到 30%之间,从而提高加载和渲染速度。在使用DRACO进行压缩后,模型文件将被转换为DRACO 格式,这意味着Three.js需要使用DRACOLoader来读取和解压缩模型文件。
模型动画,模型根据页面滚动设置动画
在切换页面的同时,我们需要让模型做出相应动画来进行滚动交互
配合上面的pageMove函数,可以达到以下效果:
模型探索与退出探索
模型探索所做的操作就是将页面三维容器层级设置到最高,同时设置相机和模型的动画,并开启控制器交互
退出探索则是把相机模型位置设置回第5页时的状态,并且把控制器属性设置回原来的状态
得到当前如下效果:
给模型添加标点
在开发时我在项目中写了一个方法利用three.js中的Raycaster类拾取了3个坐标,下面直接看方法
在render函数中我们需要添加如下代码,来实现涟漪动画
效果如下图:
建筑遮挡隐藏标点
当建筑遮挡标点时,因为精灵是一个总是面朝着摄像机的平面,所以即便被建筑遮挡,射线依旧能选中这个标点,这不利于后面的功能
在three.js中,Raycaster可以用于检测鼠标或者屏幕上某个点是否与场景中的物体相交
Raycaster的原理是基于3D空间中的射线投射,它会从一个起点(例如相机位置)发出一条射线,直到它与场景中的某个物体相交。Raycaster并不会遮挡检测,但是通过检测物体与射线相交的顺序,可以判断它们之间是否存在遮挡关系
在这个功能中,我们把标点作为射线的起点,相机为终点,当射线检测到的对象是不是精灵标点sprite,则隐藏标点,具体原理如下图
鼠标移到标点出弹出信息框
在上面的标点数据中已经存在了信息框数据,这边主要是操作document元素来创建或移除元素,然后监听鼠标的移动事件,配合Raycaster射线拾取来实现
点击前往第二场景
前往第二场景,主要操作是通过修改相机位置来实现,下面直接看代码
完整代码
资源文件
链接: pan.baidu.com/s/1BJCOx2CS… 提取码: 7xc6
总结
本文暂时就到这了,在文章中我贴了大量的代码加上注释以及效果图,在需要讲解的地方我也加上了自己的理解,希望大家能看明白,不明白之处或者觉得处理的不好的地方可以评论区留言,期待和各位大佬的交流😊
原文链接:https://juejin.cn/post/7239744255674105913 作者:半个糯米鸡