@needle-tools/engine 2.34.0-pre → 2.35.0-pre

package/src/engine/engine_setup.ts

@@ -1,6 +1,5 @@
 import { DepthTexture, PerspectiveCamera, WebGLRenderer, WebGLRenderTarget } from 'three'
 import * as THREE from 'three'
-import { Behaviour, Component, GameObject } from '../engine-components/Component';
 import { Input } from './engine_input';
 import { Physics } from './engine_physics';
 import { Time } from './engine_time';
@@ -10,8 +9,6 @@ import { beginListenDestroy, beginListenInstantiate } from './engine_networking_
 import * as looputils from './engine_mainloop_utils';
 import * as utils from "./engine_utils";
 
-import { Camera, createCameraWithOrbitControl } from '../engine-components/Camera';
-
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
 
@@ -21,23 +18,27 @@ import { AssetDatabase } from './engine_assetdatabase';
 import { logHierarchy } from './engine_three_utils';
 
 import * as Stats from 'three/examples/jsm/libs/stats.module';
-import { Light } from '../engine-components/Light';
 import { RendererData } from './engine_rendererdata';
 import { Addressables } from './engine_addressables';
 import { Application } from './engine_application';
 import { LightDataRegistry, ILightDataRegistry } from './engine_lightdata';
 import { PlayerViewManager } from './engine_playerview';
 
+import { ICamera as Camera, IComponent, ILight as Light } from "./engine_types"
+import { destroy } from './engine_gameobject';
+
 
 const debug = utils.getParam("debugSetup");
 const stats = utils.getParam("stats");
 
+
+
 // this is where functions that setup unity scenes will be pushed into
 // those will be accessed from our custom html element to load them into their context
 export const build_scene_functions: { [name: string]: (context: Context) => Promise<void> } = {};
 
 declare type CoroutineData = {
-	comp: Component,
+	comp: IComponent,
 	main: Generator,
 	chained?: Array<Generator>
 }
@@ -79,6 +80,15 @@ export enum XRSessionMode {
 
 export declare type OnBeforeRenderCallback = (renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, geometry: THREE.BufferGeometry, material: THREE.Material, group: THREE.Group) => void
 
+
+export function registerComponent(script : IComponent, context?: Context) {
+    if (!script) return;
+    const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
+    if (!new_scripts.includes(script)) {
+        new_scripts.push(script);
+    }
+}
+
 export class Context {
 
 	private static _current: Context;
@@ -128,14 +138,14 @@ export class Context {
 	composer: EffectComposer | null = null;
 
 	// all scripts
-	scripts: Behaviour[] = [];
+	scripts: IComponent[] = [];
 	// scripts with update event
-	scripts_earlyUpdate: Behaviour[] = [];
-	scripts_update: Behaviour[] = [];
-	scripts_lateUpdate: Behaviour[] = [];
-	scripts_onBeforeRender: Behaviour[] = [];
-	scripts_onAfterRender: Behaviour[] = [];
-	scripts_WithCorroutines: Component[] = [];
+	scripts_earlyUpdate: IComponent[] = [];
+	scripts_update: IComponent[] = [];
+	scripts_lateUpdate: IComponent[] = [];
+	scripts_onBeforeRender: IComponent[] = [];
+	scripts_onAfterRender: IComponent[] = [];
+	scripts_WithCorroutines: IComponent[] = [];
 	coroutines: { [FrameEvent: number]: Array<CoroutineData> } = {}
 
 	get mainCamera(): THREE.Camera | null {
@@ -154,8 +164,8 @@ export class Context {
 	pre_render_callbacks: Function[] = [];
 	post_render_callbacks: Function[] = [];
 
-	new_scripts: Behaviour[] = [];
-	new_script_start: Component[] = [];
+	new_scripts: IComponent[] = [];
+	new_script_start: IComponent[] = [];
 	new_scripts_pre_setup_callbacks: Function[] = [];
 	new_scripts_post_setup_callbacks: Function[] = [];
 
@@ -273,7 +283,7 @@ export class Context {
 	onDestroy() {
 		if (!this._isCreated) return;
 		this._isCreated = false;
-		GameObject.destroy(this.scene, true);
+		destroy(this.scene, true);
 		this.renderer?.setAnimationLoop(null);
 		if (!this.isManagedExternally) {
 			this.renderer?.dispose();
@@ -281,7 +291,7 @@ export class Context {
 
 	}
 
-	registerCoroutineUpdate(script: Component, coroutine: Generator, evt: FrameEvent): Generator {
+	registerCoroutineUpdate(script: IComponent, coroutine: Generator, evt: FrameEvent): Generator {
 		if (!this.coroutines[evt]) this.coroutines[evt] = [];
 		this.coroutines[evt].push({ comp: script, main: coroutine });
 		return coroutine;
@@ -293,7 +303,7 @@ export class Context {
 		if (idx >= 0) this.coroutines[evt].splice(idx, 1);
 	}
 
-	stopAllCoroutinesFrom(script: Component) {
+	stopAllCoroutinesFrom(script: IComponent) {
 		for (const evt in this.coroutines) {
 			const rout: CoroutineData[] = this.coroutines[evt];
 			for (let i = rout.length - 1; i >= 0; i--) {
@@ -446,30 +456,34 @@ export class Context {
 		}
 
 		if (!this.mainCamera) {
-			Context._current = this;
-			const cams = GameObject.findObjectsOfType(Camera, this);
-			// get main camera, fallback to first camera
-			const mc: Camera = cams.find(c => c.tag == "MainCamera") ?? cams.find(_ => true) as Camera;
-			if (mc) {
-				if (mc.tag !== "MainCamera")
-					console.warn("No mainCamera configured. Some components rely on a mainCamera object being present. " +
-						"When exporting your scene, make sure to set the mainCamera tag on your camera. Using \"" + mc.name + "\" as mainCamera now.");
-				this.setCurrentCamera(mc);
-			}
-			else {
-				console.error("No camera found");
-				const cam = createCameraWithOrbitControl(this.scene);
-				this.setCurrentCamera(cam);
-			}
+			// console.error("MISSING camera", this);
+			// return;
+			// Context._current = this;
+			// //@ts-ignore
+			// const cams = findObjectsOfType(Camera, this);
+			// console.log(cams);
+			// // get main camera, fallback to first camera
+			// const mc: Camera = cams.find(c => c.tag == "MainCamera") ?? cams.find(_ => true) as Camera;
+			// if (mc) {
+			// 	if (mc.tag !== "MainCamera")
+			// 		console.warn("No mainCamera configured. Some components rely on a mainCamera object being present. " +
+			// 			"When exporting your scene, make sure to set the mainCamera tag on your camera. Using \"" + mc.name + "\" as mainCamera now.");
+			// 	this.setCurrentCamera(mc);
+			// }
+			// else {
+			// 	console.error("No camera found");
+			// 	const cam = createCameraWithOrbitControl(this.scene);
+			// 	this.setCurrentCamera(cam);
+			// }
 		}
 
 		Context._current = this;
 		looputils.processNewScripts(this);
 
-		const mainCam = this.mainCameraComponent as Camera;
-		if (mainCam) {
-			mainCam.applyClearFlagsIfIsActiveCamera();
-		}
+		// const mainCam = this.mainCameraComponent as Camera;
+		// if (mainCam) {
+		// 	mainCam.applyClearFlagsIfIsActiveCamera();
+		// }
 
 		if (!this.isManagedExternally && this.composer && this.mainCamera) {
 			const renderPass = new RenderPass(this.scene, this.mainCamera);
@@ -544,7 +558,7 @@ export class Context {
 			}
 		}
 
-		this.mainLight = null;
+		// this.mainLight = null;
 		this.executeCoroutines(FrameEvent.LateUpdate);
 
 		try {

package/src/engine/engine_three_utils.ts

@@ -42,14 +42,6 @@ const _worldPositions = new CircularBuffer(() => new THREE.Vector3(), 100);
 
 
 
-THREE.Vector3.prototype["slerp"] = function (end: Vector3, t: number) {
-    const len1 = this.length();
-    const len2 = end.length();
-    const targetLen = Mathf.lerp(len1, len2, t);
-    return this.lerp(end, t).normalize().multiplyScalar(targetLen);
-}
-
-
 
 export function getWorldPosition(obj: THREE.Object3D, vec: THREE.Vector3 | null = null, updateParents: boolean = true): THREE.Vector3 {
     const wp = vec ?? _worldPositions.get();

package/src/engine/engine_types.ts

@@ -0,0 +1,180 @@
+import { Camera, Color, Material, Object3D, Vector3 } from "three";
+import { Body, ContactEquation } from "cannon-es";
+import { RGBAColor } from "../engine-components/js-extensions/RGBAColor";
+
+/** used to find data registered via gltf files e.g. find lightmaps for a Renderer component that were shipped inside a gltf */
+export declare type SourceIdentifier = string;
+
+// TODO: figure out what is best here!
+// https://stackoverflow.com/a/67229348
+// https://stackoverflow.com/questions/36886082/abstract-constructor-type-in-typescript
+// type Constructor<T> = Function & { prototype: T } // << this includes abstract constructor types
+export type Constructor<T> = abstract new (...args: any[]) => T; // abstract to support @serializable and also getComponent with abstract types
+export type ConstructorConcrete<T> = new (...args: any[]) => T;
+export type GuidsMap = { [key: string]: string };
+
+export interface UIDProvider {
+    seed: number;
+    generateUUID(): string;
+}
+
+
+
+export declare interface IGameObject extends Object3D {
+    guid: string | undefined;
+}
+
+export interface IComponent {
+    get isComponent(): boolean;
+
+    gameObject: IGameObject;
+    guid: string;
+    enabled: boolean;
+    sourceId?: SourceIdentifier;
+
+    get name(): string;
+    get layer(): number;
+    get destroyed(): boolean;
+    
+    context: any;
+
+    get activeAndEnabled(): boolean;
+
+    __internalNewInstanceCreated();
+    __internalAwake();
+    __internalStart();
+    __internalEnable();
+    __internalDisable();
+    __internalDestroy();
+    resolveGuids?(guidsMap: GuidsMap): void;
+
+    awake();
+    onEnable();
+    onDisable();
+    onDestroy();
+
+    start?(): void;
+    // available update loop events:
+    // earlyUpdate, update, lateUpdate, onBeforeRender, onAfterRender
+    earlyUpdate?(): void;
+    update?(): void;
+    lateUpdate?(): void;
+    onBeforeRender?(frame: THREE.XRFrame | null): void;
+    onAfterRender?(): void;
+
+    onCollisionEnter?(col: Collision);
+    onCollisionExit?(col: Collision);
+    onCollisionExitRaw?(col: Collision);
+    onCollisionStay?(col: Collision);
+
+    onTriggerEnter?(col: Collision);
+    onTriggerStay?(col: Collision);
+    onTriggerExit?(col: Collision);
+
+    __internalHandleCollision(col: Collision, isTriggerCollision: boolean);
+    __internalHandleExitCollisionEvent(obj: Object3D, isTriggerCollision: boolean);
+}
+
+
+export declare interface ICamera extends IComponent {
+    applyClearFlagsIfIsActiveCamera(): unknown;
+    buildCamera();
+    get cam(): Camera;
+    nearClipPlane: number;
+    farClipPlane: number;
+    backgroundColor: RGBAColor | null;
+    clearFlags: number;
+    aspect: number;
+    fieldOfView: number;
+}
+
+export declare interface ILight extends IComponent {
+    intensity: number;
+    color: Color;
+}
+
+export declare interface IRenderer extends IComponent {
+    material: Material;
+}
+
+export declare interface ICollider extends IComponent {
+    get isCollider();
+    attachedRigidbody: IRigidbody;
+    isTrigger: boolean;
+}
+
+export declare interface IRigidbody extends IComponent {
+    initialize(): void;
+    body;
+}
+
+
+
+
+
+
+
+export const $physicsKey = Symbol("object");
+
+export declare type CannonCollision = {
+    body: Body;
+    contact: ContactEquation;
+    target: Body;
+    type: string;
+}
+
+export class Collision {
+
+    get __internalCollision(): CannonCollision {
+        return this.collision;
+    }
+
+    get __internalInvertedSourceReceiver(): boolean {
+        return this.invert;
+    }
+
+    private readonly invert: boolean;
+    private readonly collision: CannonCollision;
+    private readonly targetBody: Body;
+
+    readonly me: Object3D;
+
+    private _normal?: Vector3;
+    get normal(): Vector3 {
+        if (!this._normal) {
+            const vec = this.collision.contact.ni;
+            this._normal = new Vector3(vec.x, vec.y, vec.z);
+        }
+        return this._normal;
+    }
+
+    private _collider?: ICollider;
+    get collider(): ICollider {
+        if (!this._collider) {
+            //@ts-ignore
+            this._collider = getComponentInChildren(this.gameObject, Collider) as ICollider;
+        }
+        return this._collider;
+    }
+
+    get gameObject(): Object3D {
+        return this.targetBody[$physicsKey];
+    }
+
+    // private _point?: Vector3;
+    // get point(): Vector3 {
+    //     if (!this._point) {
+    //         const c = this.collision.contact;
+    //         const point = c.bi.position.clone().vadd(c.ri);
+    //         this._point = new Vector3(point.x, point.y, point.z);
+    //     }
+    //     return this._point;
+    // }
+
+    constructor(obj: Object3D, collision: CannonCollision, invert: boolean = false) {
+        this.invert = invert;
+        this.me = obj;
+        this.collision = collision;
+        this.targetBody = this.invert ? collision.target : collision.body;
+    }
+}

package/src/engine/engine_utils.ts

@@ -1,7 +1,5 @@
-
-
 // use for typesafe interface method calls
-import { SourceIdentifier } from "./engine_gltf";
+import { SourceIdentifier } from "./engine_types";
 
 // https://schneidenbach.gitbooks.io/typescript-cookbook/content/nameof-operator.html
 export const nameofFactory = <T>() => (name: keyof T) => name;

package/src/engine/extensions/NEEDLE_components.ts

@@ -1,11 +1,11 @@
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
 import { NodeToObjectMap, ObjectToNodeMap, SerializationContext } from "../engine_serialization_core";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import { writeBuiltinComponentData } from "../engine_gltf_builtin_components";
 import { debugExtension } from "../engine_default_parameters";
 import { builtinComponentKeyName } from "../engine_constants";
 import { resolveReferences } from "./extension_utils";
 import { apply } from "../../engine-components/js-extensions/Object3D";
+import { getLoader } from "../engine_gltf";
 
 export const debug = debugExtension
 const componentsArrayExportKey = "$___Export_Components";
@@ -128,7 +128,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
             const serializedComponentData: Array<object | null> = [];
             for (const comp of components) {
                 this.context.target = comp;
-                const res = writeBuiltinComponentData(comp, this.context);
+                const res = getLoader().writeBuiltinComponentData(comp, this.context);
                 if (res !== null) {
                     serializedComponentData.push(res);
                     // (comp as unknown as ISerializationCallbackReceiver)?.onAfterSerialize?.call(comp);

package/src/engine/extensions/NEEDLE_deferred_texture.ts

@@ -1,6 +1,6 @@
 import { Material, Texture, TextureLoader } from "three";
 import { GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
 import { Context } from "../engine_setup";
 import { addDracoAndKTX2Loaders } from "../engine_loaders";
 import { getParam, getPath } from "../engine_utils";

package/src/engine/extensions/NEEDLE_lighting_settings.ts

@@ -1,6 +1,6 @@
 import { AmbientLight, Color, HemisphereLight } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
 import { Behaviour, GameObject } from "../../engine-components/Component";
 import { AmbientMode, DefaultReflectionMode } from "../engine_rendererdata";
 import { LightmapType } from "./NEEDLE_lightmaps";

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -1,7 +1,7 @@
 import { ILightDataRegistry } from "../engine_lightdata";
 import { FloatType, HalfFloatType, sRGBEncoding, Texture } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
 import { resolveReferences } from "./extension_utils";
 import { getParam } from "../engine_utils";
 

package/src/engine/extensions/NEEDLE_render_objects.ts

@@ -1,8 +1,8 @@
 
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
-import { Behaviour } from "../../engine-components/Component";
-import { Renderer } from "../../engine-components/Renderer";
+import { IComponent as Component, IRenderer as Renderer } from "../engine_types";
+
 import {
     // stencil funcs
     NeverStencilFunc,
@@ -27,7 +27,7 @@ import { getParam } from "../engine_utils";
 
 const debug = getParam("debugstencil");
 
-function matchesLayer(stencilLayer: number, comp: Behaviour): boolean {
+function matchesLayer(stencilLayer: number, comp: Component): boolean {
     return (stencilLayer & 1 << comp.layer) != 0;
 }
 

package/src/engine/extensions/NEEDLE_techniques_webgl.ts

@@ -5,8 +5,9 @@ import { IUniform, RawShaderMaterial, Vector4 } from 'three';
 import { Context } from '../engine_setup';
 import { getParam } from "../engine_utils";
 import * as SHADERDATA from "../shaders/shaderData"
-import { Light } from "../../engine-components/Light";
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
+import { ILight } from "../engine_types";
+import { getWorldPosition } from "../engine_three_utils";
 
 const debug = getParam("debugshaders");
 
@@ -203,10 +204,10 @@ export class CustomShader extends RawShaderMaterial {
             this.uniforms["_TimeParameters"].value = context.rendererData.timeVec4;
         }
 
-        const mainLight: Light | null = context?.mainLight;
+        const mainLight: ILight | null = context.mainLight;
         if (mainLight) {
 
-            const lp = mainLight.getWorldPosition(CustomShader._mainLightPosition);
+            const lp = getWorldPosition(mainLight.gameObject, CustomShader._mainLightPosition);
             this.uniforms["_MainLightPosition"] = { value: lp.normalize() };
 
             CustomShader._mainLightColor.set(mainLight.color.r, mainLight.color.g, mainLight.color.b, 0);

package/src/engine/extensions/extensions.ts

@@ -8,7 +8,7 @@ import { NEEDLE_gameobject_data } from "./NEEDLE_gameobject_data";
 import { NEEDLE_persistent_assets } from "./NEEDLE_persistent_assets";
 // import { KHR_animation_pointer } from "./KHR_animation_pointer";
 import { NEEDLE_lightmaps } from "../extensions/NEEDLE_lightmaps";
-import { SourceIdentifier } from "../engine_gltf";
+import { SourceIdentifier } from "../engine_types";
 import { Context } from "../engine_setup";
 import { NEEDLE_lighting_settings } from "./NEEDLE_lighting_settings";
 import { NEEDLE_render_objects } from "./NEEDLE_render_objects";

package/src/engine-components/Animator.ts

@@ -1,10 +1,10 @@
-import { Behaviour, GameObject } from "./Component";
+import { Behaviour } from "./Component";
 import * as THREE from 'three'
-import { LoopOnce, LoopRepeat, AnimationActionLoopStyles, AnimationAction } from "three";
+import { LoopOnce, AnimationActionLoopStyles, AnimationAction } from "three";
 import { getParam, deepClone } from "../engine/engine_utils";
 import { AnimatorControllerModel } from "../engine/extensions/NEEDLE_animator_controller_model";
 import { AnimatorController } from "./AnimatorController";
-import { allProperties, serializeable } from "../engine/engine_serialization_decorator";
+import {  serializeable } from "../engine/engine_serialization_decorator";
 import { Mathf } from "../engine/engine_math";
 
 const debug = getParam("debuganimator");

package/src/engine-components/AvatarLoader.ts

@@ -1,12 +1,13 @@
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import * as THREE from "three";
 import * as utils from "../engine/engine_utils"
-import * as object from "../engine/engine_gltf_builtin_components";
+// import * as object from "../engine/engine_gltf_builtin_components";
 import * as loaders from "../engine/engine_loaders"
 import { Context } from "../engine/engine_setup";
-import { GameObject, InstantiateOptions } from "./Component";
+import { GameObject } from "./Component";
 import { download_file } from "../engine/engine_web_api";
-import { parseSync } from "../engine/engine_scenetools";
+import { getLoader } from "../engine/engine_gltf";
+import { InstantiateOptions } from "../engine/engine_gameobject";
 
 const debug = utils.getParam("debugavatar");
 
@@ -103,7 +104,7 @@ export class AvatarLoader {
                 if (!bin) return null;
             }
 
-            const gltf = await parseSync(context, bin, null!, 0);
+            const gltf = await getLoader().parseSync(context, bin, null!, 0);
             return gltf?.scene ?? null;
         }
 
@@ -125,7 +126,7 @@ export class AvatarLoader {
             const url = this.avatarRegistryUrl + "/" + avatarId;
             loader.load(url,
                 async gltf => {
-                    await object.createBuiltinComponents(context, url, gltf);
+                    await getLoader().createBuiltinComponents(context, url, gltf, null, undefined);
                     resolve(gltf.scene);
                 },
                 progress => {

package/src/engine-components/Camera.ts

@@ -1,11 +1,12 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
-import { OrbitControls } from "./OrbitControls";
+// import { OrbitControls } from "./OrbitControls";
 import { getParam } from "../engine/engine_utils";
 import { serializeable } from "../engine/engine_serialization_decorator";
 import { RGBAColor } from "./js-extensions/RGBAColor";
 import { PerspectiveCamera } from "three";
 import { XRSessionMode } from "../engine/engine_setup";
+import { ICamera } from "../engine/engine_types"
 
 export enum ClearFlags {
     Skybox = 1,
@@ -15,7 +16,8 @@ export enum ClearFlags {
 
 const debug = getParam("debugcam");
 
-export class Camera extends Behaviour {
+export class Camera extends Behaviour implements ICamera {
+
 
     get aspect(): number {
         if (this._cam instanceof PerspectiveCamera) return this._cam.aspect;
@@ -104,6 +106,12 @@ export class Camera extends Behaviour {
         return this._cam!;
     }
 
+
+    // constructor(){
+    //     super();
+    //     console.log(this);
+    // }
+
     awake() {
         if (!this.sourceId) {
             console.warn("Camera has no source - the camera should be exported inside a gltf", this.name);
@@ -239,15 +247,4 @@ class CameraSkybox {
         }
     }
 
-}
-
-export function createCameraWithOrbitControl(scene: THREE.Scene): Camera {
-    const srcId = "created/implictly";
-    const go = new THREE.Object3D();
-    scene.add(go);
-    const cam = GameObject.addNewComponent(go, Camera, false);
-    cam.sourceId = srcId;
-    const orbit = GameObject.addNewComponent(go, OrbitControls, false);
-    orbit.sourceId = srcId;
-    return cam;
 }

package/src/engine-components/CameraUtils.ts

@@ -0,0 +1,15 @@
+import { OrbitControls } from "./OrbitControls";
+import { Camera } from "./Camera";
+import { addNewComponentInstance } from "../engine/engine_components";
+import { Object3D, Scene } from "three";
+
+export function createCameraWithOrbitControl(scene: Scene): Camera {
+    const srcId = "created/implictly";
+    const go = new Object3D();
+    scene.add(go);
+    const cam = addNewComponentInstance(go, new Camera(), false);
+    cam.sourceId = srcId;
+    const orbit = addNewComponentInstance(go, new OrbitControls(), false);
+    orbit.sourceId = srcId;
+    return cam as Camera;
+}