Welcome to HyG's Blog!
这里记录着我的前端学习之路-
摩天轮动画的实现揭秘
摩天轮动画的实现揭秘
恰好近期业务上开发了类似这样的摩天轮动画，我将其中的实现原理分享给大家。摩天轮动画主要分为 2 部分，一个是摩天轮上每个房间位置布局，另一个就是旋转动画了。
-
Three.js 之 19 realistic render 真实渲染
本系列为 Three.js journey 教程学习笔记。
我们上一节最后将汉堡模型导入到了 Three.js 的场景中了，但是颜色效果很奇怪。为了让它渲染的更真实，我们需要做一些额外的操作，接下来就一起看看吧~
-
Three.js 之 18 使用 Blender 设计和导出模型
本系列为 Three.js journey 教程学习笔记。
使用 Blender 设计和导出模型
有很多 3D 建模的软件，比如 Cinema 4D、Maya、3DS Max、Blender、ZBrush 等。本节课我们将学习 Blender 因为它是免费的，并且性能也还不错。
本节课学习完成后，你并不会成为 Blender 的专家，因为它需要更多完整的课程才能熟练。我们只是学习的软件的入门，以便能够应对更多地简单模型。熟悉一个模型的制作以及它是如何被导出并导入到 WebGL 中去的。
-
Three.js 之 17 Import Model 导入模型
本系列为 Three.js journey 教程学习笔记。
导入模型
Three.js 提供了很多原始模型，但如果我们需要更复杂的模型，最好使用 3D 软件建模，然后导入到场景中。本节我们就来学学如何导入一个做好的 3D 模型。
-
Three.js 之 16 Physics 物理引擎
本系列为 Three.js journey 教程学习笔记。
physics 物理引擎
在 WebGL 里使用物理引擎是非常棒的一种体验，人们会非常享受与这些物体产生物理效果，例如重力、弹性、加速度、摩擦力、碰撞等。有很多方式实现物理效果，并且取决于项目中想怎么使用。如果只是简单物理效果，可以使用数学（三角函数）和 Raycaster 来实现，但复杂效果，还是非常建议送一个物理引擎相关的库。
-
Three.js 之 15 Scroll based animation 基于页面滚动的动画
本系列为 Three.js journey 教程学习笔记。
Scroll based animation 基于页面滚动的动画
本节我们将学习基于页面滚动的动画。很好的将之前所学的内容做一个复习和运用。
我们会把 WebGL 部分固定到页面中，随着页面的滚动 WebGL 中也随之相应的产生动画效果。这种联动的效果会带来非常好的体验，并且也会让你的页面看起来很高级很有未来感。联动的效果主要是使用 camera 的角度变化来实现。并且最后会加入一些滚动到某个区域后的动画效果。
-
Three.js 之 14 Raycaster 光线投射
本系列为 Three.js journey 教程学习笔记。
光线投射 Raycaster
光线投射可以发射一个特定方向的射线，来检测是否有物体与这个射线相交。有以下的使用场景：
- 检测玩家前方是否有墙
- 检测射击游戏是否击中了什么物体
- 检测是否有什么物体在鼠标下，并模拟鼠标事件
- 等
-
Three.js 之 13 Galaxy 银河效果生成器
本系列为 Three.js journey 教程学习笔记。
接下来，我们学习一下如何使用粒子，本节将开发一个银河生成器，使用粒子效果生成各种各样的银河效果。
-
Three.js 之 12 Particles 粒子效果
本系列为 Three.js journey 教程学习笔记。
粒子特效
听到粒子特效，是不是无比期待？可以用它实现非常多的效果如星空、烟雾、雨、灰尘、火等。
粒子特效的优势是即使使用了成百上千的例子，也能保证比较高的帧率。缺点是每个粒子都由一个始终面向相机的平面（两个三角形）组成。
创建粒子像创建几何体一样简单，我们使用 PointsMaterial 材质，它不会创建几何体而是创建非常多的点 Points。下面我们开始吧。
-
Three.js 之 11 Haunted House 恐怖鬼屋
本系列为 Three.js journey 教程学习笔记。
本节将使用我们之前学习的内容来创建一个鬼屋。我们会创建一个房子，有门、屋顶、和一些灌木，我们也会创建一些墓碑，还有幽灵的光飘过并产生投影。
- 摩天轮动画的实现揭秘
- Three.js 之 19 realistic render 真实渲染
- Three.js 之 18 使用 Blender 设计和导出模型
- Three.js 之 17 Import Model 导入模型
- Three.js 之 16 Physics 物理引擎
- Three.js 之 15 Scroll based animation 基于页面滚动的动画
- Three.js 之 14 Raycaster 光线投射
- Three.js 之 13 Galaxy 银河效果生成器
- Three.js 之 12 Particles 粒子效果
- Three.js 之 11 Haunted House 恐怖鬼屋