Three.js

一个基于光线追踪的黑洞落地页英雄区：物理原理与捷径

作者使用 Three.js 实现了一个真实的黑洞渲染效果，展示了光线追踪和物理模拟的细节。该效果在滚动时会实时反应相机移动，适合学习高级渲染技术。

作者详细介绍了如何使用 Three.js 实现一个真实的黑洞渲染效果，适合学习高级渲染技巧。

尝试打造一个获奖极简主义作品集：过程、心态与工具

作者分享了如何使用Three.js构建极简主义作品集的过程，强调了心态调整和合适工具的重要性。

我创建了一个 3D 工具来观察 AI 如何理解单词 - WordCanvas3D

作者创建了 WordCanvas3D，一个交互式 3D 工具，让用户直观理解 AI 如何处理文本。用户可以探索单词之间的关系，观察模型如何读取句子，并尝试自己的数学方程。该工具免费、开源，可在浏览器中运行。

我构建了一个3D虚拟世界的基底层 —— 在其上构建3D世界或元宇宙能让你事半功倍

作者构建了一个3D虚拟世界的基底层，支持多人世界、AI角色、跨世界通信等功能。详细介绍了性能优化和功能实现，适用于开发者参考。

作者分享了构建3D虚拟世界的基底层，提供了详细的性能优化和功能实现，适合开发者参考。

CHROMA VIVA 002 — 一个基于 Three.js 的互动色彩研究

CHROMA VIVA 002 是一个使用 Three.js、WebGL 和自定义着色器构建的互动艺术作品，探索色彩通过移动如何融合、分离和变化。用户可以通过拖动鼠标或手指来搅拌色彩流动，或静观自动手势在场景中的变化。作品配有音效。

In the Walls of Eryx — 一款基于 Three.js 的科幻恐怖游戏

In the Walls of Eryx 是一款基于 Three.js 的第一人称科幻恐怖游戏，无需下载即可在桌面或移动设备上即时游玩。游戏包含看不见的迷宫、耗尽的氧气、有限的火焰手枪和监视者等元素，营造沉浸式体验。

Roadarium：在浏览器中驾驶119座真实城市的驾驶模拟器

Roadarium 是一个基于 three.js 的浏览器驾驶模拟器，包含119座真实城市，如伦敦、纽约、巴黎等，支持左行和右行交通规则。该模拟器旨在帮助新手司机学习，错误时会显示错误原因并提供回放。无需安装，可在桌面和手机上运行。

vitest-browser-three：Vitest 浏览器模式下 Three.js TSL 表达式的 GPU 原生断言

作者 linbingquan 发布了一个名为 vitest-browser-three 的插件，可以在 Vitest 浏览器模式下为 Three.js TSL 表达式添加 GPU 原生断言。断言编译为 GPU 计算着色器，结果读回 CPU。项目已发布在 npm 和 GitHub。

我用 Electron、React 和 Three.js 制作了一个显示实时空气质量指数和 IMD 数据的 3D 天气小部件

作者利用 Electron、React 和 Three.js 制作了一个小型 3D 天气小部件，实时显示空气质量指数和 IMD 数据，安装在桌面上作为天气检查工具。

NUCLUME：从单个原子到照亮城市的3D互动之旅

作者使用 Three.js、React Three Fiber 和 Next.js 创作了一个开放源代码的3D互动体验，从铀-235原子核到核能转化为电能的过程。用户可以触发裂变、探索反应堆组件、进入控制室并导航城市。

一个月打造个人3D作品集

作者花费一个月时间提升3D技能并构建个人作品集，现已完成并可供体验。请在评论区分享您的看法。

非程序员如何用Claude构建30,000个地块的3D城市

作者使用Claude构建了一个包含30,000个地块的3D城市，分享了过程中遇到的技术问题及解决方案，如阴影问题、性能优化等。

Abhay Rohit — 一个使用 Three.js 构建的互动个人作品集

Abhay Rohit 是一名来自印度的创意产品工程师，他使用 Three.js 构建了一个互动个人作品集，展示了精选的产品作品和浏览器体验，并配有案例研究解释其贡献和设计决策。该作品集的首页通过滚动展示互动场景，包括 Haspr 工作室章节和 Khajuraho 浏览器之旅。

Hummingbird：一款水彩风格的互动艺术作品

Hummingbird 是一款使用 Three.js 和 WebGL 制作的互动艺术作品，灵感来源于水彩画中的 hummingbird，可旋转视角观察其翅膀振动。作品可通过拖动旋转视角，音乐可通过点击 Sound 开关控制。尝试这里：[链接]。

Uno UI：支持 Three.js 和 WebGPU 的 UI 系统，兼容 React、Vue 和 Solid.js

Uno UI 是一个用于 Three.js 和其他 WebGPU 渲染引擎的高性能 UI 系统，支持独立使用和与 React、Vue、Solid.js 结合。它实现像素级精准的 UI 渲染，包括高质量的 MTSDF 文字渲染和准确的布局测量。

免费 sound effects 库：1150 种音效供 three.js 游戏使用

DailySounds 提供 1150 种免费 sound effects，涵盖 UI 点击、金币、武器、环境音效等，支持商业项目使用，无需注册和下载限制。每种音效均可在线预览并直接下载 MP3 文件。

Ispettore，一款用于调试 WebGL 和 WebGPU 网站的 Chrome 扩展

Ispettore 是一款用于调试 WebGL 和 WebGPU 网站的 Chrome 扩展，灵感来源于 Renderdoc 的管线可视化和帧栏设计。该扩展支持过滤对象和材质的 drawcall，并已集成到 Three.js 场景中。这是首个公开版本，欢迎反馈。

Sundial：WebGPURenderer 的虚拟太阳阴影插件

Sundial 是一个适用于 one directional light 的虚拟阴影映射插件，支持 WebGPURenderer。作者提供了安装方式和性能对比，适用于 three.js 项目。

提供了安装方式和性能对比，读者可以据此判断是否值得在项目中使用。

three.js 中的模块化伦敦街道：插座、装配文件和 Meshopt 细节层次

作者分享了如何使用 three.js 构建模块化伦敦街道模型，每个房屋由多个 GLB 部件组成，通过装配文件管理细节层次，提供高、中、低三种细节版本，支持编辑和重复使用。

为什么沉重的 three.js 场景会影响 PageSpeed，而问题不在于 JavaScript

文章分析了 Three.js 场景在 PageSpeed 中表现不佳的原因，指出问题在于 GPU 等待和像素扫描，而非 JavaScript 代码。建议优化编译异步、预热程序等方法来改善性能。

Building Depth：在 Figma 中构建 3D 渲染器

作者 Aleksei Kipin 在设计产品网站时开发了 Depth，一个在 Figma 中的 3D 渲染器插件。该插件允许用户加载模型、调整相机和灯光，并将渲染结果直接返回到 Figma 中继续设计。文章详细描述了从原型到成品的开发过程，展示了如何通过交互体验来展示 3D 渲染效果。

Yestalgia: 通过趣味数字体验重现 Decathlon 的 90 年代精神

Yestalgia 通过艺术指导、互动设计、动画和创意开发，重现 Decathlon 的 90 年代风格。

Inside the First Three.js Conference in Paris

本次会议展示了Three.js在巴黎的首次亮相，来自世界各地的开发者齐聚一堂，共同探讨WebGL 3D技术的最新进展和应用。

光绘：使用 TSL 和 WebGPU 实现带体积的光照明线条

作者 Mathis Biabiany 详细介绍了如何使用 TSL 和 WebGPU 实现带体积的光照明线条，包括关键的几何参数计算、帧问题解决和动画实现方法。

文章详细介绍了如何使用 TSL 和 WebGPU 实现带体积的光照明线条，适合对 Three.js 和 WebGPU 深度渲染感兴趣的读者。

Halftone 效果的实现与探索

作者详细介绍了 halftone 效果的实现方法，包括基本的点阵图案、网格、颜色通道混合以及 CMYK 半色调等，适合对 Shader 和渲染感兴趣的开发者学习。

文章详细介绍了 halftone 效果的实现方法，适合对 Shader 和渲染感兴趣的开发者学习。