介绍

我的位置：ljn1998codeing.love

该网页是我模仿一位国外大佬的网页实现，网页功能大概模仿实现了 7 成，如果想看原网页效果可以前往传送门

下面简单聊聊在该 demo 中我做了什么以及各位能学到什么：

• 二维方面实现了网页滚动翻页和元素展示动画
• 三维方面实现了天空图、相机模型位置根据滚动位置变化
• 大模型预览
• 使用精灵实现标点
• 精灵标点被模型遮挡隐藏
• 鼠标移到标点处弹出提示框
• 点击标点进入下一场景

演示地址(在 github 上有点卡，请见谅)

实现

二维实现滚动翻页和元素展示动画

配合 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

总结

本文暂时就到这了，在文章中我贴了大量的代码加上注释以及效果图，在需要讲解的地方我也加上了自己的理解，希望大家能看明白，不明白之处或者觉得处理的不好的地方可以评论区留言，期待和各位大佬的交流😊