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

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

原创

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

3 ·

CC 4.0 BY-SA版权

本章介绍场景编辑中关于脚本相关的ui部分，相关的文件为editor\js\Sidebar.Script.js，后续的三个章节会逐个介绍脚本相关的三个命令editor\ js\commands\AddScriptCommand.js、editor\js\commands\SetScriptValueCommand.js、editor\js\commands\RemoveScriptCommand.js。

Sidebar.Script.js脚本主要封装了编辑脚本相关的ui，以及ui绑定的事件，ui中包含的控件有新建按钮、名称编辑框、编辑按钮、移除按钮。

//脚本界面
Sidebar.Script = function ( editor ) {

	//获取字符串用于设置ui的文本
	var strings = editor.strings;

	//获取信号
	var signals = editor.signals;

	//创建一个div，默认不显示（点击对象时才显示）
	var container = new UI.Panel();
	container.setDisplay( 'none' );

	//添加文本、添加两层换行
	container.add( new UI.Text( strings.getKey( 'sidebar/script' ) ).setTextTransform( 'uppercase' ) );
	container.add( new UI.Break() );
	container.add( new UI.Break() );

	//
	//添加一个脚本的容器（动态添加 文本框、编辑按钮、删除按钮）
	var scriptsContainer = new UI.Row();
	container.add( scriptsContainer );

	//添加一个按钮，设定点击事件
	var newScript = new UI.Button( strings.getKey( 'sidebar/sc