@combeenation/3d-viewer 4.0.0-beta1 → 4.0.0-beta2

package/src/api/classes/variant.ts

@@ -1,5 +1,4 @@
 import { AssetContainer } from '@babylonjs/core/assetContainer';
-import { Light } from '@babylonjs/core/Lights/light';
 import '@babylonjs/core/Loading/Plugins/babylonFileLoader';
 import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
 import { Material } from '@babylonjs/core/Materials/material';
@@ -8,30 +7,40 @@ import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform';
 import '@babylonjs/loaders/glTF/2.0/glTFLoader';
-import { cloneDeep, concat, get, isEmpty, isEqual, isString, merge, set } from 'lodash-es';
-import { deactivateTransformNode, getDottedPathForNode, injectNodeMetadata } from '../util/babylonHelper';
+import { cloneDeep, concat, isEmpty, isEqual, isString, merge } from 'lodash-es';
+import {
+	deactivateTransformNode,
+	getDottedPathForTransformNode,
+	injectTransformNodeMetadata
+} from '../util/babylonHelper';
 import { loadJson, mergeMaps } from '../util/resourceHelper';
 import { DottedPath } from './dottedPath';
 import { Element } from './element';
+import { ElementParameterizable } from './elementParameterizable';
 import { Event } from './event';
 import { Parameter } from './parameter';
-import { Parameterizable } from './parameterizable';
-import { ParameterObservable } from './parameterObservable';
-import { VariantParameterizable } from './variantParameterizable';
 import { Viewer } from './viewer';
-import { ViewerLight } from './viewerLight';
+
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_ior';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_pbrSpecularGlossiness';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_specular';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_translucency';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_transmission';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_unlit';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants';
 
 /**
  * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
  */
-export class Variant extends Parameterizable {
+export class Variant extends ElementParameterizable {
 
 	public assetContainer: AssetContainer;
 
 	public readonly elements: Element[] = [];
 
-	public readonly viewerLights: ViewerLight[] = [];
-
 	public structureJson: StructureJson;
 
 	protected _dottedNodes: Map<DottedPath, TransformNode> | undefined;
@@ -166,13 +175,6 @@ export class Variant extends Parameterizable {
 		return rootNodes;
 	}
 
-	/**
-	 * The {@link ViewerLight}s of the {@link Variant}.
-	 */
-	get lights(): Light[] {
-		return this.assetContainer.lights;
-	}
-
 	/**
 	 * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
 	 */
@@ -206,17 +208,6 @@ export class Variant extends Parameterizable {
 		return concat( elements, this.elements );
 	}
 
-	/**
-	 * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
-	 */
-	get inheritedViewerLights(): ViewerLight[] {
-		let viewerLights: ViewerLight[] = [];
-		this.ancestors.forEach( ancestor => {
-			viewerLights = concat( viewerLights, ancestor.viewerLights );
-		} );
-		return concat( viewerLights, this.viewerLights );
-	}
-
 	/**
 	 * All TransformNodes inherited from this {@link Variant}'s parents.
 	 */
@@ -239,17 +230,6 @@ export class Variant extends Parameterizable {
 		return dottedNodes;
 	}
 
-	/**
-	 * All Lights inherited from this {@link Variant}'s parents.
-	 */
-	get inheritedLights(): Light[] {
-		let lights: Light[] = [];
-		this.ancestors.forEach( ancestor => {
-			lights = concat( lights, ancestor.lights );
-		} );
-		return concat( lights, this.lights );
-	}
-
 	/**
 	 * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
 	 */
@@ -357,33 +337,6 @@ export class Variant extends Parameterizable {
 		return element;
 	}
 
-	/**
-	 * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
-	 * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
-	 */
-	public async getViewerLight( dottedPath: DottedPathArgument ): Promise<ViewerLight> {
-		const _dottedPath = DottedPath.create( dottedPath );
-		const viewerLightName = _dottedPath.popPart();
-		let variant: Variant = this;
-		if( _dottedPath.parts.length > 0 ) {
-			variant = await this.getDescendant( _dottedPath );
-		}
-		if( variant.inheritedViewerLights.length === 0 ) {
-			throw new Error( `No viewerLights for variant "${variant.id}" found. ` +
-				`Either none are defined or they are not initialized (are you operating on the appropriate living?).` );
-		}
-		let viewerLight;
-		variant.inheritedViewerLights.forEach( _viewerLight => {
-			if( _viewerLight.name === viewerLightName ) {
-				viewerLight = _viewerLight;
-			}
-		} );
-		if( !viewerLight ) {
-			throw new Error( `ViewerLight with name "${viewerLightName}" does not exist for variant "${variant.id}".` );
-		}
-		return viewerLight;
-	}
-
 	/**
 	 * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
 	 */
@@ -430,8 +383,7 @@ export class Variant extends Parameterizable {
 		parent?._children.set( variant.name, variant );
 		variant.assetContainer = this.assetContainer;
 		variant.parameterObservers = cloneDeep( this.parameterObservers );
-		await variant.createElements();
-		await variant.createViewerLights();
+		variant.createElements();
 		variant.addParameterObservers();
 		await variant.bootstrapParameters( parameters );
 		this.broadcastEvent( Event.VARIANT_CREATED, variant );
@@ -537,10 +489,31 @@ export class Variant extends Parameterizable {
 		this.broadcastEvent(Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
 
 		// commit parameters to elements
-		await this.commitParametersToElements( newParameters );
-
-		// commit parameters to lights
-		await this.commitParametersToViewerLights( newParameters );
+		const elementPromises: Promise<Element>[] = this.elements.map( element => {
+			let _elementDefinition = JSON.stringify( this._structureJson.elements![element.name] );
+			const elementParameters: ParameterBag = {};
+			for( const parameter in newParameters ) {
+				if( DottedPath.create( parameter ).firstPart !== element.name ) {
+					continue;
+				}
+				// we got an element parameter
+				let newParameterValue = newParameters[parameter];
+				const elementParameter = parameter.replace( `${element.name}.`, '' );
+				// If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
+				// an exception for visibility to avoid overloading already applied element parameters with element parameters
+				// defined in the variant spec ("dotted parameters").
+				// @see https://github.com/Combeenation/3d-viewer/issues/44
+				if( elementParameter === Parameter.VISIBLE && newParameters[Parameter.VISIBLE] === false ) {
+					newParameterValue = false;
+				}
+				elementParameters[elementParameter] = newParameterValue;
+				const search = new RegExp( `\\$\\{${elementParameter}\\}`, 'g' );
+				_elementDefinition = _elementDefinition.replace( search, newParameterValue.toString() );
+			}
+			this.structureJson.elements![this.name] = JSON.parse( _elementDefinition );
+			return element.commitParameters( elementParameters );
+		} );
+		await Promise.all( elementPromises );
 
 		// propagate parameters to parent
 		if( this.parent ) {
@@ -589,17 +562,7 @@ export class Variant extends Parameterizable {
 				const nodes = this.assetContainer.getNodes().filter( n => n instanceof TransformNode ) as TransformNode[];
 				nodes.forEach( node => {
 					deactivateTransformNode( node, false );
-					injectNodeMetadata( node, { dottedPath: getDottedPathForNode( node ) }, false );
-				} );
-				this.assetContainer.lights.forEach( light => {
-					light.setEnabled( false );
-					injectNodeMetadata( light, { dottedPath: getDottedPathForNode( light ) }, false );
-					this.viewer.scene.addLight( light );
-				} );
-				this.assetContainer.cameras.forEach( camera => {
-					camera.setEnabled( false );
-					injectNodeMetadata( camera, { dottedPath: getDottedPathForNode( camera ) }, false );
-					this.viewer.scene.addCamera( camera );
+					injectTransformNodeMetadata( node, { dottedPath: getDottedPathForTransformNode( node ) }, false );
 				} );
 				this.broadcastEvent( Event.ASSET_LOADING_END, this );
 				resolve( this );
@@ -610,82 +573,15 @@ export class Variant extends Parameterizable {
 		} );
 	}
 
-	/**
-	 * Commits given parameters to all {@link Element}s.
-	 */
-	protected async commitParametersToElements( parameters: ParameterBag ) {
-		await Promise.all( this.elements.map(
-			element => this.commitParametersToVariantParameterizable(parameters, element, 'elements')
-		) );
-	}
-
-	/**
-	 * Commits given parameters to all {@link ViewerLight}s.
-	 */
-	protected async commitParametersToViewerLights( parameters: ParameterBag ) {
-		await Promise.all( this.viewerLights.map(
-			viewerLight => this.commitParametersToVariantParameterizable(parameters, viewerLight, 'lights')
-		) );
-	}
-
-	/**
-	 * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
-	 * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
-	 * `this.structureJson.elements`.
-	 */
-	protected async commitParametersToVariantParameterizable( parameters: ParameterBag,
-	                                                          parameterizable: VariantParameterizable,
-	                                                          definitionKey: string ): Promise<ParameterObservable> {
-		const initialDefinition = get( this._structureJson, definitionKey )[parameterizable.name];
-		let initialDefinitionStr = JSON.stringify( initialDefinition );
-		const _parameters: ParameterBag = {};
-		for( const parameter in parameters ) {
-			const dpp = DottedPath.create( parameter );
-			if( dpp.shiftPart() !== parameterizable.name ) {
-				continue;
-			}
-			// we got a parameterizable ("element") parameter
-			let parameterValue = parameters[parameter];
-			const parameterizableParameter = dpp.path;
-			// If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
-			// an exception for visibility to avoid overloading already applied element parameters with element parameters
-			// defined in the variant spec ("dotted parameters").
-			// @see https://github.com/Combeenation/3d-viewer/issues/44
-			if( parameterizableParameter === Parameter.VISIBLE && parameters[Parameter.VISIBLE] === false ) {
-				parameterValue = false;
-			}
-			_parameters[parameterizableParameter] = parameterValue;
-			const search = new RegExp( `\\$\\{${parameterizableParameter}\\}`, 'g' );
-			initialDefinitionStr = initialDefinitionStr.replace( search, parameterValue.toString() );
-		}
-		const definition = get( this.structureJson, definitionKey );
-		definition[this.name] = JSON.parse( initialDefinitionStr );
-		set( this.structureJson, definitionKey, definition );
-		return await parameterizable.commitParameters( _parameters );
-	}
-
 	/**
 	 * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
 	 */
-	protected async commitParameterToElements( parameter: string, value: ParameterValue ): Promise<Variant> {
+	protected async commitParameterToElements( parameter: string, value: ParameterValue ) {
 		const promises = [];
 		for( const element of this.elements ) {
 			promises.push( element.commitParameter( parameter, value ) );
 		}
 		await Promise.all( promises );
-		return this;
-	}
-
-	/**
-	 * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
-	 */
-	protected async commitParameterToViewerLights( parameter: string, value: ParameterValue ): Promise<Variant> {
-		const promises = [];
-		for( const viewerLight of this.viewerLights ) {
-			promises.push( viewerLight.commitParameter( parameter, value ) );
-		}
-		await Promise.all( promises );
-		return this;
 	}
 
 	/**
@@ -695,13 +591,11 @@ export class Variant extends Parameterizable {
 		this._parameterObservers.set( Parameter.VISIBLE, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.VISIBLE, newValue );
-				await variant.commitParameterToViewerLights( Parameter.VISIBLE, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.SCALING, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.SCALING, newValue );
-				await variant.commitParameterToViewerLights( Parameter.SCALING, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.MATERIAL, [
@@ -737,28 +631,11 @@ export class Variant extends Parameterizable {
 		this._parameterObservers.set( Parameter.POSITION, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.POSITION, newValue );
-				await variant.commitParameterToViewerLights( Parameter.POSITION, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.ROTATION, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.ROTATION, newValue );
-				await variant.commitParameterToViewerLights( Parameter.ROTATION, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.CAST_SHADOW, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW_FROM_LIGHTS, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.CAST_SHADOW_FROM_LIGHTS, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.RECEIVE_SHADOWS, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.RECEIVE_SHADOWS, newValue );
 			}
 		] );
 		return this;
@@ -767,33 +644,20 @@ export class Variant extends Parameterizable {
 	/**
 	 * Creates {@link Element}s and clones nodes into them.
 	 */
-	protected async createElements(): Promise<Variant> {
-		for( const name in this.structureJson.elements || {} ) {
-			this.elements.push( await Element.create( this, name ) );
+	protected createElements(): Variant {
+		for( const elementName in this.structureJson.elements || {} ) {
+			this.elements.push( new Element( this, elementName ) );
 		}
 		// inject node meta to all inherited elements
 		// we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
 		this.inheritedElements.forEach( element => {
 			element.nodes.forEach( node => {
-				injectNodeMetadata( node, { variant: this, variantParameterizable: element } );
+				injectTransformNodeMetadata( node, { variant: this, element: element } );
 			} );
 		} );
 		return this;
 	}
 
-	/**
-	 * Creates {@link ViewerLight}s.
-	 */
-	protected async createViewerLights(): Promise<Variant> {
-		for( const name in this.structureJson.lights || {} ) {
-			this.viewerLights.push( await ViewerLight.create( this, name ) );
-		}
-		this.inheritedViewerLights.forEach( viewerLight => {
-			injectNodeMetadata( viewerLight.light, { variant: this, variantParameterizable: viewerLight } );
-		} );
-		return this;
-	}
-
 	/**
 	 * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
 	 */

package/src/api/classes/variantInstance.ts

@@ -1,6 +1,6 @@
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { Element } from './element';
-import { ViewerLight } from './viewerLight';
 import { EventBroadcaster } from './eventBroadcaster';
 import { ParameterObservable } from './parameterObservable';
 import { Variant } from './variant';
@@ -51,13 +51,6 @@ export class VariantInstance extends EventBroadcaster {
 		return this.variant.getElement( dottedPath );
 	}
 
-	/**
-	 * A proxy for {@link Variant.getViewerLight}.
-	 */
-	public async getViewerLight( dottedPath: DottedPathArgument ): Promise<ViewerLight> {
-		return this.variant.getViewerLight( dottedPath );
-	}
-
 	/**
 	 * A proxy for {@link Variant.getNode}.
 	 */

package/src/api/classes/viewer.ts

@@ -3,11 +3,9 @@ import { PickingInfo } from '@babylonjs/core/Collisions/pickingInfo';
 import { BoundingInfo } from '@babylonjs/core/Culling/boundingInfo';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { ScreenshotTools } from '@babylonjs/core/Misc/screenshotTools';
 import { Scene } from '@babylonjs/core/scene';
 import { isString } from 'lodash-es';
@@ -17,7 +15,7 @@ import { AnimationManager } from '../manager/animationManager';
 import { SceneManager } from '../manager/sceneManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
-import { debounce, loadJson, sleep } from '../util/resourceHelper';
+import { debounce, loadJson } from '../util/resourceHelper';
 import { Event } from './event';
 import { EventBroadcaster } from './eventBroadcaster';
 import { Parameter } from './parameter';
@@ -147,14 +145,8 @@ export class Viewer extends EventBroadcaster {
 		}
 		// resize handler
 		window.addEventListener( 'resize', debounce( this.resize.bind( this ), 100 ) );
-		// wait until scene is completely ready
-		await this.scene.whenReadyAsync();
 		// event broadcasting
 		this.broadcastEvent( Event.BOOTSTRAP_END, this );
-		// render loop
-		this.engine.runRenderLoop( () => {
-			this.scene.render();
-		} );
 		return this;
 	}
 
@@ -272,21 +264,19 @@ export class Viewer extends EventBroadcaster {
 	/**
 	 * Calculates the bounding box from all visible meshes on the scene.
 	 */
-	public async calculateBoundingBox(): Promise<Mesh> {
+	public calculateBoundingBox(): Mesh {
 		if( this.scene.meshes.length === 0 ) {
 			throw new Error( 'There are currently no meshes on the scene.' );
 		}
-		this.scene.render();  // XXX: workaround for BoundingBox not respecting render loop
-		const bbName = '__bounding_box__';
 		let max = new Vector3( 0, 0, 0 );
 		let min = new Vector3( 0, 0, 0 );
-		this.scene.meshes.filter( mesh => bbName !== mesh.id && mesh.isEnabled() ).forEach( mesh => {
+		this.scene.meshes.filter( mesh => mesh.isVisible ).forEach( mesh => {
 			max = Vector3.Maximize( max, mesh.getBoundingInfo().boundingBox.maximumWorld );
 			min = Vector3.Minimize( min, mesh.getBoundingInfo().boundingBox.minimumWorld );
 		} );
-		let boundingBox = this.scene.getMeshByName( bbName ) as Mesh;
+		let boundingBox = this.scene.getMeshByName( '__bounding_box__' ) as Mesh;
 		if( !boundingBox ) {
-			boundingBox = new Mesh( bbName, this.scene );
+			boundingBox = new Mesh( '__bounding_box__', this.scene );
 		}
 		boundingBox.setBoundingInfo( new BoundingInfo( min, max ) );
 		//boundingBox.showBoundingBox = true;
@@ -296,14 +286,14 @@ export class Viewer extends EventBroadcaster {
 	/**
 	 * Focuses the camera to see every visible mesh in scene and tries to optimize wheel precision and panning.
 	 */
-	public async autofocusActiveCamera( settings?: AutofocusSettings ) {
+	public autofocusActiveCamera( settings?: AutofocusSettings ) {
 		const activeCamera = this.scene.activeCamera;
 		if( !activeCamera ) {
 			throw new Error( 'No active camera found when using autofocus feature.' );
 		}
 		if( activeCamera instanceof ArcRotateCamera ) {
 			// calculate some values
-			const boundingBox = await this.calculateBoundingBox();
+			const boundingBox = this.calculateBoundingBox();
 			const size = boundingBox.getBoundingInfo().maximum.subtract( boundingBox.getBoundingInfo().minimum );
 			let radius = size.length() * (settings?.radiusFactor ?? 1.5);
 			if( !isFinite( radius ) ) {
@@ -368,56 +358,6 @@ export class Viewer extends EventBroadcaster {
 		return this;
 	}
 
-	/**
-	 * Show coordinate system with given dimension (for debugging purpose).
-	 */
-	public showWorldCoordinates( dimension: number ) {
-		const scene = this.scene;
-		const makeTextPlane = function( text: string, color: string, size: number ) {
-			const dynamicTexture = new DynamicTexture( 'DynamicTexture', 50, scene, true );
-			dynamicTexture.hasAlpha = true;
-			dynamicTexture.drawText( text, 5, 40, 'bold 36px Arial', color, 'transparent', true );
-			const plane = Mesh.CreatePlane( 'TextPlane', size, scene, true );
-			plane.material = new StandardMaterial( 'TextPlaneMaterial', scene );
-			plane.material.backFaceCulling = false;
-			// @ts-ignore
-			plane.material.specularColor = new Color3( 0, 0, 0 );
-			// @ts-ignore
-			plane.material.diffuseTexture = dynamicTexture;
-			return plane;
-		};
-		const axisX = Mesh.CreateLines( 'axisX', [
-			Vector3.Zero(),
-			new Vector3( dimension, 0, 0 ),
-			new Vector3( dimension * 0.95, 0.05 * dimension, 0 ),
-			new Vector3( dimension, 0, 0 ),
-			new Vector3( dimension * 0.95, -0.05 * dimension, 0 )
-		], scene );
-		axisX.color = new Color3( 1, 0, 0 );
-		const xChar = makeTextPlane( 'X', 'red', dimension / 10 );
-		xChar.position = new Vector3( 0.9 * dimension, -0.05 * dimension, 0 );
-		const axisY = Mesh.CreateLines( 'axisY', [
-			Vector3.Zero(),
-			new Vector3( 0, dimension, 0 ),
-			new Vector3( -0.05 * dimension, dimension * 0.95, 0 ),
-			new Vector3( 0, dimension, 0 ),
-			new Vector3( 0.05 * dimension, dimension * 0.95, 0 )
-		], scene );
-		axisY.color = new Color3( 0, 1, 0 );
-		const yChar = makeTextPlane( 'Y', 'green', dimension / 10 );
-		yChar.position = new Vector3( 0, 0.9 * dimension, -0.05 * dimension );
-		const axisZ = Mesh.CreateLines( 'axisZ', [
-			Vector3.Zero(),
-			new Vector3( 0, 0, dimension ),
-			new Vector3( 0, -0.05 * dimension, dimension * 0.95 ),
-			new Vector3( 0, 0, dimension ),
-			new Vector3( 0, 0.05 * dimension, dimension * 0.95 )
-		], scene );
-		axisZ.color = new Color3( 0, 0, 1 );
-		const zChar = makeTextPlane( 'Z', 'blue', dimension / 10 );
-		zChar.position = new Vector3( 0, 0.05 * dimension, 0.9 * dimension );
-	}
-
 	/**
 	 * @emits {@link Event.SCENE_PROCESSING_START}
 	 * @emits {@link Event.SCENE_PROCESSING_END}
@@ -453,6 +393,9 @@ export class Viewer extends EventBroadcaster {
 		this._sceneManager = await SceneManager.create( scene );
 		this._animationManager = await AnimationManager.create( scene );
 		this.broadcastEvent( Event.SCENE_PROCESSING_END, scene );
+		engine.runRenderLoop( () => {
+			scene.render();
+		} );
 		return scene;
 	}