@needle-tools/engine 2.62.1-pre → 2.63.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.62.1-pre",
+    "version": "2.63.0-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "dist/needle-engine.js",
@@ -60,7 +60,7 @@
         "@needle-tools/needle-component-compiler": "1.9.3",
         "@needle-tools/helper": "^0.2.1-pre",
         "@types/three": "0.146.0",
-        "copy-files-from-to": "^3.3.0",
+        "copy-files-from-to": "^3.7.0",
         "esbuild": "^0.15.10",
         "esbuild-node-externals": "^1.5.0",
         "jsdoc-babel": "^0.5.0",

package/src/engine/api.ts

@@ -8,4 +8,5 @@ export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"
 export { Gizmos } from "./engine_gizmos"
 export * from "./engine_scenetools";
-export * from "./engine_math"
+export * from "./engine_math"
+export * from "./js-extensions"

package/src/engine/assets/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 187.74"><defs><style>.cls-1{fill:url(#Unbenannter_Verlauf_122);}.cls-2{fill:#f3e600;}.cls-3{fill:url(#Unbenannter_Verlauf_113);}.cls-4{fill:url(#gradient-6);}.cls-5{fill:url(#Unbenannter_Verlauf_110);}.cls-6{fill:url(#Unbenannter_Verlauf_101);}.cls-7{fill:#9c3;}.cls-8{fill:#ffe113;}.cls-9{fill:url(#gradient-5);}</style><linearGradient id="Unbenannter_Verlauf_113" x1="89.64" y1="184.81" x2="90.48" y2="21.85" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#62d399"/><stop offset=".51" stop-color="#acd842"/><stop offset=".9" stop-color="#d7db0a"/></linearGradient><linearGradient id="Unbenannter_Verlauf_110" x1="69.68" y1="178.9" x2="68.08" y2="16.77" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ba398"/><stop offset=".5" stop-color="#4ca352"/><stop offset="1" stop-color="#76a30a"/></linearGradient><linearGradient id="Unbenannter_Verlauf_101" x1="36.6" y1="152.17" x2="34.7" y2="84.19" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#36a382"/><stop offset=".54" stop-color="#49a459"/><stop offset="1" stop-color="#76a30b"/></linearGradient><linearGradient id="Unbenannter_Verlauf_122" x1="15.82" y1="153.24" x2="18" y2="90.86" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#267880"/><stop offset=".51" stop-color="#457a5c"/><stop offset="1" stop-color="#717516"/></linearGradient><linearGradient id="gradient-6" x1="135.08" y1="135.43" x2="148.93" y2="63.47" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b0d939"/><stop offset="1" stop-color="#eadb04"/></linearGradient><linearGradient id="gradient-5" x1="-4163.25" y1="2285.12" x2="-4160.81" y2="2215.34" gradientTransform="translate(4801.15 -595.25) rotate(20)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-color="#74af52"/><stop offset=".48" stop-color="#99be32"/><stop offset="1" stop-color="#c0c40a"/></linearGradient><symbol id="needle-icon" viewBox="0 0 160 187.74"><g><polygon class="cls-3" points="79.32 36.98 79.32 187.74 95 174.54 101.59 18.23 79.32 36.98"/><polygon class="cls-5" points="79.32 36.98 57.05 18.23 63.64 174.54 79.32 187.74 79.32 36.98"/><polygon class="cls-6" points="25.19 104.83 33.82 153.87 46.32 138.92 43.86 82.5 25.19 104.83"/><polygon class="cls-1" points="25.19 104.83 0 90.24 16.97 144.1 33.82 153.87 25.19 104.83"/><polygon class="cls-7" points="43.86 82.5 18.69 67.98 0 90.24 25.18 104.83 43.86 82.5"/><polygon class="cls-4" points="134.82 78.69 124.85 135.19 140.43 126.15 160 64.1 134.82 78.69"/><polygon class="cls-9" points="134.82 78.69 116.14 56.36 113.28 121.36 124.85 135.19 134.82 78.69"/><polygon class="cls-8" points="160 64.1 141.31 41.84 116.14 56.36 134.81 78.69 160 64.1"/><polygon class="cls-2" points="101.59 18.23 79.32 0 57.05 18.23 79.32 36.98 101.59 18.23"/></g></symbol></defs><use width="160" height="187.74" xlink:href="#needle-icon"/></svg>

package/src/engine/codegen/license.js

@@ -0,0 +1 @@
+export const hasLicense = false;

package/src/engine/engine.ts

@@ -1,8 +1,5 @@
 import "./engine_hot_reload"
 
-import * as layers from "./js-extensions/Layers";
-layers.patchLayers();
-
 import * as engine_setup from "./engine_setup";
 import * as engine_scenetools from "./engine_scenetools";
 import "./tests/test_utils";

package/src/engine/engine_camera.ts

@@ -0,0 +1,18 @@
+import { ICameraController } from "./engine_types";
+import { Camera } from "three";
+
+
+const $cameraController = Symbol("cameraController");
+
+export function getCameraController(cam: Camera): ICameraController | null {
+    return cam[$cameraController];
+}
+
+export function setCameraController(cam: Camera, cameraController: ICameraController, active: boolean) {
+    if (active)
+        cam[$cameraController] = cameraController;
+    else{
+        if(cam[$cameraController] === cameraController)
+            cam[$cameraController] = null;
+    }
+}

package/src/engine/engine_element.ts

@@ -79,6 +79,12 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     public get loadingProgress01(): number { return this._loadingProgress01; }
     public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
 
+    public get cameraControls(): boolean {
+        const attr = this.getAttribute("camera-controls");
+        if(attr === null || attr === "False" || attr === "false" || attr === "0") return false;
+        return true;
+    }
+
     public getContext(): Promise<Context> {
         return new Promise((res, _rej) => {
             if (this._context && this.loadingFinished) {
@@ -208,7 +214,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
                 }
                 this._loadingProgress01 = 1;
                 if (useDefaultLoading)
-                    this._loadingView?.onLoadingFinished("create scene");
+                    this._loadingView?.onLoadingFinished("creating scene");
                 this.classList.remove("loading");
                 this.classList.add("loading-finished");
                 if (debug)
@@ -237,7 +243,17 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     }
 
     static get observedAttributes() {
-        return ["hash", "src", "loadstart", "progress", "loadfinished", "dracoDecoderPath", "dracoDecoderType", "ktx2DecoderPath"];
+        return [
+            "hash",
+            "src",
+            "camera-controls",
+            "loadstart",
+            "progress",
+            "loadfinished",
+            "dracoDecoderPath",
+            "dracoDecoderType",
+            "ktx2DecoderPath"
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {

package/src/engine/engine_element_loading.ts

@@ -64,13 +64,13 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     onLoadingBegin(message?: string) {
-        if(debug) console.log("Begin Loading")
+        if (debug) console.log("Begin Loading")
         if (!this._loadingElement) {
             for (let i = 0; i < this.container.children.length; i++) {
                 const el = this.container.children[i] as HTMLElement;
                 if (el.classList.contains(EngineLoadingView.LoadingContainerClassName)) {
                     if (!this._allowCustomLoadingElement) {
-                        if(debug) console.warn("Remove custom loading container")
+                        if (debug) console.warn("Remove custom loading container")
                         this.container.removeChild(el);
                         continue;
                     }
@@ -102,7 +102,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if ("index" in progress)
                 total01 = calculateProgress01(progress);
             if (!message && "name" in progress)
-                this.setMessage(progress.name);
+                this.setMessage("loading " + progress.name);
         }
         this.loadingProgress = total01;
         if (message) this.setMessage(message);
@@ -125,11 +125,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
         if (this._progressLoop) return;
         let dt = 1 / 12;
         const max = 1 - .05;
-        if(debugRendering) dt = 1 / 500;
+        if (debugRendering) {
+            dt = 1 / 500;
+            if (typeof debugRendering === "number") dt *= debugRendering;
+        }
         this._progressLoop = setInterval(() => {
             if (this.loadingProgress >= 1 && this._progress >= max) {
                 if (this._loadingElement) {
-                    if(debug) console.log("Hiding loading element");
+                    if (debug) console.log("Hiding loading element");
                     this._loadingElement.style.display = "none";
                     this._loadingElement.remove();
                 }
@@ -154,7 +157,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     private createLoadingElement(existing?: HTMLElement): HTMLElement {
-    if(debug && !existing) console.log("Creating loading element");
+        if (debug && !existing) console.log("Creating loading element");
         this._loadingElement = existing || document.createElement("div");
         if (!existing) {
             this._loadingElement.style.position = "fixed";
@@ -186,9 +189,29 @@ export class EngineLoadingView implements ILoadingViewHandler {
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
         loadingBarContainer.style.height = "2px";
-        loadingBarContainer.style.background = "rgba(255,255,255,.1)"
+        loadingBarContainer.style.background = "rgba(255,255,255,.2)"
+        // loadingBarContainer.style.alignItems = "center";
         this._loadingElement.appendChild(loadingBarContainer);
 
+        const needleLogo = document.createElement("img");
+        loadingBarContainer.appendChild(needleLogo);
+        const logoSize = 64;
+        needleLogo.style.width = `${logoSize}px`;
+        needleLogo.style.height = `${logoSize}px`;
+        needleLogo.style.position = "absolute";
+        needleLogo.style.left = "50%";
+        needleLogo.style.transform = `translate(-${logoSize * .5}px, -${logoSize + 32}px)`;
+        needleLogo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
+        needleLogo.style.cursor = "pointer";
+        needleLogo.style.pointerEvents = "all";
+        try {
+            //@ts-ignore
+            import("./assets/logo.svg").then(res => {
+                needleLogo.src = res.default;
+            })
+        }
+        catch { }
+
         this._loadingBar = document.createElement("div");
         loadingBarContainer.appendChild(this._loadingBar);
         const getGradientPos = function (t: number): string {
@@ -203,7 +226,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._loadingTextContainer = document.createElement("div");
         this._loadingTextContainer.style.display = "flex";
         this._loadingTextContainer.style.justifyContent = "center";
-        this._loadingTextContainer.style.marginTop = ".9em";
+        this._loadingTextContainer.style.marginTop = "1.2em";
         this._loadingElement.appendChild(this._loadingTextContainer);
 
         const messageContainer = document.createElement("div");
@@ -212,6 +235,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
         messageContainer.style.fontSize = ".8em";
         messageContainer.style.paddingTop = ".5em";
         messageContainer.style.color = "rgba(255,255,255,.5)";
+        messageContainer.style.fontWeight = "200";
+        messageContainer.style.fontFamily = "Roboto, sans-serif";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
         this._loadingElement.appendChild(messageContainer);

package/src/engine/engine_input.ts

@@ -220,6 +220,7 @@ export class Input extends EventTarget {
     private _pointerPositionDown: THREE.Vector2[] = [new THREE.Vector2()];
     private _pointerDownTime: number[] = [];
     private _pointerUpTime: number[] = [];
+    private _pointerUpTimestamp: number[] = [];
     private _pointerIds: number[] = [];
     private _pointerTypes: string[] = [""];
     private _mouseWheelChanged: boolean[] = [false];
@@ -411,13 +412,15 @@ export class Input extends EventTarget {
         }
     }
 
-    private onTouchUp(evt) {
+    private onTouchUp(evt: TouchEvent) {
         if (evt.changedTouches.length <= 0) return;
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
-            if (debug)
-                showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
+            const id = this.getPointerIndex(touch.identifier);
+
+            if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
+
+            if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
             const args: PointerEventArgs = { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, source: evt };
             this.onUp(args);
         }
@@ -440,11 +443,20 @@ export class Input extends EventTarget {
     private onMouseUp(evt: MouseEvent) {
         if (evt.defaultPrevented) return;
         let i = evt.button;
+        if (!this.isNewEvent(evt.timeStamp, i, this._pointerUpTimestamp)) return;
         this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }
 
+    // Prevent the same event being handled twice (e.g. on touch we get a mouseUp and touchUp evt with the same timestamp)
+    private isNewEvent(timestamp: number, index: number, arr: number[]): boolean {
+        while (arr.length <= index) arr.push(-1);
+        if (timestamp === arr[index]) return false;
+        arr[index] = timestamp;
+        return true;
+    }
+
     private isInRect(e: { clientX: number, clientY: number }): boolean {
-        if(this.context.isInXR) return true;
+        if (this.context.isInXR) return true;
         const rect = this.context.domElement.getBoundingClientRect();
         const px = e.clientX;
         const py = e.clientY;

package/src/engine/engine_license.ts

@@ -0,0 +1,216 @@
+import { getParam } from "./engine_utils";
+import { ContextEvent, ContextRegistry } from "./engine_context_registry";
+import { IContext } from "./engine_types";
+
+const debug = getParam("debuglicense");
+
+ContextRegistry.registerCallback(ContextEvent.ContextCreated, evt => {
+    showLicenseInfo(evt.context);
+});
+
+async function showLicenseInfo(ctx: IContext) {
+    try {
+        const res = await import(/* @vite-ignore */ "./codegen/license");
+        //@ts-ignore
+        if (!res || res.hasLicense !== true || debug) return onNonCommercialVersionDetected(ctx);
+    }
+    catch (err) {
+        if (debug) console.log("License check failed", err)
+        return onNonCommercialVersionDetected(ctx)
+    }
+    if (debug) onNonCommercialVersionDetected(ctx)
+}
+
+
+const _licenseText = "🌵 <span class=\"text\">Made with <a href=\"https://needle.tools\" target=\"_blank\">Needle</a></span>";
+const licenseElementClass = "needle-license-element";
+const licenseDuration = 30000;
+const licenseDelay = 600;
+
+function onNonCommercialVersionDetected(ctx: IContext) {
+    insertNonCommercialUseHint(ctx);
+    sendNonCommercialUsageMessageToAnalyticsBackend();
+}
+
+function insertNonCommercialUseHint(ctx: IContext) {
+
+    let licenseText = _licenseText;
+    const licenseElement = createLicenseElement();
+    licenseElement.innerHTML = licenseText;
+
+    const style = createLicenseStyle();
+
+    const interval = setInterval(() => {
+        if (!licenseElement) return;
+        if (licenseElement.parentElement !== ctx.domElement) {
+            ctx.domElement.appendChild(licenseElement);
+            if (style) ctx.domElement.appendChild(style);
+        }
+    }, 100);
+
+    logNonCommercialUse();
+
+    //@ts-ignore
+    import("./assets/logo.svg").then(res => {
+        const svgContent = res.default;
+        let svg = `<img class="logo" src="${svgContent}" style="width: 40px; height: 40px; margin-right: 2px; vertical-align: middle; margin-bottom: 2px;"/>`;
+        svg = "<a href=\"https://needle.tools\" target=\"_blank\">" + svg + "</a>";
+        licenseText = svg; //licenseText.replace("🌵", svg);
+        licenseElement.innerHTML = licenseText;
+    }).catch(err => {
+        if (debug) console.log("Failed to load logo", err);
+    });
+
+    const removeDelay = licenseDuration + licenseDelay;
+    setTimeout(() => {
+        clearInterval(interval);
+        licenseElement?.remove();
+    }, removeDelay);
+
+}
+
+async function logNonCommercialUse(_logo?: string) {
+    const logo = "data:image/webp;base64,UklGRrABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSKEAAAARN6CmbSM4WR7vdARON11EBDq3fLiNbVtVzpMCPlKAEzsx0Y/x+Ovuv4dn0EFE/ydAvz6YggXzgh5sVgXM/zOC/4sii7qgGvB5N7hmuQYwkvazWAu1JPW41FXSHq6pnaQWvqYH18Fc0j1hO/BFTtIeSBlJi5w6qIIO7IOrwhFsB2Yxukif0FTRLpXswHR8MxbslKe9VZsn/Ub5C7YFOpqSTABWUDgg6AAAAFAGAJ0BKiAAIAA+7VyoTqmkpCI3+qgBMB2JbACdMt69DwMIQBLhkTO6XwY00UEDK6cNIDnuNibPf0EgAP7Y1myuiQHLDsF/0h5unrGh6WAbv7aegg2ZMd3uRKfT/3SJztcaujYfTvMXspfCTmYcoO6a+vhC3ss4M8uM58t4siiu59I4aOl59e9Sr6xoxYlHf2v+NnBNpJYeJf8jABQAId/PXuBkLEFkiCucgSGEcfhvajql/j3reCGl0M5/9gQWy7ayNPs+wlvIxFnNfSlfuND4CZOCyxOHhRqOmHN4ULHo3tCSrUNvgAA=";
+    const style = `
+        font-size:18px;
+        background-size: contain;
+        background-position: left center;
+        background-repeat:no-repeat;
+        background-image:url('${logo}')
+    `;
+    let licenseText = "Needle Engine — non commercial version";
+    console.log("%c   " + licenseText, style)
+}
+
+function createLicenseElement() {
+    const licenseElement = document.createElement("div");
+    licenseElement.classList.add(licenseElementClass);
+    licenseElement.setAttribute("data-needle_engine_license_element", "");
+    licenseElement.style.position = "fixed";
+    licenseElement.style.bottom = "12px";
+    licenseElement.style.right = "15px";
+
+    // licenseElement.style.textShadow = "0 0 2px rgba(200,200,200, 1)";
+    const maxPossibleZIndex = 2147483647;
+    licenseElement.style.zIndex = `${maxPossibleZIndex}`;
+    return licenseElement;
+}
+
+function createLicenseStyle() {
+    const licenseStyle = document.createElement("style");
+    const selector = "." + licenseElementClass;
+    licenseStyle.innerHTML = `
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
+
+    ${selector} {
+        font-family: 'Roboto', sans-serif !important;
+        font-weight: 300;
+    }
+
+    ${selector} a {
+        color: black;
+        text-decoration: none;
+        font-weight: 500;
+    }
+    
+    @keyframes append-animate {
+        0% {
+            transform: translate(0px, 10px);
+            opacity: 0;
+            pointer-events: none;
+        }
+        1% {
+            transform: translate(0, -5px);
+            opacity: .9;
+        }
+        2% {
+            transform: translate(0, 3px);
+        }
+        6% {
+            transform: translate(0, 0px);
+            pointer-events: all;
+            opacity: 1;
+        }
+        50% {
+            transform: scale(1)
+        }
+        51% {
+            transform: scale(1.2)
+        }
+        53% {
+            transform: scale(1)
+        }
+        90% {
+            opacity: 1;
+            pointer-events: all;
+            transform: scale(1)
+        }
+        100% {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    ${selector} {
+        opacity: 0;
+        pointer-events: none;
+        animation: append-animate;
+        animation-iteration-count: 1;
+        animation-duration: ${(licenseDuration / 1000)}s;
+        animation-delay: ${licenseDelay / 1000}s;
+        animation-easing: ease-in-out;
+    }
+
+    ${selector} .text, ${selector} a {
+        color: rgb(255, 0, 0); 
+        mix-blend-mode: difference;
+    }
+
+    ${selector} .logo {
+        border-radius: 50%;
+        background-color: transparent;
+        padding: 5px;
+        transition: all 0.1s ease-in-out;
+    }
+
+    ${selector} .logo:hover {
+        transform: scale(1.3);
+        cursor: pointer;
+    }
+    `
+    return licenseStyle;
+}
+
+
+async function sendNonCommercialUsageMessageToAnalyticsBackend() {
+    try {
+        const analyticsBackendUrlForward = "https://urls.needle.tools/analytics-endpoint";
+        const res = await fetch(analyticsBackendUrlForward);
+        let analyticsUrl = await res.text();
+        if (analyticsUrl) {
+            if (debug) console.log("Analytics backend url", analyticsUrl);
+
+            // analyticsUrl = "http://localhost:3000/";
+
+            const currentUrl = window.location.href;
+
+            let endpoint = "api/v1/register/web-request";
+            if (!analyticsUrl.endsWith("/")) endpoint = "/" + endpoint;
+            const finalUrl = `${analyticsUrl}${endpoint}?type=non-commercial&url=${encodeURIComponent(currentUrl)}&hostname=${encodeURIComponent(window.location.hostname)}&pathname=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}&hash=${encodeURIComponent(window.location.hash)}`;
+            if (debug) console.log("Sending non-commercial usage message to analytics backend", finalUrl);
+
+
+            fetch(finalUrl,
+                {
+                    mode: "no-cors"
+                })
+                .catch(err => {
+                    if (debug)
+                        console.log("Failed to send non-commercial usage message to analytics backend", err);
+                });
+        }
+    }
+    catch (err) {
+        if (debug)
+            console.log("Failed to send non-commercial usage message to analytics backend", err);
+    }
+}

package/src/engine/engine_physics.ts

@@ -324,8 +324,22 @@ export class Physics {
             await RAPIER.init().then(() => RAPIER)
             Physics._didLoadPhysicsEngine = true;
         }
-        const gravity = { x: 0.0, y: -9.81, z: 0.0 };
-        this.world = new World(gravity);
+        this.world = new World(this._gravity);
+    }
+
+    private _gravity = { x: 0.0, y: -9.81, z: 0.0 };
+
+    get gravity() {
+        return this.world?.gravity ?? this._gravity;
+    }
+
+    set gravity(value: Vec3) {
+        if (this.world) {
+            this.world.gravity = value;
+        }
+        else {
+            this._gravity = value;
+        }
     }
 
     clearCaches() {

package/src/engine/engine_setup.ts

@@ -504,7 +504,6 @@ export class Context implements IContext {
 			this.domElement.prepend(this.renderer.domElement);
 
 		Context._current = this;
-		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 
 		// Setup
 		Context._current = this;
@@ -591,6 +590,8 @@ export class Context implements IContext {
 
 		if (debug)
 			logHierarchy(this.scene, true);
+
+		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 	}
 
 	private render(_, frame) {

package/src/engine/engine_types.ts

@@ -30,10 +30,11 @@ export declare type CoroutineData = {
 export interface IContext {
     alias?: string | null;
 
-    scene : Scene;
-    renderer : WebGLRenderer;
-    mainCamera : Camera | null;
-    domElement : HTMLElement;
+    scene: Scene;
+    renderer: WebGLRenderer;
+    mainCamera: Camera | null;
+    mainCameraComponent: ICamera | undefined;
+    domElement: HTMLElement;
 
     scripts: IComponent[];
 	scripts_pausedChanged: IComponent[];
@@ -158,6 +159,10 @@ export declare interface ICamera extends IComponent {
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;
 }
 
+export declare interface ICameraController {
+    get isCameraController(): boolean;
+}
+
 export declare interface ILight extends IComponent {
     intensity: number;
     color: Color;

package/src/engine/extensions/extension_utils.ts

@@ -43,7 +43,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParser, obj, promi
             // handle json pointer in string variable
             if (typeof val === "string") {
                 const ext = resolveExtension(parser, val);
-                if (ext !== null) {
+                if (ext !== null && ext !== undefined) {
                     if (typeof ext.then === "function")
                         promises.push(ext.then(res => obj[key] = res));
                     else obj[key] = ext;

package/src/engine/js-extensions/Camera.ts

@@ -0,0 +1,35 @@
+import { PerspectiveCamera } from "three";
+
+// Wrap camera FOV to allow animation of fov
+Object.defineProperty(PerspectiveCamera.prototype, "fov", {
+    get: function () {
+        return this._fov;;
+    },
+    set: function (val) {
+        const changed = val !== this._fov;
+        this._fov = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "near", {
+    get: function () {
+        return this._near;
+    },
+    set: function (val) {
+        const changed = val !== this._near;
+        this._near = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "far", {
+    get: function () {
+        return this._far;
+    },
+    set: function (val) {
+        const changed = val !== this._far;
+        this._far = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});

package/src/engine/js-extensions/Layers.ts

@@ -16,4 +16,5 @@ export function patchLayers() {
         if(this[$customVisibilityFlag] === false) return false;
         return origTest.call(this, layer);
     };
-}
+}
+patchLayers();

package/src/engine/js-extensions/index.ts

@@ -0,0 +1,2 @@
+import "./Layers"
+import "./Camera"