@combeenation/3d-viewer 4.0.0-beta4 → 4.0.0-beta5

package/src/api/internal/sceneSetup.ts

@@ -1,204 +1,194 @@
-
-import { Engine } from '@babylonjs/core/Engines/engine';
-import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
-import '@babylonjs/core/Helpers/sceneHelpers';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { HDRCubeTexture } from '@babylonjs/core/Materials/Textures/hdrCubeTexture';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
-import { Scene } from '@babylonjs/core/scene';
-import type { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { Camera } from '@babylonjs/core/Cameras/camera';
-import { Light } from '@babylonjs/core/Lights/light';
-import { Parameter } from '../classes/parameter';
-
-
-const defaultLightning = async function(scene: Scene) {
-	const defaultSetup: LightDefinition = {
-		type: 'hemispheric',
-	};
-
-	const defaultLight = await processLight(scene, 'default_light', defaultSetup) as HemisphericLight;
-	defaultLight.groundColor = Color3.Black();
-	defaultLight.diffuse = Color3.White();
-
-	return defaultLight;
-};
-
-
-const processLight = async function(scene: Scene, name: string, lightSetup: LightDefinition) {
-
-	let light: Light;
-
-	switch(lightSetup.type ) {
-		case 'hemispheric':
-			// @ts-ignore
-			const hemisphericLightModule = await import(/* webpackChunkName: "hemispheric-light" */ '@babylonjs/core/Lights/hemisphericLight');
-			light = new hemisphericLightModule.HemisphericLight( name, Vector3.Up(), scene);
-			break;
-		case 'point':
-			// @ts-ignore
-			const pointLightModule = await import(/* webpackChunkName: "point-light" */ '@babylonjs/core/Lights/pointLight');
-			light = new pointLightModule.PointLight( name, Vector3.Up(), scene);
-			break;
-	}
-
-	return light;
-};
-
-
-const defaultCamera = async function(scene: Scene) {
-
-	const cameraSetup: CameraDefinition = {
-		type: 'arc',
-		active: true,
-	};
-
-	const defaultCamera = await processCamera(scene, 'default_camera', cameraSetup);
-
-	return defaultCamera;
-};
-
-const processCamera = async function(scene: Scene, name: string, cameraSetup: CameraDefinition) {
-
-	let camera: Camera;
-
-	let target = Vector3.Zero();
-	if(cameraSetup.target) {
-		target = Parameter.parseVector(cameraSetup.target);
-	}
-
-	switch(cameraSetup.type ) {
-		case 'arc':
-			// @ts-ignore
-			const arcCameraModule = await import(/* webpackChunkName: "arc-rotate-camera" */ '@babylonjs/core/Cameras/arcRotateCamera');
-			camera = new arcCameraModule.ArcRotateCamera(name, Math.PI / 4, Math.PI / 4, 2, target, scene );
-			camera.metadata = {
-				alpha: Math.PI / 4,
-				beta: Math.PI / 4,
-				radius: 2
-			};
-			break;
-
-	}
-
-	if(cameraSetup.active) {
-		camera.attachControl( scene.getEngine().getRenderingCanvas()!, true );
-	}
-
-	if( cameraSetup.fov ) {
-		camera.fov = cameraSetup.fov;
-	}
-
-	camera.storeState();
-	return camera;
-};
-
-const sceneSetup = async function(engine: Engine, sceneJson: SceneJson) {
-	const scene = new Scene( engine );
-	scene.clearColor = new Color4(0, 0, 0, 0);
-
-	let cameras: Camera[] = [];
-	//there is either no "cameras" or "cameras" is empty
-	if( ! sceneJson.scene.hasOwnProperty('cameras') || (sceneJson.scene.cameras && ! Object.keys(sceneJson.scene.cameras).length ) ) {
-		const camera = await defaultCamera(scene);
-
-		cameras.push(camera);
-	} else {
-		for(let camera in sceneJson.scene.cameras) {
-			cameras.push(await processCamera(scene, camera, sceneJson.scene.cameras[camera]));
-		}
-	}
-
-
-	//there is either no "lights" or "lights" is empty
-	if( ! sceneJson.scene.hasOwnProperty('lights') || (sceneJson.scene.lights && ! Object.keys(sceneJson.scene.lights).length ) ) {
-		// await defaultLightning(scene);
-	} else {
-		for(let light in sceneJson.scene.lights) {
-			await processLight(scene, light, sceneJson.scene.lights[light]);
-		}
-	}
-
-
-	// TODO: try to split this away from the default rendering pipeline to save module imports
-	// The "hdr" setting had negative effect on rendering in Safari. Everything looked a little "edgy". I'm not completely
-	// sure if disabling it comes with other negative side effects I don't see right now, so we should probably
-	// investigate this a little more in detail at some point.
-	const defaultPipeline = new DefaultRenderingPipeline( 'default-rendering-pipeline', false, scene );
-	
-	/* DISABLED: causes problems with Internet Explorer
-	defaultPipeline.imageProcessingEnabled = true;
-	*/
-
-	if( sceneJson.scene.globals.aa ) {
-		defaultPipeline.fxaaEnabled = true; //implicitly does FxaaPostProcess()
-	}
-	
-	// Set samples regardless of fxaa setting since we don't want to use fxaa but still increase the sample count
-	defaultPipeline.samples = 8;
-
-	if( sceneJson.scene.globals['camera-settings'] ) {
-		if( sceneJson.scene.globals['camera-settings'].sharpen && sceneJson.scene.globals['camera-settings'].sharpen.enabled ) {
-			defaultPipeline.sharpenEnabled = true; //implicitly does SharpenPostProcess()
-			//defaultPipeline.sharpen.colorAmount = 1;
-			//defaultPipeline.sharpen.edgeAmount = 0;
-		}
-
-		if( sceneJson.scene.globals['camera-settings'].bloom && sceneJson.scene.globals['camera-settings'].bloom.enabled ) {
-			defaultPipeline.bloomEnabled = true;
-
-			if( sceneJson.scene.globals['camera-settings'].bloom.size ) {
-				defaultPipeline.bloomScale = sceneJson.scene.globals['camera-settings'].bloom.size;
-			}
-
-			if( sceneJson.scene.globals['camera-settings'].bloom.threshold ) {
-				defaultPipeline.bloomThreshold = sceneJson.scene.globals['camera-settings'].bloom.threshold;
-			}
-		}
-
-		if( sceneJson.scene.globals['camera-settings'].contrast ) {
-			scene.imageProcessingConfiguration.contrast = sceneJson.scene.globals['camera-settings'].contrast;
-		}
-
-		if( sceneJson.scene.globals['camera-settings'].exposure ) {
-			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings'].exposure;
-		}
-
-		if( sceneJson.scene.globals['camera-settings'].dof && sceneJson.scene.globals['camera-settings'].dof.enabled ) {
-			//@ts-ignore
-			const module = await import(/* webpackChunkName: "lens-rendering" */ './lensRendering');
-			new module.LensRenderingPipeline( 'lens-rendering', sceneJson.scene.globals['camera-settings'].dof!.settings, scene, 1.0, cameras );
-		}
-	}
-
-	// TODO: make this dynamic
-	/*
-	const texture = new HDRCubeTexture("/assets/small_cave_1k.hdr", scene, 256);
-	texture.gammaSpace = false;
-	scene.environmentTexture = texture;
-	// scene.environmentTexture.
-
-	const skyboxMaterial = new StandardMaterial("skyBox", scene);
-	skyboxMaterial.backFaceCulling = false;
-	skyboxMaterial.reflectionTexture = texture;
-	skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
-	skyboxMaterial.disableLighting = false;
-	// TODO: replace with BoxBuilder
-	const skybox = MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
-	skybox.isPickable = false; //never pick a skybox
-	skybox.infiniteDistance = true;
-	skybox.material = skyboxMaterial;
-	*/
-
-	// TODO: shadows don't work with HemishpericLight
-
-	return scene;
-};
-
-export {
-	sceneSetup
-}
+import { Camera } from '@babylonjs/core/Cameras/camera';
+import { Engine } from '@babylonjs/core/Engines/engine';
+import '@babylonjs/core/Helpers/sceneHelpers';
+import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
+import { Color4 } from '@babylonjs/core/Maths/math.color';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { GroundMesh } from '@babylonjs/core/Meshes/groundMesh';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
+import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
+import { Scene } from '@babylonjs/core/scene';
+import { get, isEmpty, set } from 'lodash-es';
+import { Parameter } from '../classes/parameter';
+
+/**
+ * @param scene
+ * @param name
+ * @param definition
+ */
+const processGround = async function( scene: Scene, name: string, definition: GroundDefinition ): Promise<Mesh | GroundMesh> {
+	return new Promise( resolve => {
+		const _resolve = ( ground: Mesh ) => {
+			if( definition.receiveShadows !== undefined ) {
+				ground.receiveShadows = definition.receiveShadows;
+			}
+			resolve( ground );
+		};
+		switch( definition.type ) {
+			case 'baked':
+				if( !definition.meshId ) {
+					throw new Error( `A baked ground must define a "meshId".` );
+				}
+				_resolve( scene.getMeshByID( definition.meshId ) as Mesh );
+				break;
+			case 'ground':
+				_resolve( MeshBuilder.CreateGround(
+					name,
+					definition,
+					scene
+				) );
+				break;
+			case 'heightmap':
+				if( !definition.url ) {
+					throw new Error( `A heightmap ground must define an "url".` );
+				}
+				definition.onReady = ( _ground: GroundMesh ) => {
+					_resolve( _ground );
+				};
+				MeshBuilder.CreateGroundFromHeightMap(
+					name,
+					definition.url,
+					definition,
+					scene,
+				);
+				break;
+			default:
+				throw new Error( `Ground of type "${definition.type}" not implemented (yet).` );
+		}
+	} );
+};
+
+/**
+ * @param scene
+ */
+const defaultCamera = async function( scene: Scene ): Promise<Camera> {
+	return await processCamera( scene, 'default_camera', {
+		type: 'arc',
+		active: true,
+	} );
+};
+
+/**
+ * @param scene
+ * @param name
+ * @param cameraSetup
+ */
+const processCamera = async function( scene: Scene, name: string, cameraSetup: CameraDefinition ): Promise<Camera> {
+	let camera: Camera;
+	let target = Vector3.Zero();
+	if( cameraSetup.target ) {
+		target = Parameter.parseVector( cameraSetup.target );
+	}
+	switch( cameraSetup.type ) {
+		case 'arc':
+			// @ts-ignore
+			const arcCameraModule = await import(/* webpackChunkName: "arc-rotate-camera" */ '@babylonjs/core/Cameras/arcRotateCamera');
+			camera = new arcCameraModule.ArcRotateCamera( name, Math.PI / 4, Math.PI / 4, 2, target, scene );
+			camera.metadata = {
+				alpha: Math.PI / 4,
+				beta: Math.PI / 4,
+				radius: 2
+			};
+			break;
+	}
+	if( cameraSetup.active ) {
+		camera.attachControl( scene.getEngine().getRenderingCanvas()!, true );
+	}
+	if( cameraSetup.fov ) {
+		camera.fov = cameraSetup.fov;
+	}
+	camera.storeState();
+	return camera;
+};
+
+/**
+ * @param engine
+ * @param sceneJson
+ */
+const sceneSetup = async function(engine: Engine, sceneJson: SceneJson): Promise<Scene> {
+	const scene = new Scene( engine );
+	scene.clearColor = new Color4(0, 0, 0, 0);
+	// cameras
+	const cameras: Camera[] = [];
+	const cameraDefinitions = get( sceneJson.scene, 'cameras' ) as CameraDefinitions;
+	if( !isEmpty( cameraDefinitions ) ) {
+		for( let cameraName in cameraDefinitions ) {
+			cameras.push( await processCamera( scene, cameraName, cameraDefinitions[cameraName] ) );
+		}
+	} else {
+		const camera = await defaultCamera( scene );
+		cameras.push( camera );
+	}
+	// grounds
+	const groundDefinitions = get( sceneJson.scene, 'grounds' ) as GroundDefinitions;
+	if( !isEmpty( groundDefinitions ) ) {
+		for( const groundName in groundDefinitions ) {
+			await processGround( scene, groundName, groundDefinitions[groundName] );
+		}
+	}
+	// TODO: try to split this away from the default rendering pipeline to save module imports
+	// The "hdr" setting had negative effect on rendering in Safari. Everything looked a little "edgy". I'm not completely
+	// sure if disabling it comes with other negative side effects I don't see right now, so we should probably
+	// investigate this a little more in detail at some point.
+	const defaultPipeline = new DefaultRenderingPipeline( 'default-rendering-pipeline', false, scene );
+	/* DISABLED: causes problems with Internet Explorer
+	defaultPipeline.imageProcessingEnabled = true;
+	*/
+	if( sceneJson.scene.globals.aa ) {
+		defaultPipeline.fxaaEnabled = true; //implicitly does FxaaPostProcess()
+	}
+	// Set samples regardless of fxaa setting since we don't want to use fxaa but still increase the sample count
+	defaultPipeline.samples = 8;
+	if( sceneJson.scene.globals['camera-settings'] ) {
+		if( sceneJson.scene.globals['camera-settings']!.sharpen && sceneJson.scene.globals['camera-settings']!.sharpen.enabled ) {
+			defaultPipeline.sharpenEnabled = true; //implicitly does SharpenPostProcess()
+			//defaultPipeline.sharpen.colorAmount = 1;
+			//defaultPipeline.sharpen.edgeAmount = 0;
+		}
+		if( sceneJson.scene.globals['camera-settings']!.bloom && sceneJson.scene.globals['camera-settings']!.bloom.enabled ) {
+			defaultPipeline.bloomEnabled = true;
+			if( sceneJson.scene.globals['camera-settings']!.bloom.size ) {
+				defaultPipeline.bloomScale = sceneJson.scene.globals['camera-settings']!.bloom.size;
+			}
+			if( sceneJson.scene.globals['camera-settings']!.bloom.threshold ) {
+				defaultPipeline.bloomThreshold = sceneJson.scene.globals['camera-settings']!.bloom.threshold;
+			}
+		}
+		if( sceneJson.scene.globals['camera-settings']!.contrast ) {
+			scene.imageProcessingConfiguration.contrast = sceneJson.scene.globals['camera-settings']!.contrast;
+		}
+		if( sceneJson.scene.globals['camera-settings']!.exposure ) {
+			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings']!.exposure;
+		}
+		if( sceneJson.scene.globals['camera-settings']!.dof && sceneJson.scene.globals['camera-settings']!.dof.enabled ) {
+			//@ts-ignore
+			const module = await import(/* webpackChunkName: "lens-rendering" */ './lensRendering');
+			new module.LensRenderingPipeline( 'lens-rendering', sceneJson.scene.globals['camera-settings']!.dof.settings, scene, 1.0, cameras );
+		}
+	}
+	// TODO: make this dynamic
+	/*
+	const texture = new HDRCubeTexture("/assets/small_cave_1k.hdr", scene, 256);
+	texture.gammaSpace = false;
+	scene.environmentTexture = texture;
+	// scene.environmentTexture.
+
+	const skyboxMaterial = new StandardMaterial("skyBox", scene);
+	skyboxMaterial.backFaceCulling = false;
+	skyboxMaterial.reflectionTexture = texture;
+	skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
+	skyboxMaterial.disableLighting = false;
+	// TODO: replace with BoxBuilder
+	const skybox = MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
+	skybox.isPickable = false; //never pick a skybox
+	skybox.infiniteDistance = true;
+	skybox.material = skyboxMaterial;
+	*/
+
+	// TODO: shadows don't work with HemishpericLight
+	return scene;
+};
+
+export {
+	sceneSetup
+};

package/src/api/manager/animationManager.ts

@@ -1,117 +1,117 @@
-import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
-import { Scene as BabylonScene, Scene } from '@babylonjs/core/scene';
-import { Nullable } from '@babylonjs/core/types';
-//import { CustomEase } from 'gsap/CustomEase';
-//import { ExpoScaleEase, RoughEase, SlowMo } from 'gsap/EasePack';
-import { remove } from 'lodash-es';
-import { PlacementAnimation } from '../classes/placementAnimation';
-
-//gsap.registerPlugin( CustomEase, ExpoScaleEase, RoughEase, SlowMo );
-
-
-export class AnimationManager  {
-
-	public animations: AnimationInterface[] = [];
-
-	/**
-	 * Constructor.
-	 */
-	protected constructor( protected scene: Scene ) {
-	}
-
-	/**
-	 * Creates an {@link AnimationManager} based on given BabylonJS scene.
-	 */
-	public static async create( scene: BabylonScene ): Promise<AnimationManager> {
-		return new AnimationManager( scene );
-	}
-
-	/**
-	 * @deprecated Use viewer.moveCameraTo().
-	 */
-	public resetCamera(animate: boolean = false) {
-		//TODO currently only works for arcrotate. are there any other cameras?
-		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
-		if( ! activeCamera ) {
-			throw new Error( 'There is no active camera' );
-		}
-
-		const initAlpha = activeCamera.metadata.alpha;
-		const initBeta = activeCamera.metadata.beta;
-		const initRadius = activeCamera.metadata.radius;
-
-		if( animate ) {
-			this.animateArcRotateCamera(initAlpha, initBeta, initRadius);
-		} else {
-			activeCamera.alpha = initAlpha;
-			activeCamera.beta = initBeta;
-			activeCamera.radius = initRadius;
-		}
-	}
-
-	/**
-	 * @deprecated Use viewer.moveCameraTo().
-	 */
-	public animateArcRotateCamera(targetAlpha: number, targetBeta: number, targetRadius: number) {
-		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
-		if( ! activeCamera ) {
-			throw new Error( 'There is no active camera' );
-		}
-		const alphaAnimation = new BabylonAnimation( 'alphaAnimation', 'alpha', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		const betaAnimation = new BabylonAnimation( 'betaAnimation', 'beta', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		const radiusAnimation = new BabylonAnimation( 'radiusAnimation', 'radius', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		alphaAnimation.setKeys([{
-			frame : 0,
-			value : activeCamera.alpha
-		}, {
-			frame : 100,
-			value : targetAlpha
-		}]);
-		betaAnimation.setKeys([{
-			frame : 0,
-			value : activeCamera.beta
-		}, {
-			frame : 100,
-			value : targetBeta
-		}]);
-		radiusAnimation.setKeys( [{
-			frame : 0,
-			value : activeCamera.radius
-		}, {
-			frame : 100,
-			value : targetRadius
-		}]);
-		activeCamera.animations.push(alphaAnimation);
-		activeCamera.animations.push(betaAnimation);
-		activeCamera.animations.push(radiusAnimation);
-
-		let animation = this.scene.beginAnimation(activeCamera, 0, 100, false, 10);
-		animation.disposeOnEnd = true;
-	}
-
-	/**
-	 * Stops and kills all running animations.
-	 */
-	public killAllAnimations() {
-		this.animations.forEach( animation => animation.kill() );
-		this.animations = [];
-	}
-
-	/**
-	 * @see {@link PlacementAnimation.play}
-	 */
-	public async animateToPlacement( mutable: object,
-	                                 placement: PlacementDefinition | string,
-	                                 animation?: AnimationDefinition | string ): Promise<AnimationInterface> {
-		const _animation = new PlacementAnimation( mutable, placement, animation );
-		this.animations.push( _animation );
-		const animationPromise = _animation.play();
-		animationPromise.then( a => {
-			remove( this.animations, _a => _a === a );
-			a.kill();
-		} );
-		return await animationPromise;
-	}
-
+import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+import { Scene as BabylonScene, Scene } from '@babylonjs/core/scene';
+import { Nullable } from '@babylonjs/core/types';
+//import { CustomEase } from 'gsap/CustomEase';
+//import { ExpoScaleEase, RoughEase, SlowMo } from 'gsap/EasePack';
+import { remove } from 'lodash-es';
+import { PlacementAnimation } from '../classes/placementAnimation';
+
+//gsap.registerPlugin( CustomEase, ExpoScaleEase, RoughEase, SlowMo );
+
+
+export class AnimationManager  {
+
+	public animations: AnimationInterface[] = [];
+
+	/**
+	 * Constructor.
+	 */
+	protected constructor( protected scene: Scene ) {
+	}
+
+	/**
+	 * Creates an {@link AnimationManager} based on given BabylonJS scene.
+	 */
+	public static async create( scene: BabylonScene ): Promise<AnimationManager> {
+		return new AnimationManager( scene );
+	}
+
+	/**
+	 * @deprecated Use viewer.moveCameraTo().
+	 */
+	public resetCamera(animate: boolean = false) {
+		//TODO currently only works for arcrotate. are there any other cameras?
+		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
+		if( ! activeCamera ) {
+			throw new Error( 'There is no active camera' );
+		}
+
+		const initAlpha = activeCamera.metadata.alpha;
+		const initBeta = activeCamera.metadata.beta;
+		const initRadius = activeCamera.metadata.radius;
+
+		if( animate ) {
+			this.animateArcRotateCamera(initAlpha, initBeta, initRadius);
+		} else {
+			activeCamera.alpha = initAlpha;
+			activeCamera.beta = initBeta;
+			activeCamera.radius = initRadius;
+		}
+	}
+
+	/**
+	 * @deprecated Use viewer.moveCameraTo().
+	 */
+	public animateArcRotateCamera(targetAlpha: number, targetBeta: number, targetRadius: number) {
+		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
+		if( ! activeCamera ) {
+			throw new Error( 'There is no active camera' );
+		}
+		const alphaAnimation = new BabylonAnimation( 'alphaAnimation', 'alpha', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
+		const betaAnimation = new BabylonAnimation( 'betaAnimation', 'beta', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
+		const radiusAnimation = new BabylonAnimation( 'radiusAnimation', 'radius', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
+		alphaAnimation.setKeys([{
+			frame : 0,
+			value : activeCamera.alpha
+		}, {
+			frame : 100,
+			value : targetAlpha
+		}]);
+		betaAnimation.setKeys([{
+			frame : 0,
+			value : activeCamera.beta
+		}, {
+			frame : 100,
+			value : targetBeta
+		}]);
+		radiusAnimation.setKeys( [{
+			frame : 0,
+			value : activeCamera.radius
+		}, {
+			frame : 100,
+			value : targetRadius
+		}]);
+		activeCamera.animations.push(alphaAnimation);
+		activeCamera.animations.push(betaAnimation);
+		activeCamera.animations.push(radiusAnimation);
+
+		let animation = this.scene.beginAnimation(activeCamera, 0, 100, false, 10);
+		animation.disposeOnEnd = true;
+	}
+
+	/**
+	 * Stops and kills all running animations.
+	 */
+	public killAllAnimations() {
+		this.animations.forEach( animation => animation.kill() );
+		this.animations = [];
+	}
+
+	/**
+	 * @see {@link PlacementAnimation.play}
+	 */
+	public async animateToPlacement( mutable: object,
+	                                 placement: PlacementDefinition | string,
+	                                 animation?: AnimationDefinition | string ): Promise<AnimationInterface> {
+		const _animation = new PlacementAnimation( mutable, placement, animation );
+		this.animations.push( _animation );
+		const animationPromise = _animation.play();
+		animationPromise.then( a => {
+			remove( this.animations, _a => _a === a );
+			a.kill();
+		} );
+		return await animationPromise;
+	}
+
 }