three.js 场景编辑器源码解析（一）

最新推荐文章于 2025-10-21 11:01:17 发布

原创

最新推荐文章于 2025-10-21 11:01:17 发布 · 3.3k 阅读

17 ·

CC 4.0 BY-SA版权

本文解析了基于three.js的编辑器r103dev版本的源码，重点介绍了Strings.js文件，它包含了编辑器的所有UI控件名称信息，如菜单项、场景、属性、对象、几何、材质等编辑框的详细内容。

本文章是基于three.js的编辑器进行源码解析，编辑器的版本是r103dev版本。

首先从感性认识上看看编辑器都包含哪些内容，让我们从three.js-dev\editor\js\Strings.js开始。

Strings.js

包含整个ui中所有控件的名称信息，从中可以看出编辑器都包哪些ui控件、以及一些设置信息。这些控件包含中文、英文支持，现在介绍英文部分。

就整体而言，包含：

菜单项 menubar 信息
场景sidebar/scene 信息
属性sidebar/properties/ 信息
对象sidebar/object 信息
对象的顶点sidebar/geometry信息
对象的材质sidebar/material 信息
对象的脚本sidebar/script 信息
对象的设置sidebar/settings 信息
对象的sidebar/history 信息
toolbar工具条（选中对象时的平移、旋转、缩放、本地世界矩阵的转换信息）

提示viewport/info 信息

en: {
			//所有的菜单、及菜单下的菜单项
			
			//file菜单项
			'menubar/file': 'File',
			'menubar/file/new': 'New',
			'menubar/file/import': 'Import',
			'menubar/file/export/geometry': 'Export Geometry',
			'menubar/file/export/object': 'Export Object',
			'menubar/file/export/scene': 'Export Scene',
			'menubar/file/export/dae': 'Export DAE',
			'menubar/file/export/glb': 'Export GLB',
			'menubar/file/export/gltf': 'Export GLTF',
			'menubar/file/export/obj': 'Export OBJ',
			'menubar/file/export/stl': 'Export STL',
			'menubar/file/export/stl_binary': 'Export STL (Binary)',
			'menubar/file/publish': 'Publish',

			//edit菜单项
			'menubar/edit': 'Edit',
			'menubar/edit/undo': 'Undo (Ctrl+Z)',
			'menubar/edit/redo': 'Redo (Ctrl+Shift+Z)',
			'menubar/edit/clear_history': 'Clear History',
			'menubar/edit/clone': 'Clone',
			'menubar/edit/delete': 'Delete (Del)',
			'menubar/edit/minify_shaders': 'Minify Shaders',

			//add菜单项
			'menubar/add': 'Add',
			'menubar/add/group': 'Group',
			'menubar/add/plane': 'Plane',