sharkhzj的专栏

在正式学习 3D虚拟工厂之前，需要先做一些必要的准备工作，主要是下载VSCode、Blender，导入开源项目，

PerspectiveCamera模式被用来模拟人眼所看到的景象，它是使用得最普遍的投影模式，呈现近大远小。然后在场地上放置一些物体，比如立方体、球体、圆柱体等。有了场景之后，需要一个相机来控制场景的显示。接着设置相机的位置，以及设置相机的观察目标。首先创建一个场景对象，拥有一片空旷的场地。将几何体和材质组合起来，创建可视化的物体。最后将物体放置在场景中，调整一下放置的位置。定义材质，比如颜色、纹理、透明等。最后设置相机的参数。

Blender导出模型，可以选择glTF或GLB，其实是同一格式的两种不同封装方式（均基于glTF2.0标准）。 - GLB（推荐多数情况下使用），优点：单一文件、二进制编码体积更小、加载更方便。 - glTF，多文件组成，优点：可动态编辑JSON结构，动态替换纹理或动画数据

通过这个例子可以看出，Blender作为一款强大的3D建模工具，能够快速创建各类模型，包括复杂结构的建模。不过代码模式也有其独特优势，比如可以在现有模型基础上轻松实现材质修改、镜像、阵列、旋转、缩放以及动画等操作。打开blender，点击Edit->Preferences->选择Interface->Language，选择中文。文件->导出->glTF2.0(.glb/.gltf)->选择存放路径->点击保存。选择立方体（经纬球、柱体、猴头）->材质->新建->选择颜色。建议安装LTS长期支持版。

Three.js 和 Blender 的坐标系不同，主要是因为它们的设计目标和使用场景有所差异。- 现实世界中的零点坐标在哪？ - 或是奇点大爆炸的初始位置？ - 或是银河系中心超大质量黑洞？ - 或是太阳系中心？- 坐标系本质上是人为定义的参考框架，零点的选择取决于具体应用场景：

GPU只能渲染三角形，无法直接处理四边形或多边形。例如，一个立方体有6个四边形面，每个四边形会被拆分成2个三角形，而每个三角形需要3个顶点来定义。- 6个面 × 2个三角形 × 3个顶点 = 36个顶点

立方体共有24个顶点，每个顶点都拥有独立的法线向量。顶点的法线向量（即朝向）在默认情况下垂直于其所在的三角平面，但可以根据需要进行修改。这些法线主要用于光照计算，通过影响光线与物体表面的交互方式，从而决定物体在光照下的明暗表现。

如何定义UV坐标？ 1、在Blender中，通过【标记缝合边】(类似剪刀✂️剪开纸盒)，可将立方体展开成十字型或T型等平面布局。 2、在UV编辑界面中，可以自由拖动顶点来调整UV坐标分布。 3、本质上，纹理图片就像一张大披萨，UV坐标就是分割线，每个四边形面获取对应的披萨切片🍕，最终贴到3D模型上。

⭐移动厂房屋顶时，tempFactory001Top.position.set(200, 0, 30) 的坐标是相对于其父物体（厂房001）的局部坐标，而非世界坐标。因此，需先将目标世界坐标（200, 0, 30）转换为厂房001坐标系下的局部坐标，再通过 position.set 设置，才能正确移动。移动物体时，先定位目标（如厂房），再将其移至新位置。

使用 clone() 方法克隆 厂房001 时，系统会 创建一个新的空物体（包含其所有子物体）不创建新对象：copy() 是实例方法，需在已有对象上调用，仅复制属性到目标对象。不自动创建副本：你需要先手动创建目标对象（如 new Group()）。同样共享材质/几何体：和 clone() 一样，材质和几何体是浅拷贝。左边是clone()方法，右边是copy()方法.点击【专栏目录】查看专栏其他内容。

📍齐次坐标是一种用于表示几何点的坐标系统。以三维物体上的点（1，5，6）为例，它原本有XYZ三个坐标。若要使该点发生位置变化，需引入齐次坐标，将其表示为（1，5，6，1）。最后验证矩阵转换结果：Blender局部坐标（31, -9, 25.5）变换为three.js局部坐标（31, 25.5, 9）。在父级坐标系中，物体的缩放和旋转看似简单——无非是改变大小或调整角度，实则暗藏玄机，变得复杂难懂。📍当前矩阵也可以在 threejs场景->新办公楼2->matrix中查看。右边克隆、平移、旋转、缩放。

镜像（Mirror Reflection）是指物体相对于某个参考平面或坐标轴进行对称变换的操作。在父级坐标系中，物体镜像变换的数学本质是对指定轴向的坐标值进行取反操作。右侧箭头处是预期位置，红圈⭕为父级坐标系原点。实际X轴移动了-30米（与预期相反），旋转方向也变为逆时针90度（与预期顺时针相反）。 下面比较烧脑，谨慎观看！

物体的排列组合，本质上是通过复制和平移来实现的。这个层级结构中：three.js场景 → glb场景 → 树 → 大树1（包含两个mesh：树叶和树干）。克隆操作是针对大树1这个空Group对象进行的，因此其子mesh都是引用关系。当我们修改任一mesh的Geometry或Material时，所有引用这些mesh的父级Group都会同步更新。 不过，克隆产生的Group对象是独立的，例如newTreeOther可以单独设置x轴坐标和y轴旋转属性。

在流畅运行的情况下，FPS 通常为 60，这意味着每帧的渲染时间约为 16.7 毫秒（即 1/60 秒），这一时间也被称为 帧间隔时间（Frame Interval）。需要注意的是，render() 函数的计算复杂度越高，渲染性能通常就越低。然而，如果在调试过程中没有性能监视器，当出现画面卡顿时，开发者将难以精准定位性能瓶颈，无法判断是渲染逻辑复杂、GPU 负载过高，还是其他因素导致的帧率下降。如果项目出现卡顿问题，在排除硬件因素后，应重点检查 render() 函数的执行效率以及三维场景的复杂度。

这里将参数分为四组：位置、缩放、颜色和旋转。每组包含一个或多个控制，调整这些控制时，大树的形态会实时更新，无需修改代码，直接在 GUI 中即可完成调整。GUI辅助调试器将原本需要修改代码调整参数并刷新页面的操作，简化为直接在GUI中实时调整，实现所见即所得的效果。当前修改的tempPosition作为中间变量的方式会同步更新项目中多处引用，这种间接操作不够直观。修改 JavaScript 对象tempPosition的参数。

在 Three.js 中，环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）、 聚光灯（SpotLight）、半球光（HemisphereLight）是几种常用的光源类型。blender 中的日光、点光、面光、聚光：three.js:环境光、点光源、平行光、聚光灯、半球光：开启地面接收物体阴影renderer开启阴影映射。

Controls” 表明它是一个 输入控制系统，将用户操作（鼠标/触摸）转换为相机运动。