「开放世界区」浏览器三维世界项目，一个临时小 demo，多建筑 LOD 机制
时间：2025-12-29 19:40 作者：独元殇 分类： WebGL
我的这个三维小项目，其实一直有在更新，我上个月为其命名为 Open World Zone，也就是「开放世界区」。
目前有三个方向的优化：内容的填充、多模型管理、性能的优化。
这次是一个 多模型的管理的 demo ，我单独抽离出来了，因为其他两部分还没完善：
（最新的 demo ，能根据主角的位置，来切换不同的模型。）
https://ow.ccgxk.com/demo/dev001/
我内心想把它给搞成一个无限大的三维世界。
想象这个场景：
- 浏览器一进入，根本没有加载时间，马上就打开了。极速！
- 低配置电脑，也用的很得劲，非常流畅。
- 能多人在线
- 自由度还可以
- 世界让人非常有探索欲
甚至里面能放置自己的笔记和图片等等，建造自己的模型，然后上传到这个共享世界。一个极度轻量级、高性能的共享世界。
多么好啊。
其实，模型的搭建简单的不得了了。但是我一共里面只有 100 万个模型档案的储存容量、电脑 5 万模型的流畅阈值，怎么能让它按需加载，按需删除，又不超过这个阈值，还真没想象中容易。
就像电脑机械硬盘，就是一个大光盘，一条线。怎么能存 3G ，删除 5G，又进去 200MB 又删除 1.5G ，能进行的秩序井然。
我足足换了好几个方案。
最终留下了这个万数块方案（详情请阅读代码）。
过程不详细讲了。但，这个看起来很简单的机制，真的难住了 Gemini 和 我。整整搞了一个多月，12 月中旬，才算像回事。
这个 demo 很简单。里面有 4000 个图书馆建筑。（现在我可以自信的说，理论上能完美管理无穷无尽的模型了）
- 当你进入建筑内部，内部桌椅才加载（到时候，会有影壁墙等遮住，感觉好像一直都有）
- 离开建筑一段距离，会变成粉红色（到时候，就是一个更少模型的简易外墙）
- 再离开建筑更远距离，整个建筑，抽象为一个独立的方块（我称其为天际线）
目前就是这个样子。
别失望，我觉得，这个痛点早日优化比较好。
现在我给我的 openworld.js 设计了个 logo ：
其 SVG 全文为：
<svg style="width:500px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- 2. 身体与头部 (小白狗) -->
<circle cx="100" cy="85" r="50" fill="white" stroke="#222" stroke-width="4"/>
<!-- 3. 耳朵 (耷拉着，看起来憨厚) -->
<ellipse cx="45" cy="85" rx="15" ry="25" transform="rotate(20 50 85)" fill="white" stroke="#222" stroke-width="4"/>
<ellipse cx="155" cy="85" rx="15" ry="25" transform="rotate(-20 150 85)" fill="white" stroke="#222" stroke-width="4"/>
<!-- 4. 表情 (呆萌) -->
<circle cx="85" cy="80" r="5" fill="#222"/> <!-- 左眼 -->
<circle cx="115" cy="80" r="5" fill="#222"/> <!-- 右眼 -->
<ellipse cx="100" cy="90" rx="6" ry="4" fill="#222"/> <!-- 鼻子 -->
<path d="M90 100 Q100 110 110 100" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round"/> <!-- 嘴巴 -->
<circle cx="75" cy="95" r="6" fill="#FFB6C1" opacity="0.6"/> <!-- 腮红 -->
<circle cx="125" cy="95" r="6" fill="#FFB6C1" opacity="0.6"/>
<!-- 5. 皇冠 (King) -->
<path d="M75 50 L75 35 L87 45 L100 30 L113 45 L125 35 L125 50 Z" fill="#FFD700" stroke="#222" stroke-width="3" transform="translate(0, -5)"/>
<!-- 文字 -->
<text x="100" y="170" font-family="Arial, sans-serif" font-weight="bold" font-size="14" text-anchor="middle" fill="#222">OPENWORLD.JS</text>
</svg>png 是 ：
