https://blog.deltastudio.space/categories/3d/Recent content in 3D on Feynman 的博客Hugozh-CNMon, 31 Aug 2026 12:00:00 +0800https://blog.deltastudio.space/posts/moeru-elastic-tag-dot-grid/Sat, 01 Aug 2026 10:00:00 +0800https://blog.deltastudio.space/posts/moeru-elastic-tag-dot-grid/<blockquote class="blockquote-regular"> <p>本文复刻 <a href="https://moeru.ai/">moeru.ai</a> 落地页中两个最具沉浸感的交互模块：<strong>波点网格物理交互</strong>和<strong>3D 挂牌 Verlet 弹性吊绳系统</strong>。不涉及可变字体压力动画和 GitHub 成员头像加载。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-08-01_moeru-elastic-tag-dot-grid/cover.png" alt="moeru.ai 网站效果示意"></p> <h2 id="01-整体架构与技术选型">01 整体架构与技术选型</h2> <p>原站是一个单页面沉浸式落地页，核心交互由 4 个模块组成。本文聚焦其中两个：</p>https://blog.deltastudio.space/posts/threejs-project-architecture/Tue, 07 Jul 2026 10:00:00 +0800https://blog.deltastudio.space/posts/threejs-project-architecture/<blockquote class="blockquote-regular"> <p>Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/01_project-architecture/demo.png" alt="运行效果：旋转浮动的法线材质立方体"></p> <p><em>法线材质立方体在黑色背景上旋转浮动，不同面呈现不同颜色（法线方向映射为 RGB）</em></p>https://blog.deltastudio.space/posts/threejs-noise/Mon, 31 Aug 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-noise/<blockquote class="blockquote-regular"> <p>上节课用 GLSL 数学函数画出了形状和渐变。本节课进入着色器的&quot;灵魂工具&quot;——噪声函数：从 random 的雪花到 Perlin 的连续云雾，从单层噪声到 FBM 的分形细节，最终用噪声驱动云雾、地形、火焰和顶点变形。</p>https://blog.deltastudio.space/posts/threejs-glsl-math/Tue, 25 Aug 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-glsl-math/<blockquote class="blockquote-regular"> <p>上节课掌握了 GLSL 基础语法和 ShaderMaterial 的数据通道。本节课深入数学函数——mix / step / smoothstep 控制渐变与边界，sin / cos 制造波浪，dot / cross 做光照和 Fresnel，fract / mod 生成重复图案。这些函数是从&quot;一张 UV 坐标&quot;到&quot;一幅画面&quot;的核心工具链。</p>https://blog.deltastudio.space/posts/threejs-glsl/Sat, 15 Aug 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-glsl/<blockquote class="blockquote-regular"> <p>前 9 课用的都是 Three.js 内置材质（MeshStandardMaterial、MeshBasicMaterial……）。本节课开始写自定义 shader —— 直接用 GLSL 和 GPU 对话，让渐变、波浪、Fresnel 这些效果完全由代码生成，不再依赖内置材质的预设参数。</p>https://blog.deltastudio.space/posts/threejs-animation/Thu, 30 Jul 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-animation/<blockquote class="blockquote-regular"> <p>前 8 课的动画都是在 requestAnimationFrame 循环里手动写位移和旋转。本节课引入 GSAP 补间动画和 Three.js 原生关键帧系统，让动画控制更优雅、更强大。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/09_animation/demo.png" alt="运行效果：动画系统演示"></p> <h2 id="01-学习目标">01 学习目标</h2> <p>本节课聚焦 Three.js 动画系统：</p>https://blog.deltastudio.space/posts/threejs-model-loading/Tue, 28 Jul 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-model-loading/<blockquote class="blockquote-regular"> <p>前 7 课我们一直在用代码创建几何体。真实项目中，3D 模型通常由美术在 Blender/Maya 中制作，导出为 GLTF/GLB 格式后加载到场景中。本节课掌握模型加载的完整流程：加载 → 压缩 → 缩放 → 动画。</p>https://blog.deltastudio.space/posts/threejs-scene-graph/Fri, 24 Jul 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-scene-graph/<blockquote class="blockquote-regular"> <p>场景图是 Three.js 的骨架系统。理解父子关系、变换继承和坐标系转换，就能用简单的几何体拼出复杂的 3D 结构。本节课通过太阳系模型和积木小动物拼装，深入理解场景图的树形结构。</p>https://blog.deltastudio.space/posts/threejs-textures/Thu, 23 Jul 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-textures/<blockquote class="blockquote-regular"> <p>纹理是给 3D 物体「穿衣服」的过程。理解 UV 坐标、学会加载和控制纹理、掌握环境贴图的反射原理，就能让场景从「素模」变成「有质感的世界」。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/06_textures/demo.png" alt="运行效果：纹理与贴图演示"></p> <h2 id="01-学习目标">01 学习目标</h2> <p>本节课聚焦 Three.js 纹理与贴图系统：</p>https://blog.deltastudio.space/posts/threejs-cameras/Sun, 19 Jul 2026 12:00:00 +0800https://blog.deltastudio.space/posts/threejs-cameras/<blockquote class="blockquote-regular"> <p>相机决定了用户「从哪里看」和「看到多大范围」。掌握透视相机和正交相机的区别，理解视锥体和裁剪面，就能精确控制 3D 场景的视觉呈现。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/05_cameras/demo.png" alt="运行效果：透视相机 vs 正交相机对比"></p>https://blog.deltastudio.space/posts/threejs-lights/Fri, 17 Jul 2026 10:00:00 +0800https://blog.deltastudio.space/posts/threejs-lights/<blockquote class="blockquote-regular"> <p>灯光是 3D 场景的灵魂。掌握 5 种灯光类型和阴影三要素，就能让场景从「扁平感」变成「有层次的真实世界」。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/04_lights/demo.png" alt="运行效果：5 种灯光对比 &#43; 阴影质量展示"></p> <p><em>从左到右：Ambient、Hemisphere、Directional、Point、Spot 五种灯光效果对比，下方为不同分辨率的阴影质量展示</em></p>https://blog.deltastudio.space/posts/threejs-materials/Thu, 16 Jul 2026 10:00:00 +0800https://blog.deltastudio.space/posts/threejs-materials/<blockquote class="blockquote-regular"> <p>材质决定了物体表面如何与光线交互。掌握 6 种材质类型和 PBR 参数，就能让 3D 物体从&quot;塑料感&quot;变成&quot;照片级真实&quot;。</p>https://blog.deltastudio.space/posts/threejs-primitives/Fri, 10 Jul 2026 10:00:00 +0800https://blog.deltastudio.space/posts/threejs-primitives/<blockquote class="blockquote-regular"> <p>几何体是 3D 世界的积木。掌握 5 种基础图元，就能组合出几乎任何形状。</p> </blockquote> <p><img src="https://blog.deltastudio.space/images/2026-07-07_series_threejs-creation-diary/02_primitives/demo.png" alt="运行效果：5 种基础几何体 &#43; Wireframe 可视化"></p> <p><em>从左到右：Wireframe 球体（低分段）、Box、Sphere、Cylinder、Torus，底部为棋盘格纹理的 Plane 地面</em></p>