floorplan-3d 三语国际化实现：简繁英切换如何不用框架轻量搞定（附 OpenCC 用字表技巧）

【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d

floorplan-3d 是一个纯前端的户型装修设计工具，支持在 2D 平面图上摆家具、拆墙体，并一键切换 Three.js 3D 场景。它的顶栏提供「简 / 繁 / EN」三语一键切换，且完全不依赖任何国际化框架。本文将拆解这套无框架的三语国际化方案，并分享其中用 OpenCC 生成「用字表」实现简繁转换的实用技巧，帮助你快速在自己的项目里复刻。

1. 项目速览：一个 index.html 的装修工具

floorplan-3d 的全部代码只有一张 index.html（约 2600 行），无需构建，浏览器打开即用：

• 2D 平面布置：按 1:60 / 1:100 比例显示户型，拖拽 60 余种家具，可测量、拆改非承重墙
• 3D 场景：鸟瞰 / 第一人称漫游，日照滑块、夜景灯光
• 方案统计：房间面积、地面材料造价估算、导出 PNG / JSON

界面语言切换按钮就藏在顶栏右侧，选择会被记住（默认简体中文）。详见 README.md 的「方案与统计」一节。

上面这行不是图片——它指向的正是按钮源码位置。整个仓库没有图片资源，本文以源码定位代替截图。

2. 无框架三语切换的整体思路 🧩

没有 Vue i18n、没有 react-intl，floorplan-3d 只用三个约定就把简 / 繁 / 英三种语言跑通了，全部集中在 index.html#L346-L384：

语言状态只有一行：从localStorage读取键huxing-lang，取值限定在['zh', 'zht', 'en']之内（见 index.html#L347-L349）。无效值自动回落到中文——零配置、零依赖、刷新后还记得你选了哪种语言。

2.1 静态文案：data-en 属性标注法

顶栏按钮的写法长这样（index.html#L263-L268）：

<button class="btn chip on">const tr = (zh, en) => LANG === 'en' ? en : LANG === 'zht' ? s2t(zh) : zh;

注意这个三参函数其实一鱼三吃：英文取en，繁体不写第二份文案，而是从简体实时转换——这正是省掉一整份繁体翻译文件的关键。

2.2 动态文案：tr() 双参函数

运行时生成的内容（如「已标记拆除 880 mm 墙体」这类拼接字符串）无法预先写进 HTML，就直接在模板里调用tr(中文, 英文)，例如 index.html#L1094 的墙体拆除提示。新写一条文案时顺手带上英文，风格统一、不需要额外的 JSON 语言包文件。

2.3 专有名词：NAMES_EN 查表 + s2t() 兜底

房间名、家具名、地面材料存在户型数据里（如「主卧飘窗」「水磨石」）。英文界面下查 index.html#L356-L375 的NAMES_EN词典；用户自己改过的名称原样显示，不强行翻译。繁体界面则统一走s2t()逐字转换，连用户自改的名字也不会显示错用字。

3. 核心技巧：OpenCC 用字表做轻量简繁转换 ✨

直接用 OpenCC 的完整转换库会引入几百 KB 的映射数据，对一个单文件应用太重。floorplan-3d 的解法是：离线用 OpenCC 的 s2tw（简→台繁）转换，只提取本页实际用到的字，生成一张「用字表」（index.html#L350-L353）：

// 表由 OpenCC s2tw 按本页用到的字生成 const S2T = new Map('与與两兩个個为為书書…'.match(/../gu).map(p => [...p]));

要点有三：

1. 按需裁剪：全量简繁对照有数千条，本页只保留实际出现的几百个字符对，字符串内联在 HTML 里，几乎不占体积；
2. 逐字查表：s2t()对每个\u3400-\u9fff汉字查Map，查不到就原样保留，天然安全；
3. 词级优先：像「布置→佈置」「台面→檯面」「复制→複製」这类一字多义、单字转换会翻车的词，放在S2T_PHRASES里先整词替换，再逐字查表（index.html#L351-L353）。

这就是「OpenCC 用字表」技巧的完整配方：把 OpenCC 当离线翻译工具而非运行时依赖，既拿到专业级转换质量，又只背上几 KB 的表。

4. 一键切换：setLang() 如何做到全局生效

点击顶栏任意语言按钮后，index.html#L1495-L1502 的setLang()按固定顺序刷新一切：

function setLang(l){ LANG = l; try { localStorage.setItem(LANG_KEY, l); } catch(e) {} applyStaticLang(); syncFullscreen(); syncModeHint(); syncPaneBtns(); buildLib(); renderOpenings(); renderAll(); $('#tip').textContent = TIPS()[viewMode]; window.View3D?.relang(); }

思路是「状态变了就重渲染」：静态文案回填 → 2D 图层重绘 → 家具库 / 房间列表重建 → 3D 场景通过relang()单独更新。所有文案入口都收敛在tr()/nm()两个函数里，切换时不存在遗漏。

5. 新手复刻清单：4 步在自己的项目里实现三语 📋

1. 定状态：一个LANG变量 +localStorage持久化，语言列表如['zh','zht','en']；
2. 标静态：HTML 元素上写data-en（需要的话再加data-en-title处理提示语），中文保留在标签内；
3. 管动态：所有运行时文案统一过tr(zh, en)，别在模板里散落 if/else；
4. 转简繁：用 OpenCC s2tw 离线导出你项目用到的字，做成Map用字表，多义词先词级替换再逐字查表。

整个方案的代码量不到 60 行，且全部集中在 index.html 的多语言区块（index.html#L346-L384）。

小结

floorplan-3d 证明了：中小规模的前端国际化不一定要引入框架和语言包。data-en 标注 + tr() 双参函数 + OpenCC 用字表这三件套，就能在单文件应用里轻松支撑简体 / 繁體 / English 三语切换，选择自动记忆、专有名词不失真、繁体零额外翻译成本。如果你也在维护无构建的轻量项目，这套思路值得直接抄作业。

【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d