@needle-tools/engine 4.14.0 → 4.15.0-next.f391a30

package/plugins/vite/logging.js

@@ -0,0 +1,129 @@
+import picocolors from 'picocolors';
+
+const { createColors, isColorSupported } = picocolors;
+
+const colors = createColors(isColorSupported);
+/** @type {null | (() => void)} */
+let transientLogLineCleaner = null;
+
+function getConsoleMethod(level) {
+    if (level === 'error') return console.error;
+    if (level === 'warn') return console.warn;
+    return console.log;
+}
+
+function colorBodyByLevel(level, text) {
+    if (!isColorSupported) return text;
+    if (level === 'error') return colors.red(text);
+    if (level === 'warn') return colors.yellow(text);
+    return text;
+}
+
+function normalizeMessage(message) {
+    if (Array.isArray(message)) return message.join("\n");
+    if (message === undefined || message === null) return "";
+    return String(message);
+}
+
+function formatHeader(pluginName) {
+    if (!isColorSupported) return `[${pluginName}]`;
+
+    const name = String(pluginName ?? "");
+    let prefix = "";
+    let suffix = name;
+    if (name.startsWith("needle-")) {
+        prefix = "needle-";
+        suffix = name.substring("needle-".length);
+    }
+    else if (name.startsWith("needle:")) {
+        prefix = "needle:";
+        suffix = name.substring("needle:".length);
+    }
+
+    const open = colors.green("[");
+    const close = colors.green("]");
+    if (!prefix.length) {
+        return `${open}${colors.bold(colors.green(name))}${close}`;
+    }
+    const prefixStyled = colors.green(prefix);
+    const suffixStyled = colors.bold(colors.green(suffix));
+    return `${open}${prefixStyled}${suffixStyled}${close}`;
+}
+
+/**
+ * @param {string} pluginName
+ * @param {string | string[]} message
+ * @param {'log' | 'warn' | 'error'} [level='log']
+ * @param {{ dimBody?: boolean, leadingNewline?: boolean, showHeader?: boolean }} [options]
+ */
+export function needleLog(pluginName, message, level = 'log', options = undefined) {
+    if (typeof transientLogLineCleaner === "function") {
+        transientLogLineCleaner();
+    }
+    const log = getConsoleMethod(level);
+    const headerText = formatHeader(pluginName);
+    const bodyText = normalizeMessage(message);
+    const dimBody = options?.dimBody ?? (level === 'log');
+    const leadingNewline = options?.leadingNewline === true;
+    const showHeader = options?.showHeader !== false;
+
+    if (isColorSupported) {
+        const header = `\x1b[0m${headerText}`;
+        const leveledBody = colorBodyByLevel(level, bodyText);
+        const body = bodyText.length > 0
+            ? (dimBody ? leveledBody.split('\n').map(l => colors.dim(l)).join('\n') : leveledBody)
+            : "";
+        const payloadCore = showHeader
+            ? (body.length > 0 ? `${header}\n${body}\n` : `${header}\n`)
+            : (body.length > 0 ? `${body}\n` : "");
+        const payload = leadingNewline ? `\n${payloadCore}` : payloadCore;
+        log(payload);
+        return;
+    }
+
+    if (bodyText.length > 0) {
+        const out = showHeader ? `${headerText} ${bodyText}` : bodyText;
+        log(leadingNewline ? `\n${out}` : out);
+    }
+    else {
+        const out = showHeader ? headerText : "";
+        if (out.length > 0) {
+            log(leadingNewline ? `\n${out}` : out);
+        }
+    }
+}
+
+/**
+ * @param {string} pluginName
+ * @param {string[]} lines
+ * @param {'log' | 'warn' | 'error'} [level='log']
+ */
+export function needleLogLines(pluginName, lines, level = 'log') {
+    needleLog(pluginName, lines.join("\n"), level);
+}
+
+export function needleSupportsColor() {
+    return isColorSupported;
+}
+
+export function needleBlue(text) {
+    const value = String(text ?? "");
+    return isColorSupported ? colors.blue(value) : value;
+}
+
+export function needleDim(text) {
+    const value = String(text ?? "");
+    return isColorSupported ? colors.dim(value) : value;
+}
+
+export function needleGreenBold(text) {
+    const value = String(text ?? "");
+    return isColorSupported ? colors.bold(colors.green(value)) : value;
+}
+
+/**
+ * @param {(() => void) | null} cleaner
+ */
+export function setTransientLogLineCleaner(cleaner) {
+    transientLogLineCleaner = typeof cleaner === "function" ? cleaner : null;
+}

package/plugins/vite/meta.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import { tryGetNeedleEngineVersion } from '../common/version.js';
 import { loadConfig } from './config.js';
 import { getPosterPath } from './poster.js';
+import { needleGreenBold, needleLog } from './logging.js';
 
 /**
  * @param {string} command
@@ -25,7 +26,7 @@ export const needleMeta = (command, config, userSettings) => {
         name: 'needle:meta',
         transformIndexHtml: {
             order: 'pre',
-            handler(html, _ctx) {
+            handler(/** @type {string} */ html, /** @type {unknown} */ _ctx) {
 
                 if (userSettings.allowMetaPlugin === false) return [];
 
@@ -74,7 +75,7 @@ export const needleMeta = (command, config, userSettings) => {
                         tags.push({ tag: 'meta', attrs: { name: 'og:image:height', content: 1080 } });
                     }
                     else if (isBuild) {
-                        console.warn(`Needle: meta.image is set but absolutePath is ${config.absolutePath} in userSettings. Skipping meta.image.`);
+                        needleLog("needle-meta", `meta.image is set but absolutePath is ${config.absolutePath} in userSettings. Skipping meta.image.`, "warn", { dimBody: false });
                     }
                 }
 
@@ -114,10 +115,10 @@ export const needleMeta = (command, config, userSettings) => {
                 const needleEngineVersion = tryGetNeedleEngineVersion();
                 if (needleEngineVersion) {
                     if (command === "build")
-                        console.log("Needle Engine version: " + needleEngineVersion);
+                        needleLog("needle-meta", needleGreenBold(`✨ Needle Engine version: ${needleEngineVersion} 🌵`), "log", { dimBody: false });
                     tags.push({ tag: 'meta', attrs: { name: 'needle-engine', content: needleEngineVersion } });
                 }
-                else console.log("WARN: could not find needle engine package.json")
+                else needleLog("needle-meta", "Could not find needle engine package.json", "warn", { dimBody: false })
 
                 tags.push({ tag: 'meta', attrs: { name: 'needle:buildtime', content: new Date().toISOString() } });
 
@@ -128,6 +129,11 @@ export const needleMeta = (command, config, userSettings) => {
 }
 
 
+/**
+ * @param {string} html
+ * @param {string} url
+ * @returns {string}
+ */
 function updateUrlMetaTag(html, url) {
     const result = `<meta name="url" content="${url}">`;
     html = html.replace(`<meta name="url" content="https://needle.tools">`, result);
@@ -135,14 +141,21 @@ function updateUrlMetaTag(html, url) {
     return html;
 }
 
+/** @param {string} str @returns {string} */
 function appendVersion(str) {
     return str + "?v=" + Date.now();
 }
 
+/** @param {string} url @returns {string} */
 function removeDuplicateSlashesInUrl(url) {
     return url.replace(/([^:]\/)\/+/g, "$1");
 }
 
+/**
+ * @param {string} html
+ * @param {string} name
+ * @returns {string}
+ */
 function removeMetaTag(html, name) {
     // TODO: maybe we could also just replace the content
     const regex = new RegExp(`<meta (name|property)="${name}".+?\/?>`, 'gs');
@@ -154,6 +167,7 @@ function removeMetaTag(html, name) {
     return newHtml;
 }
 
+/** @param {string} html @returns {string} */
 function insertNeedleCredits(html) {
     const needleCredits = `<!-- 🌵 Made with Needle — https://needle.tools -->`;
     html = html.replace(

package/plugins/vite/needle-app.js

@@ -1,5 +1,6 @@
 import { writeFile } from 'fs';
 import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
+import { needleLog } from './logging.js';
 
 
 
@@ -54,15 +55,15 @@ export const needleApp = (command, config, userSettings) => {
                                 const webComponent = generateNeedleEmbedWebComponent(path, main_asset);
                                 await writeFile(`${outputDir}/needle-app.js`, webComponent, (err) => {
                                     if (err) {
-                                        console.error("[needle-app] could not create needle-app.js", err);
+                                        needleLog("needle-app", "Could not create needle-app.js: " + err.message, "error", { dimBody: false });
                                     }
                                     else {
-                                        console.log("[needle-app] created needle-app.js");
+                                        needleLog("needle-app", "Created needle-app.js", "log", { dimBody: false });
                                     }
                                 });
                             }
                             catch (e) {
-                                console.warn("WARN: could not create needle-app.js\n", e);
+                                needleLog("needle-app", "Could not create needle-app.js: " + e.message, "warn", { dimBody: false });
                             }
                         }
                     }

package/plugins/vite/peer.js

@@ -1,4 +1,5 @@
 const peerjsString = `/* needle: fix for peerjs */ window.global = window; var parcelRequire;`
+import { needleLog } from './logging.js';
 
 /**
  * @param {import('../types').userSettings} userSettings
@@ -80,7 +81,7 @@ function patchWebRTCAdapterForGemini(code, id) {
     if(!didTransform) return undefined;
 
     if(!didLog) {
-        console.log("[needle:peerjs] Fixed WebRTC assignment");
+        needleLog("needle:peerjs", "Fixed WebRTC assignment", "log", { dimBody: false });
         didLog = true;
     }
 

package/plugins/vite/pwa.js

@@ -7,6 +7,7 @@ import { getPosterPath } from './poster.js';
 const pwaErrorWithInstructions = "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 needlePlugins and VitePWA plugins:\n\n1. Install the vite PWA plugin: npm install vite-plugin-pwa --save-dev\n\n2. Then update your vite.config.js:\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.";
 
 /** Provides reasonable defaults for a PWA manifest and workbox settings.
+ * @param {string} command
  * @param {import('../types').userSettings} userSettings
  * @param {import("../types/needleConfig").needleMeta | null} config
  * @returns {import('vite').Plugin | void}
@@ -71,7 +72,7 @@ export const needlePWA = (command, config, userSettings) => {
     const customManifest = manifests.length > 0 ? manifests[0] : {};
 
     // ensure we have proper icons/name/description to match user settings
-    processPWA(customManifest, context, pwaOptions, config, userSettings).catch(e => log("Error post processing PWA", customManifest, e));
+    processPWA(customManifest, context, pwaOptions, config, userSettings).catch((/** @type {unknown} */ e) => log("Error post processing PWA", customManifest, e));
     // ensures we have a valid workbox config
     processWorkboxConfig(pwaOptions);
 
@@ -81,14 +82,15 @@ export const needlePWA = (command, config, userSettings) => {
     // for debugging
     // log("PWA options", pwaOptions);
 
-    return {
+    return /** @type {import('vite').Plugin} */ ({
         name: 'needle:pwa',
         apply: 'build',
         enforce: "post",
-        config(viteConfig) {
+        config(/** @type {{ plugins?: Array<Record<string,unknown>> }} */ viteConfig) {
             // Move the gzip plugin after PWA bundling
             let gzipPluginIndex = -1;
             let pwaPluginIndex = -1;
+            /** @type {Record<string, unknown> | null} */
             let gzipPlugin = null;
             if (viteConfig.plugins) {
                 for (let i = viteConfig.plugins.length - 1; i >= 0; i--) {
@@ -168,7 +170,7 @@ export const needlePWA = (command, config, userSettings) => {
                     }
                 }
             }
-            catch (err) {
+            catch (/** @type {unknown} */ err) {
                 cleanup(context);
                 throw err;
             }
@@ -251,7 +253,7 @@ updateSW = registerSW({
             try {
                 copyIcons(pwaOptions.manifest, outputDir);
             }
-            catch (e) {
+            catch (/** @type {unknown} */ e) {
                 log("Error post processing PWA", e);
             }
 
@@ -261,20 +263,23 @@ updateSW = registerSW({
                 console.log(msg);
             }
         }
-    }
+    })
 }
 
 /** Checks if the vite-plugin-pwa is present in the vite config
- * @param {import('vite').ResolvedConfig} config
+ * @param {{ plugins?: readonly unknown[] }} config
  * @returns {import('vite-plugin-pwa').VitePWAOptions | null}
  */
 function findVitePWAPlugin(config) {
-    const plugins = config.plugins || [];
+    const plugins = /** @type {Array<Record<string,unknown>>} */ (config.plugins || []);
+    /** @param {unknown} p
+     * @returns {Record<string, unknown> | undefined}
+     */
     function _findVitePWAPlugin(p) {
         if (Array.isArray(p))
-            return p.find(_findVitePWAPlugin);
-        if (p?.name === "vite-plugin-pwa")
-            return p;
+            return /** @type {Array<unknown>} */ (p).find(_findVitePWAPlugin);
+        if (/** @type {Record<string,unknown>} */(p)?.name === "vite-plugin-pwa")
+            return /** @type {Record<string, unknown>} */ (p);
     }
     for (const plugin of plugins) {
         const foundVitePWAPlugin = _findVitePWAPlugin(plugin);
@@ -283,6 +288,7 @@ function findVitePWAPlugin(config) {
     return null;
 }
 
+/** @param {import('../types/index.d.ts').NeedlePWAProcessContext} context */
 function cleanup(context) {
     for (const file of context.generatedFiles) {
         log("Cleanup generated file", file);
@@ -291,6 +297,7 @@ function cleanup(context) {
     context.generatedFiles.length = 0;
 }
 
+/** @param {...unknown} args */
 function log(...args) {
     console.log("[needle-pwa]", ...args);
 }
@@ -337,10 +344,16 @@ async function processPWA(webmanifestPath, context, pwaOptions, config, userSett
     // 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')) : {};
+    const packageJson = /** @type {{ name?: string, description?: string }} */ (existsSync(packageJsonPath) ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : {});
 
-    const name = packageJson.name;
     const appName = config?.sceneName || packageJson.name || "Needle App";
+    const packageName = typeof packageJson.name === "string" && packageJson.name.length > 0
+        ? packageJson.name
+        : appName;
+    const packageNameSanitized = packageName
+        .toLowerCase()
+        .replace(/[^a-z0-9\/\-]/g, '')
+        .replace("\/", ".");
     const description = typeof config?.meta === "string"
         ? config.meta : config?.meta?.description
         || packageJson.description
@@ -351,9 +364,11 @@ async function processPWA(webmanifestPath, context, pwaOptions, config, userSett
         // Use the same title as in NeedleMeta
         name: appName,
         short_name: appName,
-        id: "app.made-with-needle." + name.toLowerCase().replace(/[^a-z0-9\/\-]/g, '').replace("\/", "."),
+        id: "app.made-with-needle." + packageNameSanitized,
         description,
         start_url: "./index.html",
+        theme_color: "#000000",
+        background_color: "#000000",
         display: "standalone",
         display_override: [
             "window-controls-overlay",
@@ -423,7 +438,7 @@ function processIcons(manifest, outDir, context) {
                 modified = true;
             }
         }
-        catch (e) {
+        catch (/** @type {unknown} */ e) {
             log("Error processing PWA icon[" + i + "]", e);
         }
     }
@@ -460,6 +475,7 @@ function generateIcons(manifest, context) {
 /** 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
+ * @param {string} outDir
  */
 function copyIcons(manifest, outDir) {
     for (let i = 0; i < manifest.icons?.length; i++) {
@@ -492,7 +508,7 @@ function copyIcons(manifest, outDir) {
                 copyFileSync(srcPath, targetPath);
             }
         }
-        catch (e) {
+        catch (/** @type {unknown} */ e) {
             log("Error processing PWA icon[" + i + "]", e);
         }
     }
@@ -582,7 +598,7 @@ function processWorkboxConfig(manifest) {
             },
             // allow caching local resources
             {
-                urlPattern: ({ url }) => url,
+                urlPattern: (/** @type {{ url: URL }} */ { url }) => url,
                 // Apply a network-first strategy.
                 handler: 'NetworkFirst',
                 options: {

package/plugins/vite/reload.js

@@ -1,17 +1,22 @@
+// @ts-check
 import path from 'path';
 import { loadConfig, tryLoadProjectConfig } from './config.js';
 import { getPosterPath } from './poster.js';
 import * as crypto from 'crypto';
 import { existsSync, readFileSync, statSync } from 'fs';
 import { fileURLToPath } from 'url';
+import { needleLog } from './logging.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+/** @type {Set<string>} */
 const filesUsingHotReload = new Set();
 let assetsDirectory = "";
 
 /**
+ * @param {string} command
+ * @param {import('../types').userSettings | null} config
  * @param {import('../types').userSettings} userSettings
  */
 export const needleReload = (command, config, userSettings) => {
@@ -34,7 +39,8 @@ export const needleReload = (command, config, userSettings) => {
 
     const buildDirectory = projectConfig?.buildDirectory?.length ? process.cwd().replaceAll("\\", "/") + "/" + projectConfig?.buildDirectory : "";
     if (buildDirectory?.length) {
-        setTimeout(() => console.log("Build directory: ", buildDirectory), 100);
+        const relativeBuildDirectory = path.relative(process.cwd(), buildDirectory).replaceAll("\\", "/") || ".";
+        setTimeout(() => needleLog("needle-reload", "Build directory: " + relativeBuildDirectory), 100);
     }
 
     // These ignore patterns will be injected into user config to better control vite reloading
@@ -44,6 +50,7 @@ export const needleReload = (command, config, userSettings) => {
 
     return {
         name: 'needle:reload',
+        /** @param {import('vite').UserConfig} config */
         config(config) {
             if (!config.server) config.server = { watch: { ignored: [] } };
             else if (!config.server.watch) config.server.watch = { ignored: [] };
@@ -51,12 +58,14 @@ export const needleReload = (command, config, userSettings) => {
             for (const pattern of ignorePatterns)
                 config.server.watch.ignored.push(pattern);
             if (config?.debug === true || userSettings?.debug === true)
-                setTimeout(() => console.log("Updated server ignore patterns: ", config.server.watch.ignored), 100);
+                setTimeout(() => needleLog("needle-reload", "Updated server ignore patterns: " + JSON.stringify(config.server.watch.ignored)), 100);
         },
+        /** @param {{file: string, server: import('vite').ViteDevServer, modules: unknown[], read: (file?: string) => Promise<string>, buildDirectory?: string}} args */
         handleHotUpdate(args) {
             args.buildDirectory = buildDirectory;
             return handleReload(args);
         },
+        /** @param {string} src @param {string} id */
         transform(src, id) {
             if (!id.includes(".ts")) return;
             updateConfig();
@@ -67,6 +76,7 @@ export const needleReload = (command, config, userSettings) => {
         },
         transformIndexHtml: {
             order: 'pre',
+            /** @param {string} html @param {unknown} _ */
             handler(html, _) {
                 if (config?.allowHotReload === false) return html;
                 if (userSettings?.allowHotReload === false) return html;
@@ -91,6 +101,7 @@ export const needleReload = (command, config, userSettings) => {
 }
 
 
+/** @type {string[]} */
 const ignorePatterns = [];
 const ignoreRegex = new RegExp(ignorePatterns.join("|"));
 
@@ -99,11 +110,15 @@ const posterPath = getPosterPath();
 let reloadIsScheduled = false;
 const lockFileName = "needle.lock";
 
+/** @param {import('vite').ViteDevServer} server @param {string} [file] */
 function notifyClientWillReload(server, file) {
     console.log("Send reload notification");
     server.ws.send('needle:reload', { type: 'will-reload', file: file });
 }
 
+/**
+ * @param {{file: string, server: import('vite').ViteDevServer, modules: unknown[], read: (file?: string) => Promise<string>, buildDirectory?: string}} param0
+ */
 async function handleReload({ file, server, modules, read, buildDirectory }) {
 
     // dont reload the full page on css changes
@@ -191,6 +206,7 @@ async function handleReload({ file, server, modules, read, buildDirectory }) {
 }
 
 
+/** @param {import('vite').ViteDevServer} server @param {number} [level] */
 async function scheduleReload(server, level = 0) {
     if (reloadIsScheduled && level === 0) return;
     reloadIsScheduled = true;
@@ -224,6 +240,7 @@ async function scheduleReload(server, level = 0) {
 
 const projectDirectory = process.cwd().replaceAll("\\", "/");
 
+/** @param {string} file @returns {string} */
 function getFileNameLog(file) {
     if (file.startsWith(projectDirectory)) {
         return file.substring(projectDirectory.length);
@@ -231,9 +248,11 @@ function getFileNameLog(file) {
     return file;
 }
 
+/** @type {Map<string, string>} */
 const hashes = new Map();
 const hash256 = crypto.createHash('sha256');
 
+/** @param {string} file @param {(file?: string) => Promise<string>} read @returns {Promise<boolean>} */
 async function testIfFileContentChanged(file, read) {
     let content = await read(file);
     content = removeVersionQueryArgument(content);
@@ -252,6 +271,7 @@ async function testIfFileContentChanged(file, read) {
     }
     return false;
 }
+/** @param {string} content @returns {string} */
 function removeVersionQueryArgument(content) {
     if (typeof content === "string") {
         // Some codegen files include hashes for loading glb files (e.g. ?v=213213124)
@@ -266,6 +286,7 @@ function removeVersionQueryArgument(content) {
 
 
 
+/** @param {string} src @param {string} filePath @returns {string} */
 function insertScriptRegisterHotReloadCode(src, filePath) {
 
     // We only want to inject the hot reload code in the needle-engine root file
@@ -284,6 +305,7 @@ globalThis.NEEDLE_HOT_RELOAD_ENABLED = true;
 const HOT_RELOAD_START_MARKER = "NEEDLE_HOT_RELOAD_BEGIN";
 const HOT_RELOAD_END_MARKER = "NEEDLE_HOT_RELOAD_END";
 
+/** @param {string} src @param {string} filePath @returns {{code: string, map: null} | undefined} */
 function insertScriptHotReloadCode(src, filePath) {
     if (filePath.includes("engine_hot_reload")) return;
     if (filePath.includes(".vite")) return;

package/src/engine/api.ts

@@ -354,9 +354,6 @@ export { type ISerializable } from "./engine_serialization_core.js";
 // General-purpose utility functions and helpers.
 // ============================================================================
 
-/** Testing utilities for automated tests */
-export * from "./engine_test_utils.js";
-
 /** Texture utilities and processing */
 export * from "./engine_texture.js";
 

package/src/engine/debug/debug.ts

@@ -8,7 +8,7 @@ export {
     clearMessages as clearOverlayMessages,
     LogType,
     setAllowBalloonMessages,
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     setAllowOverlayMessages,
 };
 export { enableSpatialConsole } from "./debug_spatial_console.js";

package/src/engine/debug/debug_spatial_console.ts

@@ -169,7 +169,11 @@ class SpatialMessagesHandler {
 
         if (!fontFamily) {
             fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
-            const variant = fontFamily.addVariant("normal", "normal", "./include/needle/arial-msdf.json", "./include/needle/arial.png") as any as ThreeMeshUI.FontVariant;
+            const variant = fontFamily.addVariant(
+                "normal", 
+                "normal", 
+                "https://cdn.needle.tools/static/fonts/msdf/arial/arial-msdf.json", 
+                "https://cdn.needle.tools/static/fonts/msdf/arial/arial.png") as any as ThreeMeshUI.FontVariant;
             /** @ts-ignore */
             variant?.addEventListener('ready', () => {
                 ThreeMeshUI.update();