Editor: Refactored animations panel (#23714)

* WebGLMaterials: Clean up.

* Editor: Refactored animations panel.

editor/js/Editor.js

@@ -84,9 +84,7 @@ function Editor() {
 		refreshSidebarObject3D: new Signal(),
 		historyChanged: new Signal(),
 
-		viewportCameraChanged: new Signal(),
-
-		animationStopped: new Signal()
+		viewportCameraChanged: new Signal()
 
 	};
 

editor/js/Sidebar.Animation.js

@@ -1,4 +1,4 @@
-import { UIPanel, UIBreak, UISelect, UIButton, UIText, UINumber, UIRow } from './libs/ui.js';
+import { UIPanel, UIBreak, UIButton, UIDiv, UIText, UINumber, UIRow } from './libs/ui.js';
 
 function SidebarAnimation( editor ) {
 
@@ -6,31 +6,54 @@ function SidebarAnimation( editor ) {
 	const signals = editor.signals;
 	const mixer = editor.mixer;
 
-	const actions = {};
+	function getButtonText( action ) {
+
+		return action.isRunning()
+			? strings.getKey( 'sidebar/animations/stop' )
+			: strings.getKey( 'sidebar/animations/play' );
+
+	}
+
+	function Animation( animation, object ) {
+
+		const action = mixer.clipAction( animation, object );
+
+		const container = new UIRow();
+
+		const name = new UIText( animation.name ).setWidth( '200px' );
+		container.add( name );
+
+		const button = new UIButton( getButtonText( action  ) );
+		button.onClick( function () {
+
+			console.log( action );
+
+			action.isRunning() ? action.stop() : action.play();
+			button.setTextContent( getButtonText( action  ) );
+
+		} );
+
+		container.add( button );
+
+		return container;
+
+	}
 
 	signals.objectSelected.add( function ( object ) {
 
 		if ( object !== null && object.animations.length > 0 ) {
 
-			const animations = object.animations;
-
-			container.setDisplay( '' );
+			animationsList.clear();
 
-			const options = {};
-			let firstAnimation;
+			const animations = object.animations;
 
 			for ( const animation of animations ) {
 
-				if ( firstAnimation === undefined ) firstAnimation = animation.name;
-
-				actions[ animation.name ] = mixer.clipAction( animation, object );
-				options[ animation.name ] = animation.name;
+				animationsList.add( new Animation( animation, object ) );
 
 			}
 
-			animationsSelect.setOptions( options );
-			animationsSelect.setValue( firstAnimation );
-			mixerTimeScaleNumber.setValue( mixer.timeScale );
+			container.setDisplay( '' );
 
 		} else {
 
@@ -50,26 +73,6 @@ function SidebarAnimation( editor ) {
 
 	} );
 
-	function playAction() {
-
-		actions[ animationsSelect.getValue() ].play();
-
-	}
-
-	function stopAction() {
-
-		actions[ animationsSelect.getValue() ].stop();
-
-		signals.animationStopped.dispatch();
-
-	}
-
-	function changeTimeScale() {
-
-		mixer.timeScale = mixerTimeScaleNumber.getValue();
-
-	}
-
 	const container = new UIPanel();
 	container.setDisplay( 'none' );
 
@@ -77,21 +80,16 @@ function SidebarAnimation( editor ) {
 	container.add( new UIBreak() );
 	container.add( new UIBreak() );
 
-	//
-
-	const animationsRow = new UIRow();
+	const animationsList = new UIDiv();
+	container.add( animationsList );
 
-	const animationsSelect = new UISelect().setFontSize( '12px' );
-	animationsRow.add( animationsSelect );
-	animationsRow.add( new UIButton( strings.getKey( 'sidebar/animations/play' ) ).setMarginLeft( '4px' ).onClick( playAction ) );
-	animationsRow.add( new UIButton( strings.getKey( 'sidebar/animations/stop' ) ).setMarginLeft( '4px' ).onClick( stopAction ) );
-
-	container.add( animationsRow );
+	const mixerTimeScaleRow = new UIRow();
+	const mixerTimeScaleNumber = new UINumber( 0.5 ).setWidth( '60px' ).setRange( - 10, 10 );
+	mixerTimeScaleNumber.onChange( function () {
 
-	//
+		mixer.timeScale = mixerTimeScaleNumber.getValue();
 
-	const mixerTimeScaleRow = new UIRow();
-	const mixerTimeScaleNumber = new UINumber( 0.5 ).setWidth( '60px' ).setRange( - 10, 10 ).onChange( changeTimeScale );
+	} );
 
 	mixerTimeScaleRow.add( new UIText( strings.getKey( 'sidebar/animations/timescale' ) ).setWidth( '90px' ) );
 	mixerTimeScaleRow.add( mixerTimeScaleNumber );

editor/js/Viewport.js

@@ -498,12 +498,6 @@ function Viewport( editor ) {
 
 	} );
 
-	signals.animationStopped.add( function () {
-
-		render();
-
-	} );
-
 	// background
 
 	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture ) {
@@ -685,6 +679,8 @@ function Viewport( editor ) {
 
 	// animations
 
+	let prevActionsInUse = 0;
+
 	const clock = new THREE.Clock(); // only used for animations
 
 	function animate() {
@@ -694,13 +690,21 @@ function Viewport( editor ) {
 
 		let needsUpdate = false;
 
-		if ( mixer.stats.actions.inUse > 0 ) {
+		// Animations
+
+		const actions = mixer.stats.actions;
+
+		if ( actions.inUse > 0 || prevActionsInUse > 0 ) {
+
+			prevActionsInUse = actions.inUse;
 
 			mixer.update( delta );
 			needsUpdate = true;
 
 		}
 
+		// View Helper
+
 		if ( viewHelper.animating === true ) {
 
 			viewHelper.update( delta );