three.js

Three.js 阴影映射：光影魔术师的神秘配方在 Three.js 的三维世界里，物体就像一个个舞台上的演员，灯光是它们的聚光灯，而阴影则是为这场演出增添真实感的关键道具。没有阴影，再精美的 3D 场景都会像漂浮在虚空里的幽灵，缺少扎根现实的灵魂。今天，我们就来揭秘 Three.js 中阴影映射（Shadow Mapping）这位光影魔术师的神秘配方，看看它是如何用阴影贴图技术，为场景绘制出逼真阴影的。

小桥风满袖

Three.js-硬要自学系列32之专项学习箭头辅助器想象一下我们在玩一个3D建造游戏或者看一个科学模拟动画。如果想直观地看到：three.js中提供了一个可视化工具 ArrowHelper ,专门用来在3D场景中绘制一个箭头,方便清楚地标出某个方向。

苹果发布会“液体玻璃”，在three.js上用着色器的实现方案前天苹果发布会展示的“液体玻璃”效果还历历在目，那么在three.js上如何用着色器实现同样的效果呢，那么直接看源码，结尾有本人github开源地址

019-各种灯光和常用helper（一）该系类文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

Three.js 高级灯光效果：用光影编织数字梦境在 Three.js 构建的 3D 数字宇宙里，灯光可不只是照亮场景的工具，它是赋予虚拟世界灵魂的魔法师。想象一下，没有灯光，你的 3D 模型就像被困在黑暗地下室的雕塑，再精美的细节也无人欣赏。而当我们巧妙运用多种灯光类型，就能模拟出真实世界里千变万化的光照效果，让数字场景瞬间鲜活起来。现在，就让我们化身光影艺术家，开启这场 Three.js 高级灯光效果的奇幻之旅。

018-场景遍历和世界坐标系该系类文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

小桥风满袖

Three.js-硬要自学系列31之专项学习动画混合动画混合（Animation Blending）就像一位 DJ 同时播放多首歌，并将它们自然过渡拼接成一首新曲。它让 3D 模型（比如游戏角色）能在不同动作之间平滑切换（如从“走路”渐变到“跑步”），不会出现卡顿或突兀的跳跃。

Three.js 自定义几何体：解锁 3D 世界的创造力在 Three.js 的奇妙 3D 宇宙中，我们常常会遇到系统自带几何体无法满足需求的情况。这时候，自定义几何体（Custom Geometries）就如同一位神奇的工匠，能按照我们的想法，打造出独一无二的 3D 形状。接下来，就让我们深入了解这位 “工匠” 的奥秘，看看如何用它在 Three.js 的世界里创造奇迹！

小桥风满袖

Three.js-硬要自学系列30之专项学习环境光想象一下阴天在户外的感觉：基础打底光烘托氛围搭配其他光源（90%的情况！）“环境光不能替代太阳光！” 真相：它像画布的底色，而物体结构需要方向性光源（如 DirectionalLight）来刻画。

💡 前端福音！Trae × Blender-MCP终极融合，3D建模从此告别"手残党"我用Trae 做了一个有意思的Agent 「AI 3D建模-加强版」。点击 s.trae.com.cn/a/c8c7fb 立即复刻，一起来玩吧！

Three.js中WebGLRenderer渲染源码解析Three.js是目前最流行的web端的三维框架之一，笔者作为对计算机图形学兴趣浓厚的前端程序员，web3D的开发者，阅读Three.js源码是提升技术、加深理解非常好的手段。Three.js经过多年发展，已经是一个功能非常庞大完善的框架了，那么，从何开始呢？笔者认为当然应该是从WebGLRenderer开始。WebGLRenderer是 Three.js 基于 WebGL 技术实现的渲染器，是最核心的组件。本文将从WebGLRenderer类的render方法入手，解析WebGLRenderer渲染的运

Three.js 动态加载 GLTF 模型：高效加载和渲染复杂的 3D 模型在数字世界的魔法城堡里，Three.js 就是那位手持魔杖的魔法师，它能将冰冷的代码化作栩栩如生的 3D 场景。而 GLTF 模型，就像是城堡里的神秘宝藏，承载着各种复杂而精美的 3D 模型。今天，我们就来学习如何让 Three.js 这位魔法师，优雅且高效地打开 GLTF 宝藏的大门，将里面的 3D 模型动态加载并呈现在我们眼前。

小桥风满袖

Three.js-硬要自学系列29之专项学习透明贴图核心作用：像「镂空剪纸」一样控制物体哪些部位透明/不透明（想象：给树叶模型贴图，透明部分让树叶边缘自然消失而非方形边缘）

从 0 开始学习 Three.js（2）😁在上一篇文章中，我们学习了 Three.js 的基础概念，包括场景、相机、几何体、材质、网格和渲染器。这篇文章我们将深入讲解对象的变换（Transform）和动画（Animation），并结合代码示例帮助你更好地理解这些核心概念。

Three.js 力导向图：让数据跳起优雅的华尔兹在数据可视化的奇妙世界里，力导向图就像是一场永不停歇的盛大舞会。每个数据节点都是舞池中的舞者，它们遵循着物理法则，相互吸引又彼此排斥，在三维空间中演绎出令人着迷的动态画面。今天，我们就借助 Three.js 这个强大的舞台搭建工具，一起打造这场数据的盛宴。

Three.js 物理引擎：给你的 3D 世界装上 “牛顿之魂”想象一下，你精心搭建的 3D 虚拟世界里，物体却像被施了 “定身咒”，无论怎么碰撞、推搡都纹丝不动，是不是感觉像在看一场没有烟火的庆典，少了点灵魂？别担心，Three.js 物理引擎就是来拯救这场 “尴尬” 的超级英雄，它能让你的虚拟世界瞬间变得鲜活，遵循现实世界的物理规律，上演一场场精彩绝伦的动态大戏。

从0开始学习three.js(1)😁最近也是找到暑假实习了，可以不用天天背八股了，开始学点新的技术吧。Three.js 是一个基于 WebGL 的轻量级 3D 图形库，它简化了在网页中创建和展示 3D 对象的过程。通过 Three.js，开发者可以轻松地将 3D 模型、动画、光照等复杂效果集成到网页应用中。

Three.js 粒子系统：让代码化身奇幻造梦师在数字艺术的奇幻森林里，Three.js 就是那位手持魔法棒的精灵。它轻轻一挥，就能让冰冷的代码绽放出绚丽的视觉烟火。今天，我们要探索的魔法咒语，就是 Three.js 中最具创造力的工具之一 —— 粒子系统（Particle Systems）。它就像是数字世界里的微观宇宙工厂，能将无数个微小的粒子，编织成壮观的星云、流动的瀑布，甚至是神秘的魔法迷雾。

Three.js 形变动画（Morph Target Animation）：让 3D 模型跳起变形之舞在 Three.js 的 3D 数字王国里，每一个模型都是一位独特的居民。它们或静默伫立，或轻盈旋转，而今天，我们要赋予这些模型一种神奇的能力 —— 形变动画（Morph Target Animation），让它们能够像拥有魔法一般，在瞬间变换形态，上演一场场精彩绝伦的变形秀。

Three.js 中实现带宽度的线在使用 Three.js 进行 3D 场景开发时，常常会遇到绘制具有一定宽度线条的需求。然而，Three.js 中默认使用的 THREE.Line、THREE.LineSegments 等类是基于 WebGL 原生的 gl.LINE_STRIP 或 gl.LINES 进行绘制的。受 WebGL 的限制，无论设置多大的 linewidth，最终呈现出来的线宽往往固定为 1 像素。下面将详细介绍解决这一问题的两种常用方法。