本系列为 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。用于实时方便调整动画或物体的各种参数。我们可以自己开发,也可以使用一个三方库,这里我们选择使用现成的库。
本系列为 Three.js journey 教程学习笔记。
先前我们一直使用立方体,本节我们将学习一下其他几何体。
Threejs 中几何体的基类是 BufferGeometry
,而 BufferGeometry 是面片、线或点几何体的有效表述。包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。
本系列为 Three.js journey 教程学习笔记。
画布充满窗口,resize,像素比,双击全屏等功能
本系列为 Three.js journey 教程学习笔记。
Camera 相机
查看 Three.js 的文档,可以看到 Camera 是一个抽象类,一般不直接使用,其他类型的 Camera 实现了这个抽象类。有
本系列为 Three.js journey 教程学习笔记。
Animation 动画
Three.js 中的动画与其他 Canvas 动画类似,都是使用了 requestAnimationFrame
api,接下来就详细讲讲基于时间间隔动画、Threejs 内置的时钟、以及第三方动画库