@combeenation/3d-viewer 3.0.0-rc2 → 4.0.0-alpha6

package/src/assets/bike/setup.json

@@ -1,11 +0,0 @@
-{
-	"instances": [
-		{
-			"name": "my_complete_bike",
-			"variant": "complete",
-			"parameters": {
-				"visible": true
-			}
-		}
-	]
-}

package/src/assets/ctrls-helper.ts

@@ -1,89 +0,0 @@
-/**
- * Remove the `#dummy-div` and clear `textContent` or `#ctrls-panel` if it has no childs.
- *
- * Not sure why we really need this `#dummy-div` in the first place but without it flex box wasn't behaving the way I
- * wanted it to 🤷‍♂️
- *
- * Without clearing `textContent`, the `:empty` rule of the `#ctrls-panel` wouldn't work when no controls were added...
- */
-export function cleanUpCtrlsPanel() {
-  const dummyDiv = document.querySelector( '#dummy-div' );
-  if( dummyDiv && dummyDiv.parentNode ) {
-    dummyDiv.parentNode.removeChild( dummyDiv );
-  }
-  const ctrlsPanel = document.querySelector( '#ctrls-panel' );
-  if( !ctrlsPanel || !ctrlsPanel.children.length ) {
-    ctrlsPanel!.textContent = '';
-  }
-}
-
-/**
- * @param name
- * @param text
- * @param clickListener
- */
-export function createButton( name: string, text: string, clickListener: CallableFunction ) {
-  let btn = document.createElement( 'button' );
-  btn.type = 'button';
-  btn.id = name;
-  btn.textContent = text;
-  btn.onclick = () => clickListener();
-
-  let ctrlsPanel = window.document.querySelector( '#controls' );
-  if( ctrlsPanel ) {
-    ctrlsPanel.appendChild( btn );
-  }
-}
-
-/**
- *
- * @param name
- * @param text
- * @param options
- * @param changeListener
- */
-export function createCombobox( name: string, text: string, options: { [name: string]: string }, changeListener: CallableFunction ) {
-  let label = document.createElement( 'label' );
-  label.htmlFor = name;
-  label.textContent = text;
-  label.className = 'combobox'
-
-  let cbox = document.createElement( 'select' );
-  cbox.id = name;
-  cbox.onchange = () => changeListener( cbox.value );
-
-  for( const key in options ) {
-    cbox.add( new Option( options[key], key ) );
-  }
-
-  let ctrlsPanel = window.document.querySelector( '#controls' );
-  if( ctrlsPanel ) {
-    ctrlsPanel.append( label, cbox );
-  }
-}
-
-/**
- * @param {string} name
- * @param {string} text
- * @param {boolean} value
- * @param {CheckBoxChangeCb} changeListener
- */
-export function createCheckbox(name: string, text: string, value: any, changeListener: any) {
-  let container = document.createElement('div');
-  container.className = 'toggle';
-
-  let label = document.createElement('label');
-  label.htmlFor = name;
-  label.textContent = text;
-
-  let cbox = document.createElement('input');
-  cbox.id = name;
-  cbox.checked = value;
-  cbox.type = 'checkbox';
-  cbox.onchange = () => changeListener(cbox.checked);
-
-  container?.append(cbox, label);
-
-  let ctrlsPanel = window.document.querySelector('#controls');
-  ctrlsPanel?.append(container);
-}

package/src/assets/cube/cube.ts

@@ -1,42 +0,0 @@
-import { scene } from './scene'
-import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform';
-
-
-export const spec: StructureJson = {
-	scene: scene,
-	setup: {
-		instances: [
-			{
-				name: 'My Cube',
-				variant: 'My Cube',
-				parameters: {
-					visible: true,
-					rotation: '(-20, 20, -10)',
-					scaling: '( 1, 1, 2 )',
-				},
-			},
-		],
-	},
-	variants: {
-		'My Cube': {
-			glTF: '/assets/cube/testCylinderUVs.glb',
-			parameters: {},
-			elements: {
-				'Plotting Board': {
-					paths: {
-						include: ['__root__.testCylinder'],
-					},
-					paintables: {
-						'Board': {
-							path: '__root__.testCylinder',
-							textureOptions: 512,
-						},
-					},
-				},
-				/*
-				'Whole Cube': ['__root__.Root.subnet1.box1']
-				*/
-			},
-		},
-	},
-};

package/src/assets/cube/scene.ts

@@ -1,83 +0,0 @@
-export const scene: SceneJson = {
-	meshPicking: true,
-	parameters: {
-		environment: '/assets/cube/10%20environment.env',
-		'environment.rotation': 180,
-	},
-	engine: {
-		antialiasing: true,
-		options: {
-			//preserveDrawingBuffer: true,
-			//stencil: true,
-		},
-	},
-	scene: {
-		globals: {
-			shadows: {
-				enabled: true,
-				type: 'contact',
-				settings: [],
-				generator: [],
-				receiver: [],
-			},
-			//aa: 'fxaa',
-			'tone-mapping': true,
-			'camera-settings': {
-				contrast: 1,
-				exposure: 1.0,
-				bloom: {
-					enabled: false,
-				},
-				dof: {
-					enabled: false,
-					settings: {
-						dof_threshold: 1,
-						dof_gain: 1,
-					},
-				},
-				sharpen: {
-					enabled: false,
-					settings: {},
-				},
-			},
-		},
-		lights: {
-			default: {
-				type: 'hemispheric',
-			},
-		},
-		cameras: {
-			'first-camera': {
-				type: 'arc',
-				active: true,
-				fov: 45,
-				target: '(0, 0, 0)',
-			},
-		},
-	},
-	placements: {
-		'my fancy placement': {
-			//alpha: 2,
-			//beta: 4,
-			//radius: 60,
-			position: '(-0.24968802207216673, -59.99700063013537, 0.5455669732317799)',
-		},
-		'my second placement': {
-			radius: 160,
-			beta: 2,
-		},
-		'third': {
-			target: '(0, 30, 0)',
-		}
-	},
-	animations: {
-		'my fancy animation': {
-			ease: 'power2.inOut',
-			duration: 3,
-		},
-		'my second animation': {
-			ease: 'elastic.inOut',
-			duration: 2,
-		}
-	}
-};

package/src/assets/hoferkerzen/index.json

@@ -1,9 +0,0 @@
-{
-	"scene": "/assets/scene.json",
-	"variants": {
-		"variant_kgl":{
-			"file": "/assets/hoferkerzen/variant_kgl.json"
-		}
-	},
-	"setup": "/assets/hoferkerzen/setup.json"
-}

package/src/assets/hoferkerzen/setup.json

@@ -1,11 +0,0 @@
-{
-	"instances": [
-		{
-			"name": "my_kgl_hoferkerze",
-			"variant": "variant_kgl",
-			"parameters": {
-				"visible": true
-			}
-		}
-	]
-}

package/src/assets/hoferkerzen/variant_kgl.json

@@ -1,41 +0,0 @@
-{
-	"glTF": {
-		"rootUrl": "assets/hoferkerzen/",
-		"fileName": "hoferkerzen.glb"
-	},
-	"elements": {
-		"Kappe": {
-			"paths": {
-				"include": [
-					"__root__.RootNode.KGL_capMetal"
-				]
-			}
-		},
-		"Docht": {
-			"paths": {
-				"include": [
-					"__root__.RootNode.KGL_docht",
-					"__root__.RootNode.KGL_docht1"
-				]
-			}
-		},
-		"Wachs": {
-			"paths": {
-				"include": [
-					"__root__.RootNode.KGL_wax_sides",
-					"__root__.RootNode.KGL_wax_top"
-				]
-			},
-			"paintables": {
-				"my_paintable": {
-					"path": "__root__.RootNode.KGL_wax_sides",
-					"textureOptions": 512
-				}
-			}
-		}
-	},
-	"parameters": {
-		"highlight.enabled": true,
-		"highlight.color": "(0,255,255)"
-	}
-}

package/src/assets/husqvarna-instanced-meshes/main.ts

@@ -1,108 +0,0 @@
-import { Emitter, Event, Parameter } from 'index';
-import { merge, set } from 'lodash-es';
-import { createButton, createCombobox } from '../ctrls-helper';
-
-export function createSpec(): StructureJson {
-	return {
-		scene: {
-			parameters: {
-				environment: 'assets/husqvarna-instanced-meshes/husqvarna.env',
-			},
-			engine: {
-				antialiasing: true,
-				options: {
-					preserveDrawingBuffer: true,
-					stencil: true,
-				},
-			},
-			scene: {
-				globals: {},
-				lights: {},
-				cameras: {},
-			},
-			meshPicking: true,
-		},
-		setup: {
-			instances: [
-				{
-					name: 'BikeInstance',
-					variant: 'Bike',
-					lazy: false,
-					parameters: {
-						visible: true,
-						// scaling: '( 1, 1, -1 )',
-						// position: '( 0, 0, 0 )',
-						// rotation: '( 0, 0, 0 )',
-					},
-				},
-			],
-		},
-		variants: {
-			Bike: {
-				glTF: 'assets/husqvarna-instanced-meshes/husqvarna.glb',
-				parameters: {
-					[`BackSpoiler.${Parameter.MATERIAL_COLOR}`]: '#FF0000',
-					[`SidePartsOrig.${Parameter.MATERIAL_COLOR}`]: '#FF0000',
-				},
-				elements: {
-					Base: {
-						paths: {
-							include: [
-								'__root__',
-							],
-							exclude: [
-								'__root__.Husqvarna.Husqvarna_primitive1',
-								'__root__.Husqvarna.Husqvarna_primitive2',
-								'__root__.Husqvarna.Husqvarna_primitive4',
-								'__root__.Husqvarna.Husqvarna_primitive2_linked',
-								'__root__.Husqvarna.Husqvarna_primitive4_linked',
-							],
-						},
-					},
-					/*
-					BackSpoiler: ['__root__.Husqvarna.Husqvarna_primitive1'],
-					SidePartsOrig: [
-						'__root__.Husqvarna.Husqvarna_primitive2',
-						'__root__.Husqvarna.Husqvarna_primitive4',
-					],
-					*/
-					SidePartsLinked: [
-						'__root__.Husqvarna.Husqvarna_primitive2_linked',
-						'__root__.Husqvarna.Husqvarna_primitive4_linked',
-					],
-				},
-			},
-		},
-	};
-}
-
-export async function createUIelements( viewer: Viewer ) {
-	const instanceNames = merge(
-		viewer.variantInstances.all.map( instance => instance.name ),
-		viewer.variantInstances.allDefinitions.map( definition => definition.name ),
-	);
-	const options = {};
-	for ( const instanceName of instanceNames ) {
-		set(options, instanceName, instanceName);
-	}
-	createCombobox(
-		'SelectInstanceCb',
-		'🔧',
-		options,
-		(name: string) => _showInstance(viewer, name)
-	);
-	// createButton('demo', '💡 Demo', () => console.info(' --- Button clicked. ---'))
-}
-
-/**
- * @param {Viewer} viewer
- * @param {String} instance
- */
-async function _showInstance( viewer: Viewer, instance: string ): Promise<VariantInstance> {
-	return await viewer.variantInstances.show( instance, true );
-}
-
-Emitter.on(Event.BOOTSTRAP_END, async viewer => {
-	//viewer.autofocusActiveCamera();
-	//await viewer.enableDebugLayer();
-});

package/src/assets/index.html

@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8"/>
-
-	<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
-	<style>
-		html,
-		body {
-			width: 100%;
-			height: 100%;
-			padding: 0;
-			margin: 0;
-			overflow: hidden;
-			font-family: monospace;
-		}
-
-		#controls {
-			position: absolute;
-			background: #2A2342;
-			width: 100%;
-			height: 30px;
-			padding: 10px 10px 10px 10px;
-			display: flex;
-			z-index: 1000;
-		}
-
-		#templates {
-			display: none;
-		}
-
-		#html-overlay {
-			position: absolute;
-		}
-
-		#loading {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			background-color: #201936;
-			color: white;
-			font-weight: bold;
-			font-size: 40pt;
-		}
-
-		#loading div {
-			position: relative;
-			top: 50%;
-			text-align: center;
-		}
-
-		#display-container {
-			background: #201936;
-			padding: 10px;
-			height: 100%;
-		}
-
-		#babylon-canvas {
-			width: 100%;
-			height: 100%;
-		}
-
-		#html-overlay {
-			padding: 5px;
-			background: #454545;
-			color: white;
-		}
-
-		#logo {
-			position: absolute;
-			right: 30px;
-			width: 120px;
-			height: 40px;
-		}
-
-		button, select {
-			float: left;
-			padding: 3px;
-			margin: 3px;
-			cursor: pointer;
-			background: #fff;
-			border: none;
-			box-shadow: none;
-		}
-
-		/* Checkbox Label Toggles */
-		.toggle [type=checkbox] {
-			display: none;
-		}
-		.toggle label {
-			display: inline-block;
-			margin: .2rem 0 0 .5rem;
-			padding: .3rem 1rem .3rem;
-			color: #fff;
-		}
-		.toggle [type=checkbox]:checked ~ label {
-			background-color: green;
-		}
-
-		label.combobox {
-			font-size: 1.5rem;
-		}
-
-		.animate {
-			transform: rotate(45deg);
-			animation-duration: 3000ms;
-			animation-name: move;
-			animation-iteration-count: infinite;
-		}
-
-		@keyframes move{
-			0% {
-				transform: rotate(-22deg);
-			}
-			50%{
-				transform: rotate(22deg);
-			}
-			100% {
-				transform: rotate(-22deg);
-			}}
-	</style>
-
-</head>
-<body>
-
-<div id="loading">
-	<div class="animate">⏳</div>
-</div>
-
-<div id="templates">
-	<pre id="html-overlay">ELEMENT</pre>
-</div>
-
-<div id="controls">
-	<div id="logo"><img id="logoImg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160.63 40.18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23d5d2ca;%7D.cls-2%7Bfill:%23fff;%7D.cls-3%7Bfill:%23e0684b;%7D.cls-4%7Bfill:%23bb464b;%7D.cls-5%7Bfill:%23e0ded8;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EBabylonIdentity%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Page_Elements' data-name='Page Elements'%3E%3Cpath class='cls-1' d='M41.27,10h3.41v7.65c.61-1,1.82-2,4.21-2,3.74,0,5.78,3.08,5.78,7.13s-2.12,7.68-6.16,7.68c-2.15,0-3.17-.72-3.85-1.85a11.47,11.47,0,0,1-.14,1.52H41.24c0-1.55,0-3.11,0-4.68Zm6.63,8.42c-2.47,0-3.38,1.65-3.38,4.68,0,2.59.8,4.59,3.33,4.59,2.14,0,3.33-1.92,3.33-4.84C51.18,20.27,50.13,18.43,47.9,18.43Z'/%3E%3Cpath class='cls-1' d='M68.59,26.66a26.61,26.61,0,0,0,.2,3.47H65.51a7.37,7.37,0,0,1-.22-1.55c-.49.86-1.51,1.88-4.1,1.88-3.38,0-4.81-2.23-4.81-4.41,0-3.19,2.56-4.67,6.71-4.67h2.15v-1c0-1.1-.36-2.25-2.48-2.25-1.87,0-2.26.85-2.45,1.89H57c.19-2.31,1.65-4.43,5.86-4.4,3.68,0,5.69,1.49,5.69,4.79Zm-3.33-3.14H63.42c-2.5,0-3.6.74-3.6,2.34A2,2,0,0,0,62.1,28c2.81,0,3.16-1.92,3.16-4Z'/%3E%3Cpath class='cls-1' d='M71.67,10h3.42v7.65c.6-1,1.81-2,4.21-2,3.74,0,5.77,3.08,5.77,7.13S83,30.46,78.91,30.46c-2.15,0-3.16-.72-3.85-1.85a10,10,0,0,1-.14,1.52H71.65c0-1.55,0-3.11,0-4.68Zm6.64,8.42c-2.48,0-3.39,1.65-3.39,4.68,0,2.59.8,4.59,3.33,4.59,2.15,0,3.33-1.92,3.33-4.84C81.58,20.27,80.53,18.43,78.31,18.43Z'/%3E%3Cpath class='cls-1' d='M89.37,16c1.76,5.53,3,9.66,3.3,11h0c.35-1.49,1.23-4.68,3.13-11h3.41L94.37,30.62c-1.37,4.1-2.47,5.26-5.69,5.26A15.34,15.34,0,0,1,87,35.77V33c.3,0,.71,0,1.07,0,1.54,0,2.25-.57,2.89-2.42L85.71,16Z'/%3E%3Cpath class='cls-1' d='M100.76,30.13V10h3.41V30.13Z'/%3E%3Cpath class='cls-1' d='M120.32,23c0,4.21-2.48,7.43-6.91,7.43s-6.79-3.14-6.79-7.38,2.56-7.43,7-7.43C117.68,15.65,120.32,18.6,120.32,23Zm-10.23,0c0,2.87,1.29,4.68,3.41,4.68s3.33-1.79,3.33-4.65c0-3-1.19-4.7-3.39-4.7S110.09,20,110.09,23.05Z'/%3E%3Cpath class='cls-1' d='M122.8,19.53c0-1.21,0-2.47,0-3.55h3.3a15.77,15.77,0,0,1,.14,2,4.32,4.32,0,0,1,4.21-2.31c2.78,0,4.7,1.82,4.7,5.45v9h-3.41V21.49c0-1.77-.63-3-2.5-3s-3,1.29-3,3.91v7.76H122.8Z'/%3E%3Cpath class='cls-1' d='M138.37,30.13V25.56H142v4.57Z'/%3E%3Cpath class='cls-1' d='M147.67,16.28V30.87c0,3.77-.91,5-3.6,5-.11,0-.66,0-.86,0V34.2c.2,0,.42,0,.58,0,1.84,0,2-1,2-3.08V16.28Zm-1.84-3.57V9.87h1.84v2.84Z'/%3E%3Cpath class='cls-1' d='M151.85,26.25a3.45,3.45,0,0,0,3.69,2.66c2.26,0,3.16-1,3.16-2.44s-.63-2.15-3.52-2.84c-3.77-.91-4.62-2.06-4.62-3.91S152,16,155.32,16s4.81,2,5,3.94h-1.81a3,3,0,0,0-3.28-2.39c-2.2,0-2.83,1.07-2.83,2.09s.61,1.73,3.25,2.36c4,1,4.95,2.31,4.95,4.38,0,2.47-2,4.13-5.15,4.13-3.35,0-5.11-1.74-5.47-4.21Z'/%3E%3Cpolygon class='cls-2' points='17.4 0 0 10.04 0 30.13 17.4 40.18 34.8 30.13 34.8 10.04 17.4 0'/%3E%3Cpolygon class='cls-3' points='34.8 10.04 29.35 6.9 24.11 9.93 29.56 13.07 34.8 10.04'/%3E%3Cpolygon class='cls-3' points='5.24 13.07 22.64 3.02 17.4 0 0 10.04 5.24 13.07'/%3E%3Cpolygon class='cls-3' points='11.95 23.23 17.4 26.38 22.84 23.23 17.4 20.09 11.95 23.23'/%3E%3Cpolygon class='cls-4' points='29.56 13.07 29.56 27.11 17.4 34.13 5.24 27.11 5.24 13.07 0 10.04 0 30.13 17.4 40.18 34.8 30.13 34.8 10.04 29.56 13.07'/%3E%3Cpolygon class='cls-4' points='17.4 13.8 11.95 16.95 11.95 23.23 17.4 20.09 22.84 23.23 22.84 16.95 17.4 13.8'/%3E%3Cpolygon class='cls-5' points='29.56 13.07 22.84 16.95 22.84 23.23 17.4 26.38 17.4 34.13 29.56 27.11 29.56 13.07'/%3E%3Cpolygon class='cls-1' points='5.24 13.07 11.95 16.95 11.95 23.23 17.4 26.38 17.4 34.13 5.24 27.11 5.24 13.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"></div>
-</div>
-
-<div id="display-container">
-	<div id="interaction"></div>
-	<canvas id="babylon-canvas"></canvas>
-</div>
-
-</body>
-</html>

package/src/assets/index.json

@@ -1,9 +0,0 @@
-{
-	"scene": "/assets/scene.json",
-	"variants": {
-		"mova":{
-			"file": "/assets/mova.json"
-		}
-	},
-	"setup": "/assets/setup.json"
-}

package/src/assets/linkeddups/spec.ts

@@ -1,32 +0,0 @@
-export const spec: StructureJson = {
-	scene: {
-		engine: {
-			antialiasing: true,
-		},
-		scene: {
-			globals: {},
-			lights: {},
-			cameras: {},
-		},
-	},
-	setup: {
-		instances: [
-			{
-				name: 'Example Instances',
-				variant: 'example instances',
-				lazy: false,
-				parameters: {
-					visible: true
-				},
-			},
-		],
-	},
-	variants: {
-		'example instances': {
-			glTF: 'assets/linkeddups/example_2_instances.glb',
-			elements: {
-				Root: ['__root__']
-			},
-		},
-	},
-};