本系列为 Three.js journey 教程学习笔记。
导入模型ggg vvv
Three.js 提供了很多原始模型,但如果我们需要更复杂的模型,最好使用 3D 软件建模,然后导入到场景中。本节我们就来学学如何导入一个做好的 3D 模型。
本系列为 Three.js journey 教程学习笔记。
physics 物理引擎////
在 WebGL 里使用物理引擎是非常棒的一种体验,人们会非常享受与这些物体产生物理效果,例如重力、弹性、加速度、摩擦力、碰撞等。有很多方式实现物理效果,并且取决于项目中想怎么使用。如果只是简单物理效果,可以使用数学(三角函数)和 Raycaster 来实现,但复杂效果,还是非常建议送一个物理引擎相关的库。
本系列为 Three.js journey 教程学习笔记。
Scroll based animation 基于页面滚动的动画
本节我们将学习基于页面滚动的动画。很好的将之前所学的内容做一个复习和运用。
我们会把 WebGL 部分固定到页面中,随着页面的滚动 WebGL 中也随之相应的产生动画效果。这种联动的效果会带来非常好的体验,并且也会让你的页面看起来很高级很有未来感。联动的效果主要是使用 camera 的角度变化来实现。并且最后会加入一些滚动到某个区域后的动画效果。
本系列为 Three.js journey 教程学习笔记。
光线投射 Raycaster
光线投射可以发射一个特定方向的射线,来检测是否有物体与这个射线相交。有以下的使用场景:
本系列为 Three.js journey 教程学习笔记。
接下来,我们学习一下如何使用粒子,本节将开发一个银河生成器,使用粒子效果生成各种各样的银河效果。
本系列为 Three.js journey 教程学习笔记。
粒子特效
听到粒子特效,是不是无比期待?可以用它实现非常多的效果如星空、烟雾、雨、灰尘、火等。
粒子特效的优势是即使使用了成百上千的例子,也能保证比较高的帧率。缺点是每个粒子都由一个始终面向相机的平面(两个三角形)组成。
创建粒子像创建几何体一样简单,我们使用 PointsMaterial 材质,它不会创建几何体而是创建非常多的点 Points。下面我们开始吧。
本系列为 Three.js journey 教程学习笔记。
本节将使用我们之前学习的内容来创建一个鬼屋。我们会创建一个房子,有门、屋顶、和一些灌木,我们也会创建一些墓碑,还有幽灵的光飘过并产生投影。
本系列为 Three.js journey 教程学习笔记。
Shadows 影
我们已经学习了光,现在想要增加一些影。几何体的背光面确实是暗的,这被称为 core shadow,我们缺失的是 drop shadow (投影),物体投射到其他物体上的影子。
投影对于实时3D渲染来说比较挑战性能,开发者需要寻找各种 trick 的方案来合理的实现投影。
我们本节将学习 Three.js 内置的投影、烘焙投影(Baking Shadow)、自己绘制等方式。
本系列为 Three.js journey 教程学习笔记。
本节将学习 3D Text,并做一个炫酷的 3D Text 展示页面。我们将使用 TextGeometry 文本缓冲几何体来实现。