Needle Engine 3.37.10-alpha

Files changed (11) hide show

plugins/vite/pwa.js +70 -51
src/engine-components/ContactShadows.ts +84 -37
src/engine/engine_context.ts +14 -3
src/engine/engine_element_loading.ts +3 -3
src/engine/engine_element.ts +31 -10
src/engine/engine_three_utils.ts +66 -1
plugins/types/index.d.ts +3 -3
src/engine/js-extensions/Layers.ts +4 -0
src/engine-components/OrbitControls.ts +2 -58
plugins/types/userconfig.d.ts +4 -6
plugins/types/webmanifest.d.ts +8 -1

plugins/vite/pwa.js CHANGED Viewed

@@ -13,36 +13,46 @@
  */
 export const needlePWA = (command, config, userSettings) => {
     // @ts-ignore // TODO correctly type the userSettings.pwaOptions object
-    /** @type {import("vite-plugin-pwa").VitePWAOptions} */
-    const pwaOptions = userSettings.pwaOptions;
+    /** @type {import("vite-plugin-pwa").VitePWAOptions | false} */
+    const pwaOptions = userSettings.pwa;
     /** The context contains files that are generated by the plugin and should be deleted after
      * @type {import('../types').NeedlePWAProcessContext} */
     const context = { generatedFiles: [] }
+    // early out, explicitly disabled
+    if (pwaOptions === false) return;
+    // no PWA options provided, but the vite-pwa plugin is enabled – inform that we can do better
     if (!pwaOptions) {
-        log("WARN: No PWA options found in user settings. Please pass in the pwaOptions to the needlePlugin like so: \"needlePlugins(command, needleConfig, { pwaOptions: PWAOptions })\" and pass the same options to vitePWA plugin like so \"VitePWA(PWAOptions)\"");
-        return cleanup(context);
+        return {
+            name: "needle-pwa",
+            apply: "build",
+            configResolved(config) {
+                if (findVitePWAPlugin(config)) {
+                    errorThrow("It seems that you're trying to build a PWA using `vite-plugin-pwa`!\nNeedle can manage PWA settings for you – just pass the same `pwaOptions` to the `needlePlugin` and `VitePWA` plugins:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you want to manage PWA building yourself and skip this check, please pass `{ pwa: false }` to needlePlugins.");
+                }
+            },
+        }
     }
     // @ts-ignore // TODO need an extra type so we can add more options into the VitePWAOptions object
     /** @type {number | undefined} */
     const updateInterval = pwaOptions.updateInterval || undefined;
-    if ((command !== "build" && !pwaOptions?.devOptions.enabled) || pwaOptions?.disable) return;
-    if (userSettings?.noPWA === true) return;
+    if ((command !== "build" && !pwaOptions?.devOptions?.enabled) || pwaOptions?.disable) return;
     // The PWA files should not have gzip compression – this will mess up with the precache and the service worker.
     // If gzip is wanted, the server should serve files with gzip compression on the fly.
     if (config) config.gzip = false;
     if (!pwaOptions.registerType) {
-        log("Set PWA registerType to autoUpdate. This will automatically update the service worker when the content changes. If you want to manually update the service worker set the registerType to manual. See https://vite-pwa-org.netlify.app/guide/#configuring-vite-plugin-pwa");
+        // log("Set PWA registerType to autoUpdate. This will automatically update the service worker when the content changes. If you want to manually update the service worker set the registerType to manual. See https://vite-pwa-org.netlify.app/guide/#configuring-vite-plugin-pwa");
         pwaOptions.registerType = "autoUpdate";
     }
     if (!pwaOptions.outDir) {
         const outDir = getOutputDirectory();
-        log("Set PWA outDir to " + outDir);
+        // log("Set PWA outDir to " + outDir);
         pwaOptions.outDir = outDir;
     }
@@ -77,17 +87,20 @@
         name: 'needle-pwa',
         apply: 'build',
         enforce: "post",
-        config(config) {
+        configResolved(config) {
             try {
-                checkIfVitePWAPluginIsPresent(config);
+                const plugin = findVitePWAPlugin(config);
+                if (!plugin) {
+                    errorThrow("It seems that you're trying to build a PWA!.\nRun `npm install vite-plugin-pwa`, and add VitePWA to the vite config:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you don't intend to build a PWA, pass `{ pwa: false }` to needlePlugins or remove the `pwa` entry.");
+                }
                 // check if the index header contains the webmanifest ALSO
-                // if yes then we want to log a waring at the end
+                // if yes then we want to log a warning at the end
                 const indexPath = currentDir + "/index.html";
                 if (existsSync(indexPath)) {
                     const indexContent = readFileSync(indexPath, 'utf8');
                     if (indexContent.includes(".webmanifest")) {
-                        throw new Error("ERR: [needle-pwa] index.html contains a reference to a webmanifest. This is currently not supported. Please remove the reference from the index.html, or remove the needle-pwa plugin and manage PWA building yourself.");
+                        errorThrow("index.html contains a reference to a webmanifest. This is currently not supported. Please remove the reference from the index.html, or pass `{ pwa: false }` to needlePlugins to manage PWA building yourself.");
                     }
                 }
             }
@@ -189,28 +202,21 @@
 /** Checks if the vite-plugin-pwa is present in the vite config
  * @param {import('vite').UserConfig} config
+ * @returns {import('vite-plugin-pwa').VitePWAOptions | null}
  */
-function checkIfVitePWAPluginIsPresent(config) {
+function findVitePWAPlugin(config) {
     const plugins = config.plugins || [];
-    let foundVitePWAPlugin = false;
+    function _findVitePWAPlugin(p) {
+        if (Array.isArray(p))
+            return p.find(_findVitePWAPlugin);
+        if (p?.name === "vite-plugin-pwa")
+            return p;
+    }
     for (const plugin of plugins) {
-        if (isVitePWAPlugin(plugin)) {
-            foundVitePWAPlugin = true;
-            return;
-        }
+        const foundVitePWAPlugin = _findVitePWAPlugin(plugin);
+        if (foundVitePWAPlugin) return foundVitePWAPlugin;
     }
-    function isVitePWAPlugin(p) {
-        if (Array.isArray(p)) {
-            return p.some(isVitePWAPlugin);
-        }
-        return p.name === "vite-plugin-pwa";
-    }
-    if (!foundVitePWAPlugin) {
-        // const { default: VitePWA } = await import('vite-plugin-pwa');
-        // log("Add vite-plugin-pwa to the vite config");
-        // config.plugins.push(VitePWA());
-        throw new Error("ERR: [needle-pwa] vite-plugin-pwa is not present in the vite config. Please install vite-plugin-pwa and add it to the vite config like so: \"VitePWA(PWAOptions)\". \n\nIf you don't intent to build a PWA then don't pass the PWA options to the needlePlugin or set `noPWA: true` in the user settings (third argument).");
-    }
+    return null;
 }
 function cleanup(context) {
@@ -225,6 +231,18 @@
     console.log("[needle-pwa]", ...args);
 }
+/** Throws an error with defined stacktrace.
+ * @param {string} message
+ * @param {number} stackTraceLimit How many stack frames to show in the error message
+*/
+function errorThrow(message, traceLimit = 0) {
+    const { stackTraceLimit } = Error;
+    Error.stackTraceLimit = traceLimit;
+    const e = new Error("[needle-pwa] " + message);
+    Error.stackTraceLimit = stackTraceLimit;
+    throw e;
+}
 /**
  * @param {string | Partial<import("vite-plugin-pwa").ManifestOptions>} webmanifestPath Path to the webmanifest file, or partial manifest itself
  * @param {import("../types/index.d.ts").NeedlePWAProcessContext} context
@@ -249,7 +267,11 @@
     }
     processIcons(manifest, outDir, context);
+    // TODO include assets in the manifest instead of manually copying
+    // if (pwaOptions.includeAssets === undefined) pwaOptions.includeAssets = [];
+    // pwaOptions.includeAssets = [...pwaOptions.includeAssets, ...manifest.icons?.map(i => i.src)];
     const packageJsonPath = process.cwd() + "/package.json";
     const packageJson = existsSync(packageJsonPath) ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : {};
@@ -347,31 +369,28 @@
 function generateIcons(manifest, context) {
     if (!manifest.icons) manifest.icons = [];
     log("Generating PWA icons");
-    const sizes = [192, 512];
+    const sizes = [48, 128, 144, 192, 512];
+    // Needle icon
     const defaultIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 187.74"><defs><linearGradient id="a" x1="89.64" y1="184.81" x2="90.48" y2="21.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#62d399"/><stop offset=".51" stop-color="#acd842"/><stop offset=".9" stop-color="#d7db0a"/></linearGradient><linearGradient id="b" x1="69.68" y1="178.9" x2="68.08" y2="16.77" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ba398"/><stop offset=".5" stop-color="#4ca352"/><stop offset="1" stop-color="#76a30a"/></linearGradient><linearGradient id="c" x1="36.6" y1="152.17" x2="34.7" y2="84.19" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#36a382"/><stop offset=".54" stop-color="#49a459"/><stop offset="1" stop-color="#76a30b"/></linearGradient><linearGradient id="d" x1="15.82" y1="153.24" x2="18" y2="90.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#267880"/><stop offset=".51" stop-color="#457a5c"/><stop offset="1" stop-color="#717516"/></linearGradient><linearGradient id="e" x1="135.08" y1="135.43" x2="148.93" y2="63.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b0d939"/><stop offset="1" stop-color="#eadb04"/></linearGradient><linearGradient id="f" x1="-4163.25" y1="2285.12" x2="-4160.81" y2="2215.34" gradientTransform="rotate(20 4088.49 13316.712)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-color="#74af52"/><stop offset=".48" stop-color="#99be32"/><stop offset="1" stop-color="#c0c40a"/></linearGradient><symbol id="g" viewBox="0 0 160 187.74"><path style="fill:url(#a)" d="M79.32 36.98v150.76L95 174.54l6.59-156.31-22.27 18.75z"/><path style="fill:url(#b)" d="M79.32 36.98 57.05 18.23l6.59 156.31 15.68 13.2V36.98z"/><path style="fill:url(#c)" d="m25.19 104.83 8.63 49.04 12.5-14.95-2.46-56.42-18.67 22.33z"/><path style="fill:url(#d)" d="M25.19 104.83 0 90.24l16.97 53.86 16.85 9.77-8.63-49.04z"/><path style="fill:#9c3" d="M43.86 82.5 18.69 67.98 0 90.24l25.18 14.59L43.86 82.5z"/><path style="fill:url(#e)" d="m134.82 78.69-9.97 56.5 15.58-9.04L160 64.1l-25.18 14.59z"/><path style="fill:url(#f)" d="m134.82 78.69-18.68-22.33-2.86 65 11.57 13.83 9.97-56.5z"/><path style="fill:#ffe113" d="m160 64.1-18.69-22.26-25.17 14.52 18.67 22.33L160 64.1z"/><path style="fill:#f3e600" d="M101.59 18.23 79.32 0 57.05 18.23l22.27 18.75 22.27-18.75z"/></symbol></defs><use width="160" height="187.74" xlink:href="#g"/></svg>`;
     const iconDir = process.cwd();
-    for (const size of sizes) {
-        const iconName = "pwa-icon-" + size + ".svg";
-        const iconPath = iconDir + "/" + iconName;
-        writeFileSync(iconPath, defaultIconSVG, 'utf8');
-        context.generatedFiles.push(iconPath);
-        const iconSrc = "./" + iconName;
-        log("Generated PWA icon", iconSrc);
-        const iconInfo = {
-            src: iconSrc,
-            type: "image/svg+xml",
-            sizes: size + "x" + size,
-            "purpose": "any"
-        };
-        manifest.icons.push(iconInfo);
-        manifest.icons.push({
-            ...iconInfo,
-            purpose: "maskable"
-        })
-    }
+    const iconName = "pwa-icon-allSizes.svg";
+    const iconPath = iconDir + "/" + iconName;
+    writeFileSync(iconPath, defaultIconSVG, 'utf8');
+    const iconSrc = "./" + iconName;
+    // log("Generated PWA icon", iconSrc);
+    const iconInfo = {
+        src: iconSrc,
+        type: "image/svg+xml",
+        sizes: sizes.map(s => s + "x" + s).join(" "),
+        "purpose": "any"
+    };
+    manifest.icons.push(iconInfo);
+    context.generatedFiles.push(iconPath);
 }
 /** Tries to copy the icons to the output directory
+ * TODO this should not be needed if we use pwaOptions.includeAssets
  * @param {Partial<import("vite-plugin-pwa").ManifestOptions>} manifest
  */
 function copyIcons(manifest, outDir) {

src/engine-components/ContactShadows.ts CHANGED Viewed

@@ -1,8 +1,12 @@
-import { CustomBlending, DoubleSide, FrontSide, Group, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MinEquation, Object3D, OrthographicCamera, PlaneGeometry, RenderItem, ShaderMaterial, WebGLRenderTarget } from "three";
+import { CustomBlending, DoubleSide, FrontSide, Group, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MinEquation, Object3D, OrthographicCamera, PlaneGeometry, RenderItem, ShaderMaterial, Vector3, WebGLRenderTarget } from "three";
 import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
 import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader.js';
+import { addComponent } from "../engine/engine_components.js";
+import { Context } from "../engine/engine_context.js";
+import { Gizmos } from "../engine/engine_gizmos.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
+import { getBoundingBox } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js"
 import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
 import { Behaviour } from "./Component.js";
@@ -21,7 +25,33 @@
  */
 export class ContactShadows extends Behaviour {
+    private static _instance: ContactShadows;
+    /**
+     * Create contact shadows for the scene. Automatically fits the shadows to the scene.
+     * The instance of contact shadows will be created only once.
+     * @param context The context to create the contact shadows in.
+     * @returns The instance of the contact shadows.
+     */
+    static auto(context?: Context): ContactShadows {
+        if (!this._instance || this._instance.destroyed) {
+            const obj = new Object3D();
+            this._instance = addComponent(obj, ContactShadows, {
+                autoFit: false,
+                occludeBelowGround: false
+            });
+        }
+        if (!context) context = Context.Current;
+        context.scene.add(this._instance.gameObject);
+        this._instance.fitShadows();
+        return this._instance;
+    }
+    /**
+     * When enabled the contact shadows component will be created to fit the whole scene.
+     */
     @serializable()
+    autoFit: boolean = false;
+    @serializable()
     darkness: number = 0.5;
     @serializable()
     opacity: number = 0.5;
@@ -46,9 +76,22 @@
     private horizontalBlurMaterial?: ShaderMaterial;
     private verticalBlurMaterial?: ShaderMaterial;
+    /**
+     * Call to fit the shadows to the scene.
+     */
+    fitShadows() {
+        if (debug) console.log("Fitting shadows to scene");
+        const box = getBoundingBox(this.context.scene.children, [this.gameObject]);
+        if (debug) Gizmos.DrawWireBox3(box, 0xffff00, 1);
+        const min = box.min;
+        this.gameObject.position.set((min.x + box.max.x) / 2, min.y - .01, (min.z + box.max.z) / 2);
+        this.gameObject.scale.set(box.max.x - min.x, 1, box.max.z - min.z);
+        this.gameObject.scale.multiplyScalar(1.5);
+    }
     /** @internal */
     start(): void {
-        if(debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
+        if (debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
         const textureSize = 512;
         this.shadowGroup = new Group();
@@ -64,14 +107,16 @@
         // make a plane and make it face up
         const planeGeometry = new PlaneGeometry(1, 1).rotateX(Math.PI / 2);
         if (this.gameObject instanceof Mesh) {
-            if (debug) console.log("ContactShadows: use existing mesh", this.gameObject)
-            this.plane = this.gameObject as any as Mesh;
-            // Make sure we clone the material once because it might be used on another object as well
-            const mat = this.plane.material = (this.plane.material as MeshBasicMaterial).clone();
-            mat.map = this.renderTarget.texture;
-            mat.opacity = this.opacity;
+            console.warn("ContactShadows can not be added to a Mesh. Please add it to a Group or an empty Object");
+            // this.enabled = false;
+            setCustomVisibility(this.gameObject, false);
+            // this.plane = this.gameObject as any as Mesh;
+            // // Make sure we clone the material once because it might be used on another object as well
+            // const mat = this.plane.material = (this.plane.material as MeshBasicMaterial).clone();
+            // mat.map = this.renderTarget.texture;
+            // mat.opacity = this.opacity;
             // mat.transparent = true;
             // mat.depthWrite = false;
             // mat.needsUpdate = true;
@@ -80,33 +125,30 @@
             // mat.transparent = true;
             // mat.depthWrite = false;
         }
-        else {
-            const planeMaterial = new MeshBasicMaterial({
-                map: this.renderTarget.texture,
-                opacity: this.opacity,
-                color: 0x000000,
-                transparent: true,
-                depthWrite: false,
-            });
-            this.plane = new Mesh(planeGeometry, planeMaterial);
-            this.plane.scale.y = - 1;
-            this.gameObject.add(this.plane);
-        }
+        const planeMaterial = new MeshBasicMaterial({
+            map: this.renderTarget.texture,
+            opacity: this.opacity,
+            color: 0x000000,
+            transparent: true,
+            depthWrite: false,
+        });
+        this.plane = new Mesh(planeGeometry, planeMaterial);
+        this.plane.scale.y = - 1;
+        this.gameObject.add(this.plane);
         if (this.plane) this.plane.renderOrder = 1;
+        this.occluderMesh = new Mesh(this.plane.geometry, new MeshBasicMaterial({
+            depthWrite: true,
+            stencilWrite: true,
+            colorWrite: false,
+        }))
+            // .rotateX(Math.PI)
+            .translateY(-0.0001);
+        this.occluderMesh.renderOrder = -100;
+        this.gameObject.add(this.occluderMesh);
-        if (this.occludeBelowGround) {
-            this.occluderMesh = new Mesh(this.plane.geometry, new MeshBasicMaterial({
-                depthWrite: true,
-                stencilWrite: true,
-                colorWrite: false,
-            }))
-                // .rotateX(Math.PI)
-                .translateY(-0.0001);
-            this.occluderMesh.renderOrder = -100;
-            this.gameObject.add(this.occluderMesh);
-        }
         // the plane onto which to blur the texture
         this.blurPlane = new Mesh(planeGeometry);
         this.blurPlane.visible = false;
@@ -123,8 +165,6 @@
         // this will properly overlap calculated shadows
         this.depthMaterial.blending = CustomBlending;
         this.depthMaterial.blendEquation = MaxEquation;
-        if (this.backfaceShadows)
-            this.depthMaterial.side = DoubleSide;
         // this.depthMaterial.blendEquation = MinEquation;
         this.depthMaterial.onBeforeCompile = shader => {
@@ -150,6 +190,8 @@
         this.verticalBlurMaterial.depthTest = false;
         this.shadowGroup.visible = false;
+        if (this.autoFit) this.fitShadows();
     }
     /** @internal */
@@ -197,7 +239,7 @@
         this.plane.visible = false;
         if (this.gameObject instanceof Mesh) {
-            this.gameObject.visible = false;
+            // this.gameObject.visible = false;
             setCustomVisibility(this.gameObject, false);
         }
@@ -207,6 +249,11 @@
         // force the depthMaterial to everything
         scene.overrideMaterial = this.depthMaterial;
+        if (this.backfaceShadows)
+            this.depthMaterial.side = DoubleSide;
+        else {
+            this.depthMaterial.side = FrontSide;
+        }
         // set renderer clear alpha
         const initialClearAlpha = renderer.getClearAlpha();
@@ -240,7 +287,7 @@
         this.blurShadow(this.blur * 0.4);
         this.shadowGroup.visible = false;
-        if (this.occluderMesh) this.occluderMesh.visible = true;
+        if (this.occluderMesh) this.occluderMesh.visible = this.occludeBelowGround;
         this.plane.visible = planeWasVisible;
         // reset and render the normal scene

src/engine/engine_context.ts CHANGED Viewed

@@ -58,6 +58,7 @@
 export declare class ContextCreateArgs {
 	/** list of glTF or GLB files to load */
 	files: Array<string>;
+	abortSignal?: AbortSignal;
 	/** called when loading a provided glTF file started */
 	onLoadingStart?: (index: number, file: string) => void;
 	/** called on update for each loaded glTF file */
@@ -821,7 +822,9 @@
 			prepare_succeeded = false;
 		}
 		if (!prepare_succeeded) return false;
-		if (createId !== this._createId) return false;
+		if (createId !== this._createId || opts?.abortSignal?.aborted) {
+			return false;
+		}
 		this.internalOnUpdateVisible();
@@ -946,11 +949,14 @@
 				this.domElement?.internalSetLoadingMessage("finish loading");
 			await res;
 		}
+		if (opts?.abortSignal?.aborted) {
+			return false;
+		}
 		invokeLifecycleFunctions(this, ContextEvent.ContextCreated);
 		if (debug) console.log("Context Created...", this.renderer, this.renderer.domElement)
 		this._isCreating = false;
-		if (!this.isManagedExternally)
+		if (!this.isManagedExternally && !opts?.abortSignal?.aborted)
 			this.restartRenderLoop();
 		return res;
 	}
@@ -973,6 +979,10 @@
 		// this hash should be constant since it is used to initialize the UIDProvider per initially loaded scene
 		const loadingHash = 0;
 		for (let i = 0; i < files.length; i++) {
+			if (args.abortSignal?.aborted) {
+				if (debug) console.log("Aborting loading because of abort signal");
+				break;
+			}
 			// abort loading if the create id has changed
 			if (createId !== this._createId) {
 				if (debug) console.log("Aborting loading because create id changed", createId, this._createId);
@@ -982,6 +992,7 @@
 			args?.onLoadingStart?.call(this, i, file);
 			if (debug) console.log("Context Load " + file);
 			const res = await loader.loadSync(this, file, file, loadingHash, prog => {
+				if (args.abortSignal?.aborted) return;
 				progressArg.name = file;
 				progressArg.progress = prog;
 				progressArg.index = i;
@@ -1003,7 +1014,7 @@
 		// if the id was changed while still loading
 		// then we want to cleanup/destroy previously loaded files
-		if (createId !== this._createId) {
+		if (createId !== this._createId || args.abortSignal?.aborted) {
 			for (const res of results) {
 				if (res && res.file) {
 					for (const scene of res.file.scenes)

src/engine/engine_element_loading.ts CHANGED Viewed

@@ -208,7 +208,8 @@
             this._loadingElement.style.flexDirection = "column";
             this._loadingElement.style.pointerEvents = "none";
             this._loadingElement.style.color = "white";
-            this._loadingElement.style.fontFamily = "Roboto, sans-serif, Arial";
+            this._loadingElement.style.fontFamily = 'system-ui, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+            this._loadingElement.style.fontSize = "1rem";
             if (loadingStyle === "light")
                 this._loadingElement.style.color = "rgba(0,0,0,.6)";
             else
@@ -332,9 +333,8 @@
         const messageContainer = document.createElement("div");
         this._messageContainer = messageContainer;
         messageContainer.style.display = "flex";
-        messageContainer.style.fontSize = ".8em";
+        messageContainer.style.fontSize = ".8rem";
         messageContainer.style.paddingTop = ".2rem";
-        messageContainer.style.fontWeight = "200";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
         details.appendChild(messageContainer);

src/engine/engine_element.ts CHANGED Viewed

@@ -261,7 +261,7 @@
         if (debug) console.log("attributeChangedCallback", name, _oldValue, newValue);
         switch (name) {
             case "src":
-                if (debug) console.warn("src changed to type:", typeof newValue, ", from \"", _oldValue, "\" to \"", newValue, "\"")
+                if (debug) console.warn("<needle-engine src>\nchanged from \"", _oldValue, "\" to \"", newValue, "\"")
                 this.onLoad();
                 // this._watcher?.onSourceChanged(newValue);
                 break;
@@ -297,7 +297,9 @@
     }
     private _loadId: number = 0;
+    private _abortController: AbortController | null = null;
     private _lastSourceFiles: Array<string> | null = null;
+    private _createContextPromise: Promise<any> | null = null;
     private async onLoad() {
@@ -313,16 +315,25 @@
         }
         const filesToLoad = this.getSourceFiles();
+        if (!this.checkIfSourceHasChanged(filesToLoad, this._lastSourceFiles)) {
+            return;
+        }
+        // Abort previous loading (if it's still running)
+        if (this._abortController) {
+            if (debug) console.warn("Abort previous loading process")
+            this._abortController.abort();
+            this._abortController = null;
+        }
+        this._lastSourceFiles = filesToLoad;
+        const loadId = ++this._loadId;
         if (filesToLoad === null || filesToLoad === undefined || filesToLoad.length <= 0) {
             if (debug) console.warn("Clear scene", filesToLoad);
             this._context.clear();
+            if (loadId !== this._loadId) return;
         }
-        else if (!this.checkIfSourceHasChanged(filesToLoad, this._lastSourceFiles)) {
-            return;
-        }
-        this._lastSourceFiles = filesToLoad;
-        const loadId = ++this._loadId;
         const alias = this.getAttribute("alias");
         this.classList.add("loading");
@@ -371,7 +382,7 @@
                 }, 300)
             }
         }
-        if (debug) console.warn("--------------", loadId, "Needle Engine: Begin loading", alias ?? "", filesToLoad);
+        if (debug) console.warn("--------------\nNeedle Engine: Begin loading " + loadId + "\n", filesToLoad);
         this.onBeforeBeginLoading();
         const loadedFiles: Array<LoadedGLTF> = [];
@@ -385,9 +396,13 @@
         };
         const progressEvent = new CustomEvent("progress", { detail: progressEventDetail });
         const displayNames = new Array<string>();
+        const controller = new AbortController();
+        this._abortController = controller;
         const args: ContextCreateArgs = {
             files: filesToLoad,
+            abortSignal: controller.signal,
             onLoadingProgress: evt => {
+                if (controller.signal.aborted) return;
                 const index = evt.index;
                 if (!displayNames[index] && evt.name) {
                     displayNames[index] = getDisplayName(evt.name);
@@ -401,6 +416,7 @@
                 this.dispatchEvent(progressEvent);
             },
             onLoadingFinished: (_index, file, glTF) => {
+                if (controller.signal.aborted) return;
                 if (glTF) {
                     loadedFiles.push({
                         src: file,
@@ -414,9 +430,14 @@
         if (currentHash !== null && currentHash !== undefined)
             this._context.hash = currentHash;
         this._context.alias = alias;
-        await this._context.create(args);
-        if (this._loadId !== loadId) return;
-        if (debug) console.warn("--------------", loadId, "Needle Engine: finished loading", alias ?? "", filesToLoad);
+        this._createContextPromise = this._context.create(args);
+        await this._createContextPromise;
+        if (debug) console.warn("--------------\nNeedle Engine: finished loading " + loadId + "\n", filesToLoad, `Aborted? ${controller.signal.aborted}`);
+        if (this._loadId !== loadId || controller.signal.aborted) {
+            console.log("Loading finished but aborted...")
+            return;
+        }
         this._loadingProgress01 = 1;
         if (useDefaultLoading) {
             this._loadingView?.onLoadingUpdate(1, "creating scene");

src/engine/engine_three_utils.ts CHANGED Viewed

@@ -1,6 +1,8 @@
-import { AnimationAction, Euler, Mesh, Object3D, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, Texture, Uniform, Vector3 } from "three";
+import { AnimationAction, Box3, Box3Helper, Euler, GridHelper, Mesh, Object3D, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, ShadowMaterial, Texture, Uniform, Vector3 } from "three";
 import { ShaderMaterial, WebGLRenderer } from "three";
+import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";
+import { useForAutoFit } from "./engine_camera.js";
 import { Mathf } from "./engine_math.js"
 import { CircularBuffer } from "./engine_utils.js";
@@ -445,3 +447,66 @@
         (typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas) ||
         (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap);
 }
+export function getBoundingBox(objects: Object3D[], ignore: Object3D[] = []): Box3 {
+    const box = new Box3();
+    box.makeEmpty();
+    const emptyChildren = [];
+    function expandByObjectRecursive(obj: Object3D) {
+        let allowExpanding = true;
+        // we dont want to check invisible objects
+        if (!obj.visible) return;
+        if (useForAutoFit(obj) === false) return;
+        if (obj.type === "TransformControlsGizmo" || obj.type === "TransformControlsPlane") return;
+        // ignore Box3Helpers
+        if (obj instanceof Box3Helper) allowExpanding = false;
+        if (obj instanceof GridHelper) allowExpanding = false;
+        // ignore GroundProjectedEnv
+        if (obj instanceof GroundedSkybox) allowExpanding = false;
+        // // Ignore shadow catcher geometry
+        if ((obj as Mesh).material instanceof ShadowMaterial) allowExpanding = false;
+        // ONLY fit meshes
+        if (!(obj instanceof Mesh)) allowExpanding = false;
+        // Ignore things parented to the camera + ignore the camera
+        if (ignore?.includes(obj)) return;
+        // We don't want to fit UI objects
+        if (obj["isUI"] === true) return;
+        // If we encountered some geometry that should be ignored
+        // Then we don't want to use that for expanding the view
+        if (allowExpanding) {
+            // Temporary override children
+            const children = obj.children;
+            obj.children = emptyChildren;
+            // TODO: validate that object doesn't contain NaN values
+            const pos = obj.position;
+            const scale = obj.scale;
+            if (Number.isNaN(pos.x) || Number.isNaN(pos.y) || Number.isNaN(pos.z)) {
+                console.warn(`Object \"${obj.name}\" has NaN values in position or scale.... will ignore it`, pos, scale);
+                return;
+            }
+            box.expandByObject(obj, true);
+            obj.children = children;
+        }
+        for (const child of obj.children) {
+            expandByObjectRecursive(child);
+        }
+    }
+    let hasAnyObject = false;
+    for (const object of objects) {
+        if (!object) continue;
+        hasAnyObject = true;
+        object.updateMatrixWorld();
+        expandByObjectRecursive(object);
+    }
+    if (!hasAnyObject) {
+        console.warn("No objects to fit camera to...");
+        return box;
+    }
+    return box;
+}

plugins/types/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export * from './userconfig';
-export * from "./needleConfig";
-export * from "./webmanifest";
+export type * from "./needleConfig.d.ts";
+export type * from './userconfig.d.ts';
+export type * from "./webmanifest.d.ts";

src/engine/js-extensions/Layers.ts CHANGED Viewed

@@ -2,6 +2,10 @@
 const $customVisibilityFlag = Symbol("customVisibilityFlag");
+/**
+ * Sets the visibility of a single object without affecting the visibility of the child hierarchy
+ */
 export function setCustomVisibility(obj: Object3D, visible: boolean) {
     obj.layers[$customVisibilityFlag] = visible;
 }

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -7,7 +7,7 @@
 import { Mathf } from "../engine/engine_math.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
 import type { ICameraController } from "../engine/engine_types.js";
 import { delayForFrames, getParam, isMobileDevice } from "../engine/engine_utils.js";
 import { Camera } from "./Camera.js";
@@ -607,68 +607,12 @@
         const size = new Vector3();
         const center = new Vector3();
-        const box = new Box3();
         // TODO would be much better to calculate the bounds in camera space instead of world space -
         // we would get proper view-dependant fit.
         // Right now it's independent from where the camera is actually looking from,
         // and thus we're just getting some maximum that will work for sure.
+        const box = getBoundingBox(objects);
-        box.makeEmpty();
-        const emptyChildren = [];
-        function expandByObjectRecursive(obj: Object3D) {
-            let allowExpanding = true;
-            // we dont want to check invisible objects
-            if (!obj.visible) return;
-            if (useForAutoFit(obj) === false) return;
-            if(obj.type === "TransformControlsGizmo" || obj.type === "TransformControlsPlane") return;
-            // ignore Box3Helpers
-            if (obj instanceof Box3Helper) allowExpanding = false;
-            if (obj instanceof GridHelper) allowExpanding = false;
-            // ignore GroundProjectedEnv
-            if (obj instanceof GroundedSkybox) allowExpanding = false;
-            // // Ignore shadow catcher geometry
-            if ((obj as Mesh).material instanceof ShadowMaterial) allowExpanding = false;
-            // ONLY fit meshes
-            if (!(obj instanceof Mesh)) allowExpanding = false;
-            // Ignore things parented to the camera + ignore the camera
-            if (obj === camera) return;
-            // We don't want to fit UI objects
-            if (obj["isUI"] === true) return;
-            // If we encountered some geometry that should be ignored
-            // Then we don't want to use that for expanding the view
-            if (allowExpanding) {
-                if (debugCameraFit)
-                    console.log(obj.name, obj.type, obj);
-                // Temporary override children
-                const children_length = obj.children;
-                obj.children = emptyChildren;
-                // TODO: validate that object doesn't contain NaN values
-                const pos = obj.position;
-                const scale = obj.scale;
-                if (Number.isNaN(pos.x) || Number.isNaN(pos.y) || Number.isNaN(pos.z)) {
-                    console.warn(`Object \"${obj.name}\" has NaN values in position or scale.... will ignore it`, pos, scale);
-                    return;
-                }
-                box.expandByObject(obj, true);
-                obj.children = children_length;
-            }
-            for (const child of obj.children) {
-                expandByObjectRecursive(child);
-            }
-        }
-        let hasAnyObject = false;
-        for (const object of objects) {
-            if (!object) continue;
-            hasAnyObject = true;
-            object.updateMatrixWorld();
-            expandByObjectRecursive(object);
-        }
-        if (!hasAnyObject) {
-            console.warn("No objects to fit camera to...");
-            return;
-        }
         camera.updateMatrixWorld();
         camera.updateProjectionMatrix();
         box.getCenter(center);

plugins/types/userconfig.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
+import { NeedlePWAOptions } from "./webmanifest.d.ts";
 export type needleModules = {
     webpack: object | undefined
 }
@@ -50,11 +50,9 @@
     */
     posterGenerationMode?: "default" | "once";
-    /** When set to true the needle pwa plugin will not run */
-    noPWA?: boolean;
-    /** Pass in the VitePWA options */
-    /** @type {import("vite-plugin-pwa").VitePWAOptions} */
-    pwaOptions?: {};
+    /** Pass in a mix of VitePWA and NeedlePWA options, or "false" */
+    /** @type {import("vite-plugin-pwa").VitePWAOptions & Partial<NeedlePWAOptions> | false} */
+    pwa?: undefined;
     /** used by nextjs config to forward the webpack module */
     modules: needleModules

plugins/types/webmanifest.d.ts CHANGED Viewed

@@ -3,8 +3,11 @@
 declare type Icon = {
     src: string;
+    /** string with concatenated size options, e.g. "48x48 96x96 192x192" */
     sizes: string;
+    /** MIME type, e.g. image/svg+xml */
     type: string;
+    /** Icon purpose, e.g. "any" or "maskable", which have different safe zones. */
     purpose: string;
 }
@@ -12,15 +15,19 @@
     start_url: string;
     name?: string;
     short_name?: string;
+    /** Unique ID – make sure that apps that live on the same subdomain use different IDs. */
     id?: string;
     icons?: Array<Icon>;
+    /** Workbox config as used by vite-pwa */
     workbox?: object;
 }
 export declare type NeedlePWAOptions = {
+    /** Update check interval in milliseconds. After this time, a check is done if a new version is available. */
+    updateInterval?: number;
 }
 export declare type NeedlePWAProcessContext = {
+    /** Temporarily generated files that will be cleaned up after PWA export */
     generatedFiles: Array<string>;
 }