本系列为 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 文本缓冲几何体来实现。
本系列为 Three.js journey 教程学习笔记。
Materials 材质
Materials 是用来给几何体的每个可见像素上色的。其中的算法程序成为 shaders。我们暂时不学习如何写 shaders,我们先使用内置的 materials,具体可以参考文档 Material
本系列为 Three.js journey 教程学习笔记。
纹理是覆盖在几何体表面的图片,当把纹理按照特定的方式映射到物体表面上的时候能使物体看上去更加真实。
可以前往 https://3dtextures.me/ 寻找合适的纹理贴图,这个网站是提供了具有漫反射、法线、置换、遮挡、镜面反射和粗糙度贴图的免费无缝 PBR 纹理。接下来我们将使用这个门板纹理贴图
PBR 原则是基于物理的渲染(Physically Based Rendering),基于与现实世界的物理原理更相符的基本理论所构成的渲染技术。PBR 已经成为一种标准,很多设计软件和库都在使用,如 Three.js, Blender 等
本系列为 Three.js journey 教程学习笔记。
本节将学习 debug UI。用于实时方便调整动画或物体的各种参数。我们可以自己开发,也可以使用一个三方库,这里我们选择使用现成的库。