--- theme: cyanosis --- # 用 Three.js 写了一个《我的世界》，结果老外差点给我众筹做游戏？ ![logo.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8831f3b8f2ae46a0bd247e403b99f77c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=J8yYyA2EWLt4bAgSLDwdbpJOd3I%3D) ## 0.失踪人员回归？注意看，这个男人叫小帅，他莫名其妙地躺在你的关注列表里。 “爷爷，你关注的掘友更新了！！！” 距离上一次发文已经接近两个月。这段时间里，在群友们持续不断的催更下，我一边理直气壮地鸽着，一边反复安慰自己：一转眼年都过完了，文章却一笔没动。\ 看着粉丝数慢慢上涨，再看看那个依然空白的文档，说不慌那肯定是假的。不行啊老何！你当初的目标是什么？——~~攒够粉丝圈米~~，咳咳。 **把 WEB3D 带出小圈子，推到更多人面前！**

## 1. 为什么要做这个项目？ > 路人：诶，老何。之前文章你不是说不再出游戏了吗？ > > 老何：2025 年老何说的话，关 2026 年的老何什么事？随着各家旗舰模型的军备竞赛不断升级—— Gemini 3.1 Pro、GPT 5.4、Claude 4.6 opus 等模型已经能够很好地处理常规前端任务。传统的前端 benchmark 开始逐渐失去区分度，于是评测者把目光转向了 **Web3D 与复杂前端动画**，把它们当作新的能力试金石。在 Twitter 上，你大概经常能看到这种内容： > “我让 AI 写了一个 Minecraft clone。” 然后评论区就会开始出现熟悉的言论： **Frontend is cooked.** **前端已死。** ![01\_new.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8ec4a043eb64441392a344ee850b22f3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=aSxJPdxbSgVpggquKpcvLBrtTuA%3D) 老实说，《我的世界》是我初高中最喜欢的游戏，陪我度过了非常艰难的时光；而 `Three.js` 则是我工作后最热爱的技术方向。在我看来，这些 `Demo` 既没有真正的技术深度，也谈不上视觉表现力。但它们却常被拿来作为“**前端已死**”的论据。先不论第一人称的 `Minecraft` 风格体素引擎早在几年前就有开源实现，现在 AI 构建的所谓逻辑 (单从以上构建的作品来看)，更多还是简单的代码搬运。在下一次旗舰模型迭代前，没有的功能依然出不来，缺乏真正的创新；更致命的是，目前 AI 直接生成的画面实在差强人意，很难称得上“好看”。我很好奇：**纯 AI vibe coding** 和 **Three.js 高级开发者 + AI 辅助**在 `Web3D` 领域到底能拉开多大的差距。于是这个项目诞生了。 **Third-Person-MC** ## 2. 项目全貌(源码) > 多图警告⚠️，以下章节会出现大量 GIF 以及图片，注意自己流量哦这个项目其实是一个完整的 **第三人称 Minecraft 风格沙盒原型**，包含： * 完整菜单系统 * 第三人称角色控制 * 相机系统 * 昼夜循环 * 挖掘与放置 * 敌人系统 * 程序化地形 * 多生态系统接下来简单介绍几个核心部分。 ### 2.1 游戏前厅：完善的菜单与配置系统游戏启动后会进入一个完整的 **主菜单界面**。这里包括： * 皮肤选择 * 游戏设置 * 新手说明其中 **皮肤选择器** 是一个独立的 Three.js 场景，用来实时预览角色模型与光照效果。玩家切换皮肤时，材质会即时更新。游戏配置则通过 **Pinia** 统一管理，例如： * 渲染距离 * 鼠标灵敏度 * 画面参数修改后通过 **mitt 事件总线** 实时同步到 Three.js 渲染系统。 | 主菜单 | 玩法说明 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![02.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8011b01307aa4c26919bd56a8ee8e4df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=f%2FNbzT7oGvWK1ayTbSsQOCKV2rc%3D) | ![02-2.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6f14f6ffcf274d88a8278e09fa35e7ea~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=bSKELKbn6lcHRgknMxURy4Fn2SA%3D) | | **皮肤选择器** | **设置菜单** | | ![02-3.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/70ec8bf65a4c456ba7ee2f9b6747d387~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=dxHzAglFT1ggrToBidHQV59w%2Bac%3D) | ![02-04.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/220f99fab43e48f49133c9f9190f2a32~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=0R5R%2BHBuQ65YfyOZ63I46A91KIM%3D) | ### 2.2 第三人称角色控制为了在 Web 端提供媲美原生端游的操控手感，项目打造了完善的第三人称八向移动系统。根据移动状态自动切换姿态，走路、奔跑、跳跃，动作连贯自然。无论你想仔细游览还是急速赶路，移动的快慢都能完美匹配你的心意，当你想快速穿梭在这片广阔天地时，只需按下 `Shift` 键，角色便会瞬间提速，进入敏捷的**全力奔跑**状态；如果遇到危险的边缘或需要小心翼翼穿过的狭窄通道，按下 `V` 键，角色就会压低身姿，以最慢的速率**悄悄蹲行**。不同的姿态有着完全不同的移动效率。你完全不必担心角色的动作看起来生硬或像是一个木偶。无论你是从静止突然起跑、在狂奔中纵身一跃，还是从半空中稳稳落地，角色的所有动作都会在后台进行自动混合与无缝联动。没有突兀的闪烁与卡顿，起步时的加速、停下时的缓冲，一切动作的切换都如同真实世界里的惯性一样自然柔和。 | 行走状态 | 奔跑状态 | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![八向移动-走路.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/332a59cfd59e4e68b84eedb7fc155061~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=hkiLE7667%2Famivg9iCLtGyl1Fq0%3D) | ![八向移动-奔跑.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9f95b798f8ed434993619d6059f02d21~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=sHF3wgktW0yz2aX7HrNh%2BdFQpww%3D) | | **潜行状态** | **状态丝滑过度** | | ![八向移动-潜行.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2cd447b12b4e47caa822746ca205248b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=ioii%2BPKkJ5kLuwxN280JOJ1S3z8%3D) | ![八向移动-状态.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dc807295e2114ef6b4a2c9f0b732bc6d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=VHR1KbJFsimOIMko6fzbNOOR7GM%3D) | ### 2.3 第三人称相机相机系统支持多种视角模式： * 越肩视角 * 背身视角 * 望远视角同时实现了两个关键功能： **1 相机碰撞检测** 防止相机被地形方块遮挡。 **2 地形自适应** 当玩家靠近墙体或山体时，相机会自动调整距离。 | 左侧越肩(Q键) | 右侧越肩(E键) | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![左侧越肩.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97a3b39425584a4695f01bb69bcd685a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=Thzy1ffGJbikpA%2BpXv6xuTWNm%2FE%3D) | ![右侧越肩.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9dbd80177c6a42ee9991d57c280f092f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=EScipBSg2%2F5px6bHDDDilB3HlYU%3D) | | **背身视角( \~ 键)** | **地形自适应** | | ![背身视角.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9737e1a5194f4bccb63ea95fd8409134~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=32SG6hJFhyfM7Viw3PEzsDosCRI%3D) | ![地形适应.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e079eb6411484d948dce888ff70191a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=j9BDdUiFh1Ow%2BVncI5Qj4IX8xtM%3D) | 所有参数都可以在 **调试面板实时修改**，方便二次开发。 ![相机配置.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/63c408ca5f4342b79c1f8ca76cd95a20~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=Fbhc4c1qJg%2B9RKhFjp5e7xEIAZc%3D) ### 2.4 昼夜循环与环境系统 > 绷不住了掘金能不能把视频上传修一下，这 15 MB画质压缩成啥了在上述演示片段中您可能已经注意到了这一点，画面中的背景似乎在发生变化。没错，在此项目中我加入了昼夜系统，每一轮昼夜和 Minecraft 游戏中的昼夜时长一致，随着时间流逝，周遭雾气&阳光都会发生变化。是的，游戏里的一天并不只是黑白交替，而是被精心切分成了**午夜、日出、早晨、正午、下午、日落、黄昏 7 个不同氛围的时段**。随着时间推移，系统会自动在这 7 个阶段中平滑过渡。当然了好看的天空还不够，整个世界的环境必须跟着走。太阳光会东升西落，光线从清晨的暖黄变成正午的炽白；到了夜晚，幽蓝的月光会自动亮起。不仅如此，就连远处的**环境雾气也会跟着天空变色**——比如日落时会有粉红色的雾，深夜则是深邃的黑雾以及周遭会出现萤火虫。 ![昼夜轮询.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/07ddea769e774517be87f884c4316d04~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=WG5juB4B3Yi5%2B1uDLe8tX5JkhyE%3D) ### 2.5 挖掘与放置既然是 Minecraft style 的沙盒游戏，当然少不了传统的挖掘与放置啦！在游戏中，玩家可以通过屏幕中心的准星，自由地改造整个方块世界。整个交互过程非常自然且直观，主要分为三个步骤： * 游戏会时刻追踪你准星看向的位置。当你靠近并看向某个方块时，系统立刻就能识别出你盯住的是哪一块、甚至是方块的哪一个面，并在该方块上显示高亮边框。 * 想要开采资源或清理地形？对准方块**长按鼠标左键**即可。为了还原真实的劳作感，挖掘并不是瞬间完成的，而是会在准星处伴随一个“进度环”。只有你保持准星不移开并按住鼠标直到进度读满，方块才会被敲碎。如果中途松手或视线移开，挖掘动作就会被打断。 * 建造同样简单。你只需要在屏幕下方的快捷栏中选中想要的方块，对准已有方块的表面**点击鼠标右键**，新方块就会顺理成章地“贴”在那个表面上。每次放置都会实时扣除你背包快捷栏中的库存数量。 | 挖掘系统 | 放置系统 | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![挖掘2.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4368eb3024414e9ab5936d008421bbbe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=1cvU%2B2ui8dpC6UlZVQHn0FgsnUA%3D) | ![放置.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/991a25b947464241b53cf4c192e758e7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=bSlAwkKklCjQZVb7QkNzw2cP1pw%3D) | ### 2.6 敌人与战斗如果只是挖挖东西，探索一个无尽的开放世界，似乎上述各系统已经足够支持这个项目进行游玩，但我并不是和平模式的狂热爱好者，所以—— 当夕阳沉入地平线，这个广阔的方块世界就不再绝对安全。我在游戏中引入了基础的敌人系统——随着午夜降临，**潜伏在黑暗中的僵尸就会悄然现身**。当它们逼近时，你甚至能从屏幕视觉上感受到那种心跳加速的“压迫感”。你必须利用灵活的跑位、借助你搭建的地形来保护自己，捱过漫漫长夜。 | 僵尸游荡 | 僵尸追逐 | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![僵尸游荡.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f5d039f7a82a4f0086e423e2e78720c0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=hYGGB4w1vrgtXt7%2BImDtFGK70GI%3D) | ![僵尸追逐.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/24810f29a92448f2b8215bfb49954535~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=bluoTrsQw%2FMRotzuZ5IhxH27lcY%3D) | | **战斗系统** | **僵尸消失** | | ![战斗系统.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1e920f31d98445ab89db4e9f80e704f4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=TQqs%2BkVNuYbN6rKRZu957TJ6ap4%3D) | ![僵尸消失.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4c37351cdd184fb19e7056a565dad972~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=0xw79WvKErbL8%2B00nYwwRTMMbeE%3D) | 敌人系统在这个项目中没有设置的特别难，它们只会在距离你不远不近的暗处悄悄出现，给你留出充足的反应和应对时间。系统最多只会允许少数几只僵尸在你的周围游荡，它们会每隔几秒钟接连出现，保持着持续但可控的压迫感。如果你觉得夜晚的野外太危险，大可以直接跑开。只要你拉开了足够的距离，或者硬挺到了黎明破晓、白天到来，那些追逐你的僵尸就会自发地消散在空气中。当然本项目为了方便大家在此基础上二开将**体素物理碰撞引擎**和**敌人实体管理**逻辑抽离并构建了单独的类组件。如果您后续向自己加入一些特别的怪物都可以很快将其集成到项目中 ![敌人.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d59eaf429ec4b60bbff790eba7c9491~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=tfdV%2FKGsr%2FzDuOyx0LMnQVpHPd4%3D) ### 2.7 地形 & 生态系统分区块和无尽地形应该是所有 Minecraft Style 构建的开放世界都实现的功能，有太多优秀的开源项目实现了这一点，但包括融合生态系统等功能。我没办法说我的实现方式最优秀或者最优雅。但应该会是最不会让你感到卡顿的方案。这也是后续我出系列文章时重点会解释的一部分。这篇介绍文还是让我们少聊一点技术话题，下面是地形和生态系统的介绍。 #### 生态系统关于生态系统，项目中构建了包含平原、白桦林、樱花树林、沙漠、恶地、冻洋等多种生态系统 | 平原 | 白桦木林 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![平原.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/54aa153757fe4e6c853cbcd8b0b980c7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=3L%2B%2FVcKS64ZvYs9mVQOSDD66%2BK0%3D) | ![白桦林.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d848b8f9eebe410280dfb2a96f54d5b4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=XPqBnpVD6HqpNTgNy8zWWbqo%2FOQ%3D) | | **樱花树林** | **沙漠** | | ![樱花林.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cf5102b34dfa4c2189f50378cd2e908f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=OU%2B43InGq6k828QqtEXIAl8pMfI%3D) | ![沙漠.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c837592115fd40b393f31db30ab249c2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=d5G4jUYVv%2FVpBlwAsPEHWKllF2o%3D) | | 恶地 | 冻洋 | | ![恶地.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/613cf0cddd8d4628a900b4b2faf5f230~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=1RhQ1Q1EPcIzTFaKIwNDY8PCU1A%3D) | ![冻洋.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9e8fa4befb4a4e6f926c92a4bf2eff74~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=DK0vJIz0amq2yyzqN0dUb9Mh4z0%3D) | | **森林** | **生态地形混合** | | ![森林.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4d2d9f7d766041c4a5a397257aaff3d8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=%2Fvj0%2BDhBV1vlylN%2BZH4CrgT9DWo%3D) | ![生态混合.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/75dea50ebef845bb9462afe898ec368c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=gvjcg2RELBv5LFy11NI%2Fo0q%2Bf8Y%3D) | #### 无尽地形 **地形生成** 本项目中关于地形的生成采用的是比较大众的 `SimplexNoise` + `FBM` + `PRNG` 方案。对于不那么理解的朋友在这里做简短介绍，后续文章针对这一章节会有详细的实现原理解析 * **RNG**在此处并不是皇族的简写，而是指 Random Number Generator。玩过我的世界都知道`seed`的概念，而在本项目中 RNG 就承担了原版 MC 世界中 `seed`的角色，不同与常规的Math.random， RNG 产出的结果虽然看起来随机，但在传入相同的值时，产出的结果却是可以复现的，正因为他的存在，只要你把世界的种子码分享给朋友，不管你们相隔多远，你们在这个世界里看到的每一座高山、每一条沟壑，都会长得一模一样。这也为后续可扩展 `ws` 联机留下可能。 * 而 **SimplexNoise + fbm** 构建的地形则显得更加真实，这里可以简单的理解为 **SimplexNoise** 负责的是粗略的山峰和山谷的构建，而 **fbm** 则负责在这个大体基础上构建更加真实的地理细节 * 最后，我同样在调控模式下增加了大量的可调控面板，方便您进行二次开发。 | seed 同地形复现 | fbm细节调控 | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ![PRNG.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1a504a5ec06742d5812d4335b3c87d1d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=gyXR11Ec%2F5dV%2FffVq%2BRi79ITNhs%3D) | ![fbm.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cf6d70c5401d4b7ea84c09da6eab9f30~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=jl9FHQ9aMnIyJEiY9mBD5oHxcuU%3D) | | **区块加载** | **丰富调控面板** | | ![区块.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2f7590b702fb48abb46d2b160357c6f3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=lunF5BJ8BRb50ytOhPQVY3FiJ0w%3D) | ![调控面板.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/943c49abbb0043e2bb8f60ce52df0559~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=qba0IF%2BbPB4jkpa7d%2BXiPzjJjyk%3D) | ### 2.8 源码地址 & 项目地址当然这个项目还有很多我没有提及的小细节，比如程序化生成树、成就系统、专属与这个项目的事件监控系统等。这里为了不占用篇幅就不在这里写了。熟悉我的老粉依旧知道这里是贴转发贴的环节。因为这个项目在开发过程中已经被很多官推和大佬们转发过，这里我就不一一贴出来了。

[PC端在线预览地址(需要魔法)](https://third-person-mc.vercel.app/): [DeBug 在线调试界面](https://third-person-mc.vercel.app/#debug): [Github 仓库地址](https://github.com/hexianWeb/Third-Person-MC): ## 3.事情开始变得离谱那么在介绍完所有的内容后，该回答一下标题了。目前看来这只是一个比较好的 `Three.js` 作品，那么目前来看与标题毫不相干啊？老何你也为了流量当起了标题党？让我们将时间调回到 2026 年 1 月底，当时处于项目初期，大部分时候都是在做 Demo 验证，并根据早期的`PRD.md`逐步进行功能开发与完善。在这期间收获了很多鼓励和认可，每次发帖都会被 `Three.js` 官推转发，与群友分享获得群友认可。刚好当时也是年尾没有什么工作，**正反馈拉满 + 空余时间** 结合，开发效率自然高的飞起。直到某一天早上。我像往常一样打开 Twitter。结果通知栏直接炸了。那条项目展示的推文，在短时间内获得了 **10 万+ 浏览**，还被很多我喜欢的博主转发。但真正让我懵的是一条评论： > 嘿，伙计，你知道有些人正在为你的项目进行众筹吗？ ![crowdfunding-01.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2a3121b0942b4f5eb8570e4c46ea21bb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=gmEUx%2FiHMGqJ7YWGXfXQB4qy%2BcU%3D) 我当时一脸问号。众筹？众筹什么？谁众筹？我吗？

接下来的十个小时里，评论区越来越离谱。很多人开始提醒我： > “有人真的在给这个项目众筹。” 甚至有人催我去 **claim 众筹页面**。 ![骗局.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2626116e70ba4abeb861f0df46821dab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=iavKYdlEpzwgB4nzIKEBzkozPAM%3D) 我该怎么办？我该在当下去用社交媒体 claim（声明）这个项目开始众筹吗？这么多人喜欢这个项目，我要做的不应该是顺应这个情怀市场？让更多的人加入进来，水涨船高然后发一笔横财？或许它能成为我的副业？毕竟我真的很讨厌打工？有机会干自己喜欢的事情这也太爽了吧！但想了一会儿之后，我还是做了一个决定： **不认领。** 因为这个项目从一开始就只是一个 **开源项目**。我也不想成为那种靠情怀众筹然后跑路的开发者。于是我在评论区反复解释：这个项目不会商业化，也不会正式进行众筹。它只会是一个开源项目，起码我认为这是一个好的归宿对于这个项目来说。 ## 4.质疑与警告 ### 质疑当然随着越来越多的人涌入评论区，逐渐就开始有一些不好的声音出现—— ![攻击言论.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5629f4abd0884a6396aeddac9b9119ff~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=56RIFeKnRfo%2F727KNN33CDSywOk%3D) 坦白的说，其实攻击力并不算是很强哈哈。但虽然还是少数，但这些话...确实刺痛。我其实就是一个普通的开源作者，群友也打趣的说黑红也是红。 ### 警告但真正让我担心的是评论区偶尔重复的两个词 `Eaglercraft` 以及 `DMCA`。后者我倒是有所耳闻，美国的数字版权法嘛！但是前者是什么？随后我就深入了解了一下：在 2021 年，Github 上曾经有一个非常火的项目：`Eaglercraft `。 **Eaglercraft** 是一个由社区开发的项目，核心特点是： * 将 **Minecraft Java Edition 1.5.2 / 1.8.8** * **反编译 → 修改 → 编译为 JavaScript / WebAssembly** * 使其 **可以直接在浏览器中运行** 这个项目很快在社区爆火。然后在 2022 年——**Microsoft 法务介入。** 以版权方身份提交 **DMCA 通知**。 ![eaglercraft.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59fc2521f7ec49429fa45312c7ac4862~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=0SSWZZeHEoBzyJYambjw0923zQA%3D) Github 仓库被直接下架。所有 fork 一并清理。目前代码是部署在俄罗斯的 `GitFlic`(就像中国的 `Gitee`)。 ![eaglercraft-01.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ea5129ea8fb546d6a0f31e8d38f37c6a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=aqwY9Tf%2F0rqdpylB6AlYpN%2Bmm2g%3D) 但我认为 `Eaglercraft` 被DMCA 的主要原因是因为 **Eaglercraft 分发了受版权保护的 Minecraft 客户端代码与资源，且未获 Mojang / Microsoft 授权** ## 5.项目终止我应该还好吧？我做的是粉丝向的网站，**我又不赚钱也没盈利，而且我也没有分发任何代码。怎么可能会有这种风险？** 但事实是没有做过研究，就不能妄下定论。随着越来越多的人提醒我潜在的 DMCA 风险，我还是认真的查看 Minecraft 官网的 `usage-guidelines`。要了老命了！看完之后我真的木讷得待在电脑桌前有十分钟。首先我阅读了个人使用规则： > *"如果您决定与社区分享您的作品，当然可以。事实上，我们非常期待看到您的成果。**当您决定与社区分享内容时（无论您是否计划从中获利），我们都将其视为商业行为**。进行商业活动时，您必须遵守商业用途准则。"* ![minecraft-guidelines-01.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/784bee2d11c0422aba366d0ea97f385b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=0muR1BOpyJHQUsrZkgpwxVH3MKw%3D) 只要公开发布，就算商业行为。好吧，看起来我应该遵守的是商业准则： ![minecraft-guidelines-02.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3d71b77854014918a97c3d8d53c7b9d3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5L2V6LSk:q75.awebp?rk3s=f64ab15b&x-expires=1773972921&x-signature=nXzR8el1wQY0IPjWPYIO87t7vb4%3D) ### 禁止事项 ❌ * ❌ 使用Minecraft Logo * ❌ 使用官方美术素材 * ❌ 使用看起来像官方Logo的字体 * ❌ 模仿品牌样式几乎全踩了。此时我的心里有一万头草泥马奔腾而过，为什么不早一点做相关研究呢？为啥直接就开写这个项目了？**这本是一场如果在初期只花大概20分钟就能规避的窘境，但如今只能看最后这个项目在官方眼里到底是否该被DMCA。**总之，这个项目目前真的是**听天由命**了。**无奈、遗憾** —— 两个月的心血... 于是我做了一个决定： **停止继续开发。** 目前这个项目只保留为一个技术 Demo，最低限度完成部分功能并且。。。不会再继续扩展功能。 ## 6.再会我觉得现在可能是个人开发者 **机会最多的时代之一**。 AI 工具爆发、数字资产越来越容易获取，技术实现的门槛确实在快速下降。很多以前需要团队才能完成的事情，现在一个人加上一些 `AI` 工具，也许几天就能做出一个`Demo`。但这次项目也让我意识到： **技术门槛的降低，伴随的新的门槛的出现。** 两个月的心血因为版权红线被迫中止，多少会有些遗憾。但如果我的这“翻车”经历，能让后来者在开始项目之前多花二十分钟查一下版权规则，或者让 `skills` 市场推出类似的技能，甚至大模型厂商内部增加版权限制。那么这篇文章大概就已经有价值了。至少它让我学到了很多东西—— 不仅是技术，还有那些以前从没认真考虑过的事情。而且说到底，开发本来就是一条很长的路。项目会结束，但开发者不会。 **我还会继续做下去。** 因为我始终相信： **我最好的作品，永远会是下一个。** ## 7. 还有一些话 ### 重要的事情说三遍 **不建议用 Three.js 做游戏** **不建议用 Three.js 做游戏** **真的不建议用 Three.js 做游戏** 在这里先叠个甲，这不是在说`Three.js`有什么不好，也没有贬低正在使用 `Three.js`做游戏的任何人。恰恰相反—— 我非常喜欢 `Three.js`，而我的另一个项目 [CubeCity(Three.js Game)](https://github.com/hexianWeb/CubeCity) 已经获取了 `1K+ star` 了。我非常了解`Three.js`的能力。但正因为如此，我才想非常真诚的想提一嘴： **Three.js 是一个 3D 渲染库，而不是游戏引擎** 即使现在 `Three.js` 在逐步增加 `WebGPU(WIP)`的支持，即使随着 `WebTransport` 等技术的出现，一些过去`WebSocket`的网络瓶颈再被慢慢解决。但本质上，它依然只是一个图形渲染库，有着太多的事情需要你自己做。 Threejs 做游戏不是不能做，而是代价非常高。 ### 本专栏的愿景本专栏的愿景是通过分享 `Three.js` 的中高级应用和实战技巧，帮助开发者更好地将 `3D` 技术应用到实际项目中，打造令人印象深刻的 `Hero Section`。我们希望通过本专栏的内容，能够激发开发者的创造力，推动 `Web3D` 技术的普及和应用。 ### 加入社区，共同成长如果您对 `Threejs` 这个 `3D` 图像框架很感兴趣，或者您也深信未来国内会涌现越来越多 `3D` 设计风格的网站，欢迎加入 **[ice 图形学社区](https://link.juejin.cn?target=https%3A%2F%2Ficegl.cn%2F "https://icegl.cn/")**。这里是国内 Web 图形学最全的知识库，致力于打造一个全新的图形学生态体系！您可以在认证达人里找到我这个 `Threejs` 爱好者和其他大佬。此外，如果您很喜欢 `Threejs `又在烦恼其原生开发的繁琐，那么我诚邀您尝试 **[Tresjs](https://link.juejin.cn?target=https%3A%2F%2Ftresjs.org%2F "https://tresjs.org/")** 和 **[TvTjs](https://link.juejin.cn?target=https%3A%2F%2Fdocs.icegl.cn%2F "https://docs.icegl.cn/")**, 他们都是基于 `Vue` 的 `Threejs` 框架。 **[TvTjs](https://link.juejin.cn?target=https%3A%2F%2Fdocs.icegl.cn%2F "https://docs.icegl.cn/")** 也为您提供了大量的可使用案例，并且拥有较为活跃的开发社区，在这里你能碰到志同道合的朋友一起做开源！ ## 8. 往期回顾《[🎮 前端也能造城市？源码公开：那个被外网 2.7 万人围观的 Three.js 小游戏](https://juejin.cn/post/7538715423534399534 "https://juejin.cn/post/7538715423534399534")》《[😲我又写出了被 Three.js 官推转发的项目？！🥳🥳(源码分享)](https://juejin.cn/post/7509880859307835433 "https://juejin.cn/post/7509880859307835433")》《[😮😮😮 我写出了被 Threejs 官推转发的项目🚀✨？！](https://juejin.cn/post/7498914140166799397 "https://juejin.cn/post/7498914140166799397")》