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

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

原创

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

5 ·

CC 4.0 BY-SA版权

本文详细解析了一个用于维护编辑器操作命令的历史逻辑处理模块，通过撤销、重做功能实现对操作的回溯，同时介绍了命令存储、序列化及内存管理机制。

本章讲解历史逻辑处理editor\js\History.js,这个文件的主要作用是维护所有的操作命令，已达到可以撤销、重做相关命令的目的，其中有3点需要重点说一下，第一点是脚本的编辑操作时不能撤销、重做的，然后就是两次操作的时间很短时（小于500毫秒）也是不能撤销和重做的，最后一点是命令可以存储在内存中，也可以序列化到json中，对命令占用大量内存时比较好。

//历史命令存储栈
History = function ( editor ) {

	this.editor = editor;				//保存全局编辑器
	this.undos = [];					//撤销队列
	this.redos = [];					//重做队列
	this.lastCmdTime = new Date();		//上次的时间
	this.idCounter = 0;					//命令id索引

	this.historyDisabled = false;		//历史启用、禁用
	this.config = editor.config;		//配置

	//Set editor-reference in Command，为甚me要在这里设置，因为没有更合适的地方，命令主要是为撤销、重做封装的
	Command( editor );					//将editor设置为Command的静态成员

	// signals

	var scope = this;
	this.editor.signals.startPlayer.add( function () {	//开始播放时处理
		scope.historyDisabled = true;					//禁用历史
	} );
	this.editor.signals.stopPlayer.add( function () {	//停止播放时处理
		scope.historyDisabled = false;					//启用历史
	} );
};

History.prototype = {
	//执行命令
	execute: function ( cmd, optionalName ) {

		//弹出最后一次命令
		var lastCmd = this.undos[ this.undos.length - 1 ];
		//时间间隔
		var timeDifference = new Date().getTime() - this.lastCmdTime.getTime();

		var isUpdatableCmd = lastCmd &&						//上次命令存在
			lastCmd.updatable &&							//上次命令也是可以更新的
			cmd.updatable &&								//本次命令是可以更新的
			lastCmd.object === cmd.object &&				//这次的命令关联的对象与上次的是否为同一个
			lastCmd.type === cmd.type &&					//这次的命令类型与上次的是否是同一种类型
			lastCmd.script === cmd.script &&				//这次的脚本和上次的脚本是否为同一个脚本
			lastCmd.attributeNa