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

最新推荐文章于 2025-10-30 17:34:28 发布

原创

最新推荐文章于 2025-10-30 17:34:28 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

本文深入解析Editor.js，一款强大的编辑器核心文件，介绍其mvc模式下的controller角色，涵盖信号库、配置信息、历史操作及资源管理等内容，是理解编辑器工作原理的关键。

这一章讲解整个编辑器中最重要的一个文件editor\js\Editor.js,这个文件是真个编辑器的上下文，是所有ui与对象交互的桥梁，相当于mvc模式中的controller。

Editor.js包含的几个重要的信息如下：

整个编辑器的相机DEFAULT_CAMERA
整个编辑器的场景this.scene
整个场景中辅助相关对象所在的场景this.sceneHelpers
编辑器中信息传递的介质this.signals
整个场景的资源信息包括this.object、this.geometries、this.materials、this.textures、this.scripts、this.animations、this.mixer、this.helpers
编辑器中当前关注的对象this.selected
编辑器的配置信息（初始化时默认配置）this.config
编辑器的历史操作信息this.history
编辑器存储相关信息this.storage
编辑器的ui文本信息this.strings

编辑器的文件加载器，主要是导入json、对象等this.loader

//编辑器的上下文(是各个子类的桥梁，各个子模块通信的桥梁)
var Editor = function () {

	this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
	this.DEFAULT_CAMERA.name = 'Camera';
	this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
	this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
	//信号库
	var Signal = signals.Signal;

	//各种信号（信号中心，都是通过editor中定义的全局变量来在各个组件中共享的）
	this.signals = {

		// script
		// 脚本监听
		editScript: new Signal(),

		// player
		// 播放器开始、停止监听
		startPlayer: new Signal(),
		stopPlayer: new Signal(),

		// actions
		//显示模型监听？
		showModal: new Signal(),

		// notifications
		//清空编辑器监听？
		editorCleared: new Signal(),

		//开始保存监听、保存完成监听
		savingStarted: new Signal(),
		savingFinished: new Signal(),

		//主题改变监听
		themeChanged: new Signal(),

		//变换改变监听（平移、旋转、缩放）
		transformModeChanged: new Signal(),
		snapChanged: new Signal(),		//选取监听？
		spaceChanged: new Signal(),		//？
		rendererChanged: new Signal(),	//?

		//场景背景改变监听、雾监听、场景图改变监听
		sceneBackgroundChanged: new Signal(),
		sceneFogChanged: new Signal(),
		sceneGraphChanged: new Signal(),

		//相机改变监听
		cameraChanged: new Signal(),

		//几何数据改变监听
		geometryChanged: new Signal(),

		//选择对象、设置焦点对象监听
		objectSelected: new Signal(),
		objectFocused: new Signal(),


		//对象的添加、改变、移除监听
		objectAdded: new Signal(),
		objectChanged: new Signal(),
		objectRemoved: new Signal(),

		//添加、移除辅助信息监听
		helperAdded: new Signal(),
		helperRemoved: new Signal(),

		//材质改变监听
		materialChanged: new Signal(),

		//添加、改变、移除脚本监听
		scriptAdded: new Signal(),
		scriptChanged: new Signal(),
		scriptRemoved: new Signal(),

		//窗口改变大小监听
		windowResize: new Signal(),

		// 网格监听、刷新边栏监听、历史改变监听
		showGridChanged: new Signal(),
		refreshSidebarObject3D: new Signal(),
		historyChanged: new Signal()

	};

	//配置类（配置的信息保存在浏览器的localstring中）
	this.config = new Config();
	//历史类
	this.history = new History( this );
	//存储类，封装