点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
大家好，我是
xy👨🏻💻。今天，我想和大家分享一个让我印象深刻的网站。它的特效简直可以用“炸裂”来形容！
前言
一个好的网站不仅仅是信息的载体，更是艺术和科技的结合体。
一个优秀的网站交互设计，能够让人在浏览时产生沉浸式的体验，留下深刻的印象。
效果展示
废话不多说，直接上预览效果：
在线预览地址：https://www.blueyard.com/
实现技术分析
使用 wappalyzer 插件，我们可以快速识别网站使用的技术栈。以下是我发现的一些关键技术：
Three.js：这是一个基于 WebGL 的 JavaScript 3D 库，用于在网页浏览器中创建和显示动画 3D 图形。它提供了丰富的 3D 功能，包括场景、相机、灯光和动画系统。
GSAP (GreenSock Animation Platform)：这是一个强大的 JavaScript 动画库，用于创建高性能的动画效果。GSAP 提供了许多高级动画功能，如缓动函数、时间轴、拖放等，并且与 Three.js 无缝集成。
🌈 下面给大家推荐 7 个免费学习 Three.js、Shader 网站
7 个免费学习 Three.js/Shader 网站
Three.js 官方文档
网址：https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
Three.js 官方文档是学习和使用 Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。它提供了丰富的信息，包括各种功能、类、方法和属性的详细描述，以及许多示例和教程。
Three.js 中文网
网址：http://webgl3d.cn/
Three.js 中文网是一个专注于 Three.js 资源分享与交流的中文社区网站。该网站提供了大量与 Three.js 相关的教程、案例、插件和工具，帮助开发者更好地学习和应用 Three.js。
探索 three.js
网址：https://discoverthreejs.com/zh/
《探索 three.js》是对 web 作为 3D 图形平台的完整介绍，它使用 three.js WebGL 库，编写自一位核心 three.js 开发人员。
可以作为一个引导读者深入了解 three.js 库的指南。
three.js 在线编辑器
网址：https://threejs.org/editor/
three.js editor 是一个基于 Three.js 库的在线3D编辑器。这个编辑器允许用户直接在网页上创建和编辑 3D 场景。
在 Three.js 编辑器中，你可以：
创建和编辑 3D 对象：通过编辑器提供的工具，你可以创建各种几何体（如立方体、球体、圆柱体等），并调整它们的位置、旋转和缩放。
添加材质和贴图：为 3D 对象添加不同的材质，如基本材质、物理材质等，并可以应用贴图来改变对象的外观。
设置光源和环境：在场景中添加不同类型的光源（如点光源、平行光源、环境光等），并调整光照参数。
实时预览：编辑器会实时渲染你的 3D 场景，让你可以立即看到所做的更改。
导入和导出模型：支持导入和导出多种 3D 文件格式，如 glTF、OBJ 等。
The Book of Shaders
网址: https://thebookofshaders.com/?lan=ch
The Book of Shaders 是一个在线学习 Shader 的网站(电子书)，它提供了一系列关于 Shader 的基础教程和示例代码，堪称入门级指南。
Shadertoy
网址：https://www.shadertoy.com/
Shadertoy 是一个基于 WebGL 的在线实时渲染平台，主要用于编辑、分享和查看 shader 程序及其实现的效果。
在这个平台上，用户可以创作和分享自己的 3D 图形效果。它提供了一个简单方便的环境，让用户可以轻松编辑自己的片段着色器，并实时查看修改的效果。
同时，Shadertoy 上有许多大佬分享他们制作的酷炫效果的代码，这些代码是完全开源的，用户可以在这些代码的基础上进行修改和学习。
除此之外，Shadertoy 还允许用户选择声音频道，将当前帧的声音信息转变成纹理（Texture），传入 shader 当中，从而根据声音信息来控制图形。这使得 Shadertoy 在视觉和听觉的结合上有了更多的可能性。
glsl.app
网址：https://glsl.app/
glsl.app 是一个在线的 GLSL (OpenGL Shading Language) 编辑器。GLSL 是一种用于图形渲染的着色语言，特别是在 OpenGL 图形库中。这种语言允许开发者为图形硬件编写着色器程序，这些程序可以运行在 GPU 上，用于计算图像的各种视觉效果。
在 glsl.app 上，你可以：
编写和编辑着色器代码：直接在网页上编写顶点着色器、片元着色器等。 实时预览：当你编写或修改着色器代码时，可以立即在右侧的预览窗口中看到效果。 分享你的作品：完成你的着色器后，你可以获得一个链接，通过这个链接与其他人分享你的作品。 学习：如果你是初学者，该网站还提供了很多示例和教程，帮助你了解如何编写各种着色器效果。
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
