本章讲解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;
};