Web3D图形学

切换日光/暗黑模式

模型 Models ​

1. 3D模型介绍 ​

基本组成:

  • 顶点: 表示模型中的点, 具有三维坐标 xyz,
  • 边: 连接两个顶点的线段, 通常用于定义模型的轮廓
  • 面: 由三个或更多个顶点组成的多边形。面是 3D 模型的表面单元，用于构成模型的外观。
  • 几何体: 用于表示 3D 模型顶点、边和面信息的数据结构。
  • 网格: 是由顶点、边和面组成的 3D 模型。用于表示可渲染的 3D 对象。
  • 材质: 定义了 3D 模型的外观，例如颜色、纹理、光照反射等属性。
  • 纹理: 通常通过 UV 映射将二维图像映射到模型的表面上。
  • 骨骼(skeleton)和权重(weights): 对于动画模型，骨骼是种用于表示模型的关节和骨架结构的数据结构。权重用于定义每个顶点受到骨骼影响的程度，从而实现模型的形状变形和动画。

1.1 模型的种类 ​

  • 静态模型

    是固定不变的模型，是静态的、不具有动画效果的模型。通常是静态的、稳定的对象或场景的表示，它不具备时间上的变化。例如，在建筑设计中使用的静态模型可以展示建筑物的外观、结构和细节，但它不包含动态的元素或运动效果。

  • 动画模型

    是指具有运动或动态效果的模型，它能够在一定时间范围内产生连续的变化和动作。动画模型可以通过关键帧动画、骨骼动画、物理模拟等技术实现。它描述了模型在时间上的变化，可以展示物体的运动、变形、变换等动态效果。

​

2. 加载3D模型 ​

threejs 针对不同的模型格式提供了对应的加载器

2.1 常见3D模型 ​

模型格式Loader说明其他
glTF/glbGLTFLoader (glTF 2.0)GLTF（GL Transmission Format）是用于在Web上传输和加载3D模型的开放标准格式开放性使得开发者能够在不同的3D工具和引擎之间进行交互和共享模型数据。使用二进制格式存储模型数据，这使得文件大小更小，加载速度更快。同时支持json格式数据。支持使用压缩算法对模型数据进行压缩，以减小文件大小。此外，GLTF还支持使用扩展来实现更高级的功能，如渐进式加载、动画、材质和纹理等。支持扩展来支持特定的功能和需求。
gltf/glbDRACOLoader主要用于压缩和解压缩三维模型及点云。 以客户端上解压缩为代价，显著减少压缩的图形。独立的Draco文件后缀为.drc，其中包含顶点坐标，法线，颜色和其他的属性， Draco文件不包含材质，纹理，动画和节点结构。当使用Draco压缩的GLTF模型时，GLTFLoader内部会调用DRACOLoader。
ObjOBJLoaderOBJ格式使用ASCII文本文件存储模型数据，包括顶点坐标、法线、纹理坐标、面索引等信息。OBJ文件可以直接打开并查看，方便进行调试和修改。兼容性广泛, 但不支持动画和材质，OBJ文件相对较大，加载时间可能较长。
fbxFBXLoader是由Autodesk开发的通用3D模型和动画交换格式。FBX格式主要用于在不同的3D软件和引擎之间交换和共享模型、材质、动画和其他相关信息。FBX格式可以存储模型的几何体、材质、纹理、动画、骨骼绑定和其他相关信息。对动画数据的支持非常强大。它可以存储模型的骨骼绑定、关键帧动画、蒙皮权重、动画曲线等信息，使得在不同软件和引擎之间共享和编辑动画变得更加方便和准确。文件大小常常较大。仍然是Autodesk的专有格式。这意味着FBX的规范并不公开，开发者需要使用Autodesk提供的SDK或加载器来解析和处理FBX文件。
...
gltf文件格式预览

报名课程后可查看完整文档

.bin 文件

对应了 gltf 文件 buffers 中 uri 指向的路径, 内部存储模型顶点的数据信息, 这些信息可以单独存储为.bin二进制文件, 也可以直接存储到gltf文件中

.glb 文件

glb 是 gltf格式文件的二进制存储方式, .glb文件相对.gltf文件体积更小，网络传输也就更快。

2.2 模型文件资源 ​

2.3 使用blender导入导出模型文件 ​

常见建模软件有maya, 3ds max, c4d, unity, UE(虚幻引擎), blender, 这里以 blender 3.6.1 为例

下载 blender 并安装 ​

官方下载链接下载

界面介绍 ​

界面介绍

导入指定格式的模型文件 ​

导入文件

节点信息 ​

节点信息

导出模型 ​

导出模型导出模型

2.4 使用加载器加载3D模型文件 ​

加载3D模型

报名课程后可查看完整文档

2.5 使用 Draco加载压缩模型 ​

javascript
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; 

const dracoLoader = new DRACOLoader(); 

// 设置draco文件路径
dracoLoader.setDecoderPath('/draco/'); 
// 可选: 开启 Pre-fetch Draco WASM/JS 模块.
dracoLoader.preload(); 

const gltfLoader = new GLTFLoader();

gltfLoader.setDRACOLoader(dracoLoader); 

gltfLoader.load('model.drc', (model) => {
  // ...
});

3. 模型操作 ​

模型加载完成后可以对模型对象进行自由操作, 如平移旋转缩放, 替换纹理图片等

操作方法:

加载完成后的模型操作

报名课程后可查看完整文档

分组管理 ​

Object3D.getObjectById(id), .getObjectByName(name), .getObjectByProperty(name, value), .getObjectsByProperty(name, value) 获取子对象

分组管理子对象

报名课程后可查看完整文档

材质共享 ​

不同的物体可以使用了相同的材质, 此时模型中可能也是1个材质对象, 这样做可以压缩模型大小, 但是在编写代码过程中可能会对某个物体进行材质修改, 但也会影响相同的材质对象

如何判断是否是共享材质

报名课程后可查看完整文档

解决思路

报名课程后可查看完整文档

模型纹理编码 ​

通常为了保证还原模型色彩渲染, threejs要求纹理图片色彩空间要与渲染器色彩空间保持一致

从152版本开始 threejs 使用sRGB作为默认色彩空间

如果是手动加载纹理图片就需要设置 texture.colorSpace = THREE.SRGBColorSpace;

查看模型纹理编码

报名课程后可查看完整文档

gltf 扩展 ​

threejs gltfLoader 可能会加载到无法识别的 gltf 扩展

如果控制台出现警告, 如: THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness". 说明threejs不支持该材质对象的gltf扩展.

通常情况下, 3D模型的物体材质都是PBR材质, 因为这种材质对现实世界模拟的最为真实. 所以遇到无法正常渲染的模型, 可以直接创建PBR材质来替换模型中对应的对象

解决不支持的gltf扩展

报名课程后可查看完整文档

手动替换模型纹理图片 ​

自主加载纹理图片

报名课程后可查看完整文档

解决纹理图片显示异常

报名课程后可查看完整文档

vscode 模型预览插件 ​

vscode 有插件可以直接预览模型渲染效果, 方便用于渲染对比

模型渲染精度 ​

报名课程后可查看完整文档

模型后期处理 (效果合成器 EffectComposer) ​

用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后会被自动渲染到屏幕上。

常用的后期效果:

  • 运动幻影（Afterimage）：通过在场景中创建多个透明或半透明的对象副本，每个对象副本都稍微延迟于前1个对象副本的位置和姿态，从而创建出连续运动的幻影效果。这种效果可以用于增强物体的运动感和动态性，使得物体在场景中的运动更加流畅和生动。
运动幻影

报名课程后可查看完整文档

运动幻影效果

  • 泛光效果（UnrealBloomPass）：通过模糊处理和混合操作，实现最终图像上的泛光视觉效果。
泛光效果

报名课程后可查看完整文档

泛光效果

  • 半色调效果（HalftonePass）：通过将半色调效果与渲染结果混合，实现最终图像上的半色调视觉效果。
半色调效果

报名课程后可查看完整文档

半色调效果

  • 图像故障效果（GlitchPass）：通过将图像故障效果与渲染结果混合，实现最终图像上的图像故障视觉效果。
图像故障效果

报名课程后可查看完整文档

图像故障效果

  • 高亮发光描边（OutlinePass）：通过在场景中的物体边缘周围绘制线条来突出物体的轮廓，从而使物体在渲染时更加突出和清晰。
高亮发光描边

报名课程后可查看完整文档

高亮发光描边

  • 点阵屏幕效果（DotScreenPass）：通过将点阵屏幕效果与渲染结果混合，实现最终图像上的点阵屏幕视觉效果。
点阵屏幕效果

报名课程后可查看完整文档

点阵屏幕效果

  • 景深效果（BokehPass）：通过调整场景中的焦距和景深，可以模拟出现实中的景深效果。
景深效果

报名课程后可查看完整文档

景深效果

  • 辉光效果（Bloom）：辉光效果是指当光线照射到物体表面时，部分光线会散射并在周围产生模糊的光晕效果。
辉光效果

报名课程后可查看完整文档

辉光效果

有时你或许想要自己写个自定义后期处理着色器，并将其包含到后期处理过程链中。 对于这个需求，你可以使用ShaderPass。

自定义后期处理着色器示例

报名课程后可查看完整文档

你也可以借助专业的后期效果库来创建视觉效果 如:

​

4. 动画系统 ​

4.1 关键帧动画 ​

关键帧轨道(KeyframeTrack)中总是存在两个数组：times数组按顺序存储该轨道的所有关键帧的时间值，而values数组包含动画属性的相应更改值。(官方文档)

手动创建 keyframes

报名课程后可查看完整文档

3D模型动画 ​

  • 动画混合器（AnimationMixer）

    是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同1个动画混合器。

  • 动画剪辑（AnimationClip）

    是可重用的关键帧轨道集，它代表动画。

  • 动画动作（AnimationAction）

    用来调度存储在AnimationClips中的动画。而且大多数方法都可以链式调用。不要直接调用这个构造函数，而应该先用AnimationMixer.clipAction实例化 AnimationAction，因为这个方法提供了缓存以提高性能。

简单案例

报名课程后可查看完整文档

webworker并发加载模型 ​

webworker

报名课程后可查看完整文档

控制动画 ​

控制动画

报名课程后可查看完整文档

控制模型动画案例

报名课程后可查看完整文档

4.2 变形动画 ​

报名课程后可查看完整文档

4.3 骨骼动画 ​

报名课程后可查看完整文档

创建骨骼 ​

Bone 有以下属性：

  • name：骨骼的名称。
  • parent：骨骼的父骨骼。
  • children：骨骼的子骨骼。
  • matrix：骨骼的变换矩阵。
  • position：骨骼的位置。
  • rotation：骨骼的旋转。
  • scale：骨骼的缩放。
  • ...
创建骨骼 Bone

报名课程后可查看完整文档

创建骨架 skeleton

报名课程后可查看完整文档

借助 SkeletonHelper 进行可视化骨骼关节

报名课程后可查看完整文档

通常来说模型文件中的骨骼都是在3D建模软件中制作的, 我们不用关心如何生成骨骼网格, 只需要获取到骨骼的信息即可

模型文件中也可能包含人物动画, 如人物行走, 跳跃, 摔倒等动作, 这些动作也是由建模软件来实现, 我们只要关心如何读取动画

实现原理是物体表面的顶点会与附近的骨骼绑定, 骨骼的移动旋转会带动附近的顶点位置发生变化, 然后通过关键帧动画来控制骨骼关节运动, 从而带动皮肤(顶点)发生变形, 形成骨骼动画效果

借助 SkeletonHelper 可视化查看3D模型骨骼关节

报名课程后可查看完整文档

蒙皮网格 (SkinnedMesh) ​

报名课程后可查看完整文档

4.4 路径动画 ​

报名课程后可查看完整文档

4.4.1 创建路径动画 ​

报名课程后可查看完整文档

4.4.2 路径动画在游戏和场景中的应用 ​

报名课程后可查看完整文档

4.4.3 脚步预测 ​

报名课程后可查看完整文档

4.4.4 如何在不平坦的地面行走 ​

报名课程后可查看完整文档

4.5 物理引擎动画 ​

见第12章物理引擎章节

5. 性能优化&常见模型加载问题 ​

报名课程后可查看完整文档

报名课程后可查看完整文档

Released under the CC BY-SA License.

Copyright © 2022-present Keman5