《赛博城寨》 三维空间笔记系统

大家好，欢迎使用《赛博城寨》，这是个使用 WebGL 开发的概念性程序，体积很小，只有 40kb 左右，用于辅助记录文字。

这是个开放世界，里面有 1 万个大小不一的立方体，使用伪随机数生成。每个立方体的面，我们都可以使用鼠标左键选中（需要靠近方块），然后输入我们想展示在上面的字句。我们可以读取、保存存档。

单击此处加载示例存档，开始探索这个开放世界吧！

按键如下：

  • W / A / S / D：控制角色前后左右移动。
  • 空格 或 E：跳跃，连续点按为飞翔（推荐使用 E 键）。
  • Q 或 Shift：按住以逐渐加速行走（推荐使用 Q 键）。
  • F：冻结视角，让您悬停在空中，以便细致观察。
  • I：瞬间将您传送至 150 米的高空，俯瞰全景。

详细功能介绍

编辑模式

我们靠近方块的面后，单击左键进入第一视角，待圆点出现色环后，单击左键进入编辑模式。

  1. 文本偏移：第一行，是偏移。因为有很多方块的左侧、上侧、右侧被遮挡，所以需要偏移。偏移范围是 0~1，如偏移一半大小就是 0.5。
  2. 文本输入框：在此处输入您的笔记内容。我们支持简单的颜色标记：
    • # + 空格：后续文字变为蓝色。
    • % + 空格：后续文字变为红色。
    • @ + 空格：后续文字恢复为默认的白色。
  3. 辅助工具栏：这里有一系列按钮，其中一个名为【数字行号辅】的功能可能稍显特别。它的作用是帮助您估算当前方块表面大致可以容纳多少行文字，这在判断一些难以触及的方块顶部空间时尤其有用。
  4. 数据恢复：第四块是【从浏览器中恢复】功能。您的每一次操作都会实时备份到浏览器的 localStorage 中，以防意外丢失。

仪表盘解读 (左下角)

  • FPS / 渲染：分别代表实时帧率和渲染每帧所需的毫秒数。此数值因设备配置而异。
  • 速度 / 位置：大致估算您当前移动的速度，以及在三维世界中的精确坐标。
  • 当前模型数：此为开发调试信息。闪电代表理论上视野内的模型数；can 为被赋予物理属性的物体数；w 是实际渲染的模型数；其后数字是已从存档载入的模型数。纹理则显示当前已绘制的纹理数量。
  • 区域坐标：例如【东1南1】，这是一个方便您定位的坐标系统。以世界中心 (0,0,0) 为原点，向东 100 米、再向南 100 米的区域即为【东1南1】。整个城寨被划分为 100 个这样的方格区域。

城市命名与区块划分

您会注意到，屏幕顶端会显示如【福建漳州】、【广东深圳】之类的城市名称。我们选取了中国 GDP 排名靠前的 100 个城市，并根据它们的地理方位，为城寨中的 100 个区块进行了命名，让每个板块都拥有一个独特的名字。

详细的城市分布如下，以便于您记忆和定位：

  1. 乌鲁木齐 鄂尔多斯 包头 呼和浩特 北京 廊坊 唐山 沈阳 长春 哈尔滨
  2. 榆林 太原 石家庄 保定 沧州 天津 东营 烟台 大连 威海
  3. 兰州 新乡 邯郸 德州 济宁 济南 泰安 淄博 潍坊 青岛
  4. 西安 洛阳 郑州 周口 菏泽 徐州 宿迁 临沂 淮安 连云港
  5. 襄阳 南阳 阜阳 滁州 南京 扬州 镇江 泰州 盐城 南通
  6. 绵阳 宜昌 合肥 芜湖 常州 湖州 无锡 苏州 嘉兴 上海
  7. 成都 重庆 常德 岳阳 武汉 九江 金华 杭州 绍兴 宁波
  8. 宜宾 遵义 衡阳 长沙 株洲 宜春 南昌 上饶 温州 台州
  9. 昆明 曲靖 贵阳 广州 赣州 漳州 厦门 泉州 福州 宁德
  10. 南宁 湛江 茂名 江门 佛山 中山 珠海 东莞 深圳 惠州

开发初衷

一次笔记维度的探索
第一个原因，是一种尝试。记笔记，有一维的 txt 记事本、 typecho 、Word 诸如此类。有二维的 xmind 思维导图、无边记、notepad等等。那笔记可以记成三维的吗？应该可以，人脑更喜欢三维的空间嘛。为了让体积尽可能的小，使用伪随机数生成了 1 万个方块供大家写字。应该可以写一辈子吧。

一次原生 WebGL 的实践
第二个原因，也是练习一下自己的 webgl 制作。这个程序没有使用 threeJS 这里框架，直接使用的 webgl 原生。体积尽可能的小。

如何获取本程序？

理论上，您只需在浏览器中按下 Ctrl + S 即可保存网页。但请注意，由于程序采用了模块化开发，必须在 HTTP 环境下（例如通过本地服务器）才能正常启动。

关于框架

本程序基于自研的 openworld.js 框架构建。如果您对此感兴趣，欢迎访问我们的 GitHub 仓库：https://github.com/kohunglee/openworld-js，希望能送给我们一个 Star 以示鼓励，感激不尽！

openworld.js 的未来目标是致力于简化三维开放世界的开发流程，以极小的体积实现高质量的在线虚拟展览馆、在线三维漫游、三维重建和建筑设计等应用。（www.ccgxk.com）