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

     本章讲解editor\js\Toolbar.js,这个ui主要用于设置操作对象的位移、旋转、缩放、空间的切换。

// 平移、旋转、缩放、空间工具条
var Toolbar = function ( editor ) {
	//信号、页面字符
	var signals = editor.signals;
	var strings = editor.strings;

	//工具条
	var container = new UI.Panel();
	container.setId( 'toolbar' );
	container.setDisplay( 'none' );

	//按钮
	var buttons = new UI.Panel();
	container.add( buttons );

	// translate / rotate / scale
	//平移按钮
	var translate = new UI.Button( strings.getKey( 'toolbar/translate' ) );
	translate.dom.className = 'Button selected';
	translate.onClick( function () {
		//设置其他按钮状态
		signals.transformModeChanged.dispatch( 'translate' );

	} );
	buttons.add( translate );
	//旋转按钮
	var rotate = new UI.Button( strings.getKey( 'toolbar/rotate' ) );
	rotate.onClick( function () {
		//设置其他按钮状态
		signals.transformModeChanged.dispatch( 'rotate' );

	} );
	buttons.add( rotate );
	//缩放按钮
	var scale = new UI.Button( strings.getKey( 'toolbar/scale' ) );
	scale.onClick( function () {
		//设置其他按钮状态
		signals.transformModeChanged.dispatch( 'scale' );

	} );
	buttons.add( scale );
	//模型空间、世界空间
	var local = new UI.THREE.Boolean( false, strings.getKey( 'toolbar/local' ) );
	local.onChange( function () {
		//改变操作模型的空间
		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );

	} );
	buttons.add( local );

	//
	//对象选择（显示操作面板）
	signals.objectSelected.add( function ( object ) {
		container.setDisplay( object === null ? 'none' : '' );
	} );

	//选择的模式改变了，会影响其他按钮的灰度
	signals.transformModeChanged.add( function ( mode ) {
		//设置其他按钮为未选择状态
		translate.dom.classList.remove( 'selected' );
		rotate.dom.classList.remove( 'selected' );
		scale.dom.classList.remove( 'selected' );

		switch ( mode ) {
			//根据模式，将按钮显示未指定状态
			case 'translate': translate.dom.classList.add( 'selected' ); break;
			case 'rotate': rotate.dom.classList.add( 'selected' ); break;
			case 'scale': scale.dom.classList.add( 'selected' ); break;
		}
	} );
	//返回容器
	return container;
};