floorplan-3d 三语国际化实现简繁英切换如何不用框架轻量搞定附 OpenCC 用字表技巧【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-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-intlfloorplan-3d 只用三个约定就把简 / 繁 / 英三种语言跑通了全部集中在 index.html#L346-L384机制服务对象实现data-en属性静态文案按钮、菜单HTML 上直接标注英文中文取 DOM 原文tr(zh, en)函数动态文案提示语、统计面板三元表达式选中文案s2t()转换 NAMES_EN词典房间名、家具名等专有名词简体逐字转繁体 / 查英文词典语言状态只有一行从localStorage读取键huxing-lang取值限定在[zh, zht, en]之内见 index.html#L347-L349。无效值自动回落到中文——零配置、零依赖、刷新后还记得你选了哪种语言。2.1 静态文案data-en 属性标注法顶栏按钮的写法长这样index.html#L263-L268button classbtn 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]));要点有三按需裁剪全量简繁对照有数千条本页只保留实际出现的几百个字符对字符串内联在 HTML 里几乎不占体积逐字查表s2t()对每个\u3400-\u9fff汉字查Map查不到就原样保留天然安全词级优先像「布置→佈置」「台面→檯面」「复制→複製」这类一字多义、单字转换会翻车的词放在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 步在自己的项目里实现三语 定状态一个LANG变量 localStorage持久化语言列表如[zh,zht,en]标静态HTML 元素上写data-en需要的话再加data-en-title处理提示语中文保留在标签内管动态所有运行时文案统一过tr(zh, en)别在模板里散落 if/else转简繁用 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考