3D虚拟工厂-CSDN博客

原创 3D虚拟工厂

3d虚拟工厂 three.js + blender

2025-05-27 17:34:04 1368

原创 LineBasicMaterial

用于绘制纯色线条的基础材质，支持颜色、线宽和纹理映射。常用于`THREE.Line`或`THREE.LineSegments`几何体

2025-05-16 18:16:15 396

原创 Material

THREE.Material 是 Three.js 中所有材质的基类，定义了物体表面的渲染属性（如颜色、纹理、光照响应、透明度和混合模式等），控制几何体在场景中的视觉表现

2025-05-14 11:22:29 1029

- WebGLRenderTarget 是 Three.js 中的一个类，用于创建离屏渲染缓冲区（Offscreen Render Target），允许将 3D 场景渲染到纹理（Texture）而不是直接渲染到屏幕。 - 主要用途： - 后期处理（Post-processing）：如模糊、辉光、色调映射等效果（结合 EffectComposer 使用）。 - 阴影映射（Shadow Mapping）：存储深度信息以计算动态阴影。 - 反射/折射（Reflect

2025-05-13 10:42:27 450

原创 WebGLRenderer

WebGLRenderer 是 Three.js 的核心渲染器，基于 WebGL 实现，用于在浏览器中高效渲染 3D 场景。它负责处理着色器、光照、阴影、材质、几何体等核心渲染流程，并将最终结果输出到 HTML canvas 元素上。

2025-05-12 10:22:53 1057

原创 BufferAttribute

BufferAttribute是 Three.js 中用于高效管理几何体属性数据的核心类，其主要特点包括：1. **数据存储** 专为存储 `BufferGeometry` 的各种属性设计，包括：顶点位置（`position`）、法线向量（`normal`）、颜色值（`color`）、UV坐标（`uv`）、面片索引（`index`）、自定义属性（如实例化数据）2. **GPU优化** 采用类型化数组（TypedArray）存储数据，通过连续内存布局实现：显存高效传输、适合

2025-05-10 17:57:31 794

原创 BufferGeometryUtils

Three.js 提供的工具类，用于高效处理 `BufferGeometry` 的复杂操作，包括几何体合并、顶点优化、切线计算等。适用于需要高性能几何体处理的场景（如模型简化、LOD生成、动态几何体更新）

2025-05-06 17:41:58 342

原创 BufferGeometry

BufferGeometry 是 Three.js 中用于描述面（Mesh）、线（Line）或点（Point）几何体的高效数据结构。它通过缓存属性（Buffer Attributes）存储以下几何数据：顶点位置（Position）、面索引（Index）、法向量（Normal）、颜色值（Color）、UV 坐标（UV）、自定义属性（Custom Attributes）

2025-05-06 09:11:34 638

原创 Raycaster光线投射

光线投射Raycaster，用于进行raycasting（光线投射）。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。Intersection 类型定义：I说明：

2025-05-04 21:13:17 1140

原创 OrbitControls轨道控制器

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

2025-05-02 13:20:34 486

原创 1️⃣7️⃣three.js_OrbitControls相机控制器

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

2025-05-02 11:28:55 1889

原创 1️⃣6️⃣three.js_光源

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

2025-04-24 15:09:01 376

原创 1️⃣5️⃣three.js_GUI辅助调试器

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

2025-04-22 17:30:55 949

原创 1️⃣4️⃣three.js_Stats性能监视器

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

2025-04-21 14:29:03 170

原创 1️⃣3️⃣three.js_物体的阵列

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

2025-04-20 21:55:41 714

原创 1️⃣2️⃣three.js_物体的镜像

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

2025-04-19 17:01:18 1301

原创 1️⃣1️⃣three.js_物体的平移、缩放、旋转

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

2025-04-18 16:20:27 1396

原创 1️⃣0️⃣three.js_克隆、拷贝

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

2025-04-17 20:03:25 1108

原创 9️⃣three.js_物体的移动

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

2025-04-16 16:43:32 1032

原创 8️⃣three.js_顶点UV

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

2025-04-15 19:09:13 330

原创 7️⃣three.js_顶点法向

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

2025-04-14 21:20:20 780

原创 6️⃣three.js_顶点属性

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

2025-04-13 15:11:16 299

原创 5️⃣three.js_三维坐标系

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

2025-04-12 10:09:16 393

原创 4️⃣three.js_Blender基本操作

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

2025-04-11 13:10:14 320

sharkhzj的专栏