本章講解editor\js\Sidebar.Scene.js場景面板，場景面板展示了場景圖的節點關係，以及場景背景色、霧。
場景節點會根據Object3D的具體的類型顯示不同的信息，包括camera、scene、light、group、mesh、skinedmesh、bone等，節點的樣式會根據節點的類型不同而不同，使用的ui文件是ui.three.js，css文件爲editor\css\main.css，其中針對mesh節點，會在節點信息中顯示對象名稱--幾何體名稱--材質名稱--腳本名稱，對於多材質同時會顯示多個材質名稱。
//場景控件
Sidebar.Scene = function ( editor ) {
//獲取事件、字符串
var signals = editor.signals;
var strings = editor.strings;
//創建一個面板
var container = new UI.Panel();
container.setBorderTop( '0' );
container.setPaddingTop( '20px' );
// outliner
//構建選項（對象、是否可以拖拽）
function buildOption( object, draggable ) {
//創建div
var option = document.createElement( 'div' );
//div
option.draggable = draggable;
//構建tree項
option.innerHTML = buildHTML( object );
//項的id
option.value = object.id;
return option;
}
//獲取材質名稱
function getMaterialName( material ) {
//如果材質是數組
if ( Array.isArray( material ) ) {
var array = [];
//遍歷材質（獲取材質名稱）
for ( var i = 0; i < material.length; i ++ ) {
array.push( material[ i ].name );
}
//，號分割材質名稱
return array.join( ',' );
}
return material.name;
}
//替換到名稱當中的特殊字符
function escapeHTML( html ) {
return html
.replace( /&/g, '&' )
.replace( /"/g, '"' )
.replace( /'/g, ''' )
.replace( /</g, '<' )
.replace( />/g, '>' );
}
//對象名稱--幾何體名稱--材質名稱--腳本名稱，這些東西組成了tree的一行
//對象可以是camera、scene、object、mesh
function buildHTML( object ) {
//對象的類型
var html = '<span class="type ' + object.type + '"></span> ' + escapeHTML( object.name );
//如果對象時mesh
if ( object.isMesh ) {
//對象的幾何體、材質
var geometry = object.geometry;
var material = object.material;
//對象當中的幾何體名稱、材質名稱
html += ' <span class="type ' + geometry.type + '"></span> ' + escapeHTML( geometry.name );
html += ' <span class="type ' + material.type + '"></span> ' + escapeHTML( getMaterialName( material ) );
}
//獲取腳本
html += getScript( object.uuid );
return html;
}
//獲取對象關聯的腳本（如果存在）
function getScript( uuid ) {
if ( editor.scripts[ uuid ] !== undefined ) {
return ' <span class="type Script"></span>';
}
return '';
}
//忽略選擇的對象時使用
var ignoreObjectSelectedSignal = false;
//創建大綱
var outliner = new UI.Outliner( editor );
outliner.setId( 'outliner' );
//添加改變事件
outliner.onChange( function () {
//忽略對象被選擇
ignoreObjectSelectedSignal = true;
//設置選擇的對象？？
editor.selectById( parseInt( outliner.getValue() ) );
//啓用對象被選擇
ignoreObjectSelectedSignal = false;
} );
//添加雙擊事件
outliner.onDblClick( function () {
//關注選擇的對象
editor.focusById( parseInt( outliner.getValue() ) );
} );
//添加到面板當中
container.add( outliner );
//創建分割線
container.add( new UI.Break() );
// background
//背景改變
function onBackgroundChanged() {
//背景改變消息
signals.sceneBackgroundChanged.dispatch( backgroundColor.getHexValue() );
}
// 創建
var backgroundRow = new UI.Row();
// 背景顏色，顏色改變的處理
var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
// 添加顏色文字標籤、背景色編輯框
backgroundRow.add( new UI.Text( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
backgroundRow.add( backgroundColor );
//將背景
container.add( backgroundRow );
// fog類型改變
function onFogChanged() {
// /發送場景霧改變的消息
signals.sceneFogChanged.dispatch(
fogType.getValue(), //霧類型
fogColor.getHexValue(), //霧的顏色
fogNear.getValue(), //霧的近面
fogFar.getValue(), //霧的遠面
fogDensity.getValue() //霧的衰減
);
}
//霧div
var fogTypeRow = new UI.Row();
//列表框
var fogType = new UI.Select().setOptions( {
'None': 'None', //不使用霧
'Fog': 'Linear', //線性霧
'FogExp2': 'Exponential' //擴展的霧
} ).setWidth( '150px' );
//霧類型改變
fogType.onChange( function () {
// /霧類型改變刷新
onFogChanged();
refreshFogUI();
} );
// 設置霧控件
fogTypeRow.add( new UI.Text( strings.getKey( 'sidebar/scene/fog' ) ).setWidth( '90px' ) );
fogTypeRow.add( fogType );
//將控件添加到容器
container.add( fogTypeRow );
// fog color
// 設置霧顏色控件
var fogPropertiesRow = new UI.Row();
fogPropertiesRow.setDisplay( 'none' );
fogPropertiesRow.setMarginLeft( '90px' );
container.add( fogPropertiesRow );
var fogColor = new UI.Color().setValue( '#aaaaaa' );
fogColor.onChange( onFogChanged );
fogPropertiesRow.add( fogColor );
// fog near
// /設置霧的近面
var fogNear = new UI.Number( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
fogPropertiesRow.add( fogNear );
// fog far
// 設置霧的遠面
var fogFar = new UI.Number( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
fogPropertiesRow.add( fogFar );
// fog density
// 設置霧的衰減
var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogChanged );
fogPropertiesRow.add( fogDensity );
//
//刷新ui
function refreshUI() {
//相機、場景
var camera = editor.camera;
var scene = editor.scene;
//選項
var options = [];
//相機、場景的大綱項
options.push( buildOption( camera, false ) );
options.push( buildOption( scene, false ) );
//對象的大綱項
( function addObjects( objects, pad ) {
//遍歷場景子節點列表
for ( var i = 0, l = objects.length; i < l; i ++ ) {
//獲取一個對象
var object = objects[ i ];
// /構建選項
var option = buildOption( object, true );
//距離左邊的間距
option.style.paddingLeft = ( pad * 10 ) + 'px';
options.push( option );
//遞歸添加
addObjects( object.children, pad + 1 );
}
} )( scene.children, 1 ); //傳遞場景子節點
// 大綱中設置選項
outliner.setOptions( options );
//編輯器中選擇的對象不爲null
if ( editor.selected !== null ) {
//設置選中的對象
outliner.setValue( editor.selected.id );
}
//場景背景改變
if ( scene.background ) {
//設置背景改變
backgroundColor.setHexValue( scene.background.getHex() );
}
//場景中的霧改變
if ( scene.fog ) {
//設置霧的顏色
fogColor.setHexValue( scene.fog.color.getHex() );
//根據霧的類型設置霧
if ( scene.fog.isFog ) {
fogType.setValue( "Fog" );
fogNear.setValue( scene.fog.near );
fogFar.setValue( scene.fog.far );
} else if ( scene.fog.isFogExp2 ) {
fogType.setValue( "FogExp2" );
fogDensity.setValue( scene.fog.density );
}
} else {
//沒有設置霧
fogType.setValue( "None" );
}
//刷新霧
refreshFogUI();
}
//刷新霧的ui
function refreshFogUI() {
// 霧類型
var type = fogType.getValue();
//設置霧相關控件參數
fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
}
//刷新ui
refreshUI();
// events
// 編輯器清空時刷新ui
signals.editorCleared.add( refreshUI );
//場景圖改變，刷新ui
signals.sceneGraphChanged.add( refreshUI );
//對象改變
signals.objectChanged.add( function ( object ) {
//
var options = outliner.options;
//遍歷選項
for ( var i = 0; i < options.length; i ++ ) {
//
var option = options[ i ];
//找到與對象相關的option
if ( option.value === object.id ) {
//更新選項
option.innerHTML = buildHTML( object );
return;
}
}
} );
//對象被選擇後，tree會跟着改變
signals.objectSelected.add( function ( object ) {
//如果忽略就返回,避免循環
if ( ignoreObjectSelectedSignal === true ) return;
//tree上設置選擇的對象
outliner.setValue( object !== null ? object.id : null );
} );
return container;
};