@needle-tools/engine 4.10.5-next.a5d5bf4 → 4.11.0-next.358bed1

package/lib/engine-components/web/CursorFollow.js

@@ -4,9 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { Ray } from "three";
+import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../../engine/engine_three_utils.js";
+import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
+const debug = getParam("debugcursor");
 /**
  * The CursorFollow component makes the object follow the cursor (or touch) position on screen.
  *
@@ -32,6 +36,10 @@ export class CursorFollow extends Behaviour {
      * @default true
      */
     keepDistance = true;
+    /**
+     * If true, the object will attempt to snap to the surface of other objects in the scene using a raycast.
+     */
+    snapToSurface = false;
     _distance = -1;
     updateDistance(force = false) {
         if (!force && (this.keepDistance && this._distance !== -1)) {
@@ -43,10 +51,12 @@ export class CursorFollow extends Behaviour {
     awake() {
         this._distance = -1;
     }
+    /** @internal */
     onEnable() {
         this._distance = -1;
         window.addEventListener('pointermove', this._onPointerMove);
     }
+    /** @internal */
     onDisable() {
         window.removeEventListener('pointermove', this._onPointerMove);
     }
@@ -65,7 +75,7 @@ export class CursorFollow extends Behaviour {
         this._ndc_y = -(y - domy) / domh * 2 + 1;
     };
     /** @internal */
-    update() {
+    lateUpdate() {
         // continuously update distance in case camera or object moves
         this.updateDistance();
         const x = this.useFullPage ? this._ndc_x : this.context.input.mousePositionRC.x;
@@ -77,15 +87,34 @@ export class CursorFollow extends Behaviour {
         const rayDirection = getTempVector(x, y, 1).unproject(camera);
         rayDirection.sub(cameraPosition).normalize();
         // position object at initial distance along the ray
-        const newPosition = rayDirection.multiplyScalar(this._distance).add(cameraPosition);
+        const newPosition = getTempVector(rayDirection).multiplyScalar(this._distance).add(cameraPosition);
+        let _position = newPosition;
         if (this.damping > 0) {
             const pos = this.gameObject.worldPosition;
             pos.lerp(newPosition, this.context.time.deltaTime / this.damping);
             this.gameObject.worldPosition = pos;
+            _position = pos;
         }
         else {
             this.gameObject.worldPosition = newPosition;
         }
+        if (this.snapToSurface) {
+            ray.origin = _position;
+            ray.direction = rayDirection.multiplyScalar(-1);
+            const hits = this.context.physics.raycastFromRay(ray);
+            if (hits?.length) {
+                const hit = hits[0];
+                if (this.damping > 0) {
+                    this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
+                }
+                else {
+                    this.gameObject.worldPosition = hit.point;
+                }
+                if (debug) {
+                    Gizmos.DrawLine(hit.point, hit.normal.add(hit.point), 0x00FF00);
+                }
+            }
+        }
     }
 }
 __decorate([
@@ -97,4 +126,8 @@ __decorate([
 __decorate([
     serializable()
 ], CursorFollow.prototype, "keepDistance", void 0);
+__decorate([
+    serializable()
+], CursorFollow.prototype, "snapToSurface", void 0);
+const ray = new Ray();
 //# sourceMappingURL=CursorFollow.js.map

package/lib/engine-components/web/CursorFollow.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/CursorFollow.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CursorFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/CursorFollow.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.10.5-next.a5d5bf4",
+  "version": "4.11.0-next.358bed1",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {

package/plugins/common/needle-engine.js

@@ -0,0 +1,41 @@
+
+
+// https://regex101.com/r/SVhzzD/1
+// @ts-ignore
+const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
+
+
+/**
+ * @param {string} html
+ * @returns {string[]} urls
+ */
+export function tryParseNeedleEngineSrcAttributeFromHtml(html) {
+    const needleEngineMatches = html.matchAll(needleEngineRegex);
+    
+    /**
+     * @type {string[]}
+     */
+    const results = [];
+
+    if (needleEngineMatches) {
+        while (true) {
+            const match = needleEngineMatches.next();
+            if (match.done) break;
+            /** @type {undefined | null | string} */
+            const value = match.value?.groups?.src;
+            if (value) {
+                if (value.startsWith("[")) {
+                    // we have an array assigned
+                    const arr = JSON.parse(value);
+                    for (const item of arr) {
+                        results.push(item);
+                    }
+                }
+                else {
+                    results.push(value);
+                }
+            }
+        }
+    }
+    return results;
+}

package/plugins/common/worker.js

@@ -0,0 +1,130 @@
+
+
+
+
+/** 
+ * @type {() => import("vite").Plugin}
+ */
+export function viteFixWorkerImport() {
+    return {
+        name: 'vite-rewriteWorkerImport',
+        config: function (config, env) {
+            if (!config.build) {
+                config.build = {};
+            }
+            if (!config.build.rollupOptions) {
+                config.build.rollupOptions = {};
+            }
+            if (!config.build.rollupOptions.plugins) {
+                config.build.rollupOptions.plugins = [];
+            }
+            if (!Array.isArray(config.build.rollupOptions.plugins)) {
+                const value = config.build.rollupOptions.plugins;
+                config.build.rollupOptions.plugins = [];
+                config.build.rollupOptions.plugins.push(value);
+            }
+            config.build.rollupOptions.plugins.push(rollupFixWorkerImport({ logFail: false }));
+        }
+    }
+}
+
+
+
+// https://regex101.com/r/hr01H4/1
+const regex = /new\s+Worker\s*\(\s*new\s+URL\s*\(\s*(?:\/\*.*?\*\/\s*)?\"(?<url>[^"]+)\"\s*,\s*(?<base>import\.meta\.url|self\.location)[^)]*\)/gm;
+
+
+
+/** 
+ * @type {(opts?: {logFail:boolean}) => import("vite").Plugin} 
+*/
+export function rollupFixWorkerImport(opts = { logFail: true }) {
+    return {
+        name: 'rewriteWorkerImport',
+        renderChunk: {
+            order: 'post',
+            async handler(code, chunk, outputOptions) {
+                let regexMatchedWorkerCode = false;
+                const newWorkerStartIndex = code.indexOf("new Worker");
+                if (newWorkerStartIndex >= 0) {
+                    const res = code.replace(regex, (match, url, _base) => {
+                        regexMatchedWorkerCode = true;
+                        // console.log("WORKER?", url)
+                        if (url?.startsWith("/")) {
+                            console.log(`[rollup] Rewrite worker import in ${chunk.fileName}`);
+                            // Make url file-relative
+                            const newUrl = url.replace(/^\//, "");
+                            // For CORS issues we need to use importScripts: https://linear.app/needle/issue/NE-6572#comment-ea5dc65e
+                            const output = `/* new-worker */ new Worker(URL.createObjectURL(new Blob(["import '" + \`\${new URL('./${newUrl}', import.meta.url).toString()}\` + "';"], { type: 'text/javascript' }))`;
+                            console.log("[rollup] Did rewrite worker output to:", output);
+                            return output;
+                            // return `new Worker(new URL("./${newUrl}", import.meta.url)`;
+                        }
+                        return match;
+                    });
+                    if (!regexMatchedWorkerCode) {
+
+                        const fixedCode = fixWorkerSelfLocation(chunk.fileName, code);
+                        if (fixedCode !== code) {
+                            return fixedCode;
+                        }
+                        if (opts?.logFail !== false) {
+                            const str = `[...]${code.substring(newWorkerStartIndex, newWorkerStartIndex + 200)}[...]`
+                            console.warn(`\n[rollup] Worker import in ${chunk.fileName} was not rewritten: ${str}`);
+                        }
+                        else console.log(`[rollup] Worker import in ${chunk.fileName}: ${str}`);
+                    }
+                    return res;
+                }
+            },
+        }
+    };
+}
+
+
+/**
+ * Fix worker self.location to import.meta.url
+ * @param {string} filename
+ * @param {string} code
+ */
+function fixWorkerSelfLocation(filename, code) {
+    let lastIndex = 0;
+    while (true) {
+        const startIndex = code.indexOf("new Worker", lastIndex);
+        if (startIndex < 0) break;
+        let index = startIndex + 1;
+        let endIndex = -1;
+        let openingBraceCount = 0;
+        let foundAnyOpening = false;
+        while (true) {
+            const char = code[index];
+            if (char === "(") {
+                openingBraceCount++;
+                foundAnyOpening = true;
+            }
+            if (char === ")") openingBraceCount--;
+            if (openingBraceCount === 0 && foundAnyOpening) {
+                endIndex = index;
+                break;
+            }
+            // console.log(openingBraceCount, char, index, code.length);
+            index++;
+            if (index >= code.length) break;
+        }
+        if (endIndex > startIndex) {
+            const workerCode = code.substring(startIndex, endIndex + 1);
+            if (workerCode.indexOf("self.location") >= 0) {
+                const fixedCode = workerCode.replace("self.location", "import.meta.url");
+                code = code.substring(0, startIndex) + fixedCode + code.substring(endIndex + 1);
+                lastIndex = startIndex + fixedCode.length;
+                console.log(`[rollup] Rewrite worker 'self.location' to 'import.meta.url' in ${filename}`);
+            } else {
+                lastIndex = endIndex;
+            }
+        }
+        else {
+            lastIndex = startIndex + "new Worker".length;
+        }
+    }
+    return code;
+}

package/plugins/vite/asap.js

@@ -1,5 +1,6 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
+import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
 import { preloadScriptPaths } from './dependencies.js';
 import { makeFilesLocalIsEnabled } from './local-files.js';
 
@@ -159,10 +160,6 @@ function generateScriptPreloadLinks(_config, tags) {
 // @ts-ignore
 const codegenRegex = /\"(?<gltf>.+(.glb|.gltf)(\?.*)?)\"/gm;
 
-// https://regex101.com/r/SVhzzD/1
-// @ts-ignore
-const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
-
 /**
  * @param {import('../types').needleConfig} config
  * @param {string} html
@@ -171,25 +168,10 @@ const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
 function generateGltfPreloadLinks(config, html, tags) {
 
     // TODO: try to get the <needle-engine src> element src attribute and preload that
-    const needleEngineMatches = html.matchAll(needleEngineRegex);
-    if (needleEngineMatches) {
-        while (true) {
-            const match = needleEngineMatches.next();
-            if (match.done) break;
-            /** @type {undefined | null | string} */
-            const value = match.value?.groups?.src;
-            if (value) {
-                if (value.startsWith("[")) {
-                    // we have an array assigned
-                    const arr = JSON.parse(value);
-                    for (const item of arr) {
-                        insertPreloadLink(tags, item, "model/gltf+json");
-                    }
-                }
-                else {
-                    insertPreloadLink(tags, value, "model/gltf+json");
-                }
-            }
+    const needleEngineMatches = tryParseNeedleEngineSrcAttributeFromHtml(html);
+    if (needleEngineMatches?.length) {
+        for (const item of needleEngineMatches) {
+            insertPreloadLink(tags, item, "model/gltf+json");
         }
     }
 

package/plugins/vite/dependencies.js

@@ -8,23 +8,26 @@ export const preloadScriptPaths = [];
 
 /**
  * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[]}
  */
 export const needleDependencies = (command, config, userSettings) => {
 
     /**
      * @type {import('vite').Plugin}
      */
-    return {
-        name: 'needle:dependencies',
-        enforce: 'pre',
-        /**
-         * @param {import('vite').UserConfig} config
-         */
-        config: (config, env) => {
-            handleOptimizeDeps(config);
-            handleManualChunks(config);
-        }
-    }
+    return [
+        {
+            name: 'needle:dependencies',
+            enforce: 'pre',
+            /**
+             * @param {import('vite').UserConfig} config
+             */
+            config: (config, env) => {
+                handleOptimizeDeps(config);
+                handleManualChunks(config);
+            },
+        },
+    ]
 }
 
 const excludeDependencies = [
@@ -167,6 +170,13 @@ function handleManualChunks(config) {
                 return name;
             }
         }
+        // else if(chunk.name === 'index') {
+        //     console.log(chunk);
+        //     debugger
+        //     // this is the main chunk
+        //     // we don't want to add a hash here to be able to easily import the main script
+        //     return `index.js`;
+        // }
         return `assets/[name].[hash].js`;
     }
 

package/plugins/vite/index.js

@@ -68,6 +68,8 @@ import { needleNPM } from "./npm.js";
 import { needleTransformCode } from "./transform.js";
 import { needleMaterialXLoader } from "./materialx.js";
 import { needleLogger } from "./logger.js";
+import { needleApp } from "./needle-app.js";
+import { viteFixWorkerImport } from "../common/worker.js";
 export { needleServer } from "./server.js";
 
 
@@ -137,6 +139,8 @@ export const needlePlugins = async (command, config = undefined, userSettings =
         needleServer(command, config, userSettings),
         needleNPM(command, config, userSettings),
         needleMaterialXLoader(command, config, userSettings),
+        needleApp(command, config, userSettings),
+        viteFixWorkerImport()
     ];
 
     const asap = await needleAsap(command, config, userSettings);

package/plugins/vite/needle-app.js

@@ -0,0 +1,148 @@
+import { writeFile } from 'fs';
+import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
+
+
+
+/**
+ * @param {'serve' | 'build'} command
+ * @param {{} | undefined | null} config
+ * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[] | null}
+ */
+export const needleApp = (command, config, userSettings) => {
+
+    if (command !== "build") {
+        return null;
+    }
+
+    /** @type {Array<import("rollup").OutputChunk>} */
+    const entryFiles = new Array();
+
+    let outputDir = "dist";
+
+    /**
+     * @type {import('vite').Plugin}
+     */
+    return [
+        {
+            name: 'needle:app',
+            enforce: "post",
+            configResolved(config) {
+                outputDir = config.build.outDir || "dist";
+            },
+            transformIndexHtml: {
+                handler: async function (html, context) {
+                    const name = context.filename;
+                    if (name.includes("index.html")) {
+                        if (context.chunk?.isEntry) {
+                            try {
+                                entryFiles.push(context.chunk);
+                                const path = context.chunk.fileName;
+                                // console.log("[needle-dependencies] entry chunk imports", {
+                                //     name: context.chunk.fileName,
+                                //     imports: context.chunk.imports,
+                                //     dynamicImports: context.chunk.dynamicImports,
+                                //     refs: context.chunk.referencedFiles,
+                                // });
+
+                                const referencedGlbs = tryParseNeedleEngineSrcAttributeFromHtml(html);
+                                const webComponent = generateNeedleEmbedWebComponent(path, referencedGlbs);
+                                await writeFile(`${outputDir}/needle-app.js`, webComponent, (err) => {
+                                    if (err) {
+                                        console.error("[needle-app] could not create needle-app.js", err);
+                                    }
+                                    else {
+                                        console.log("[needle-app] created needle-app.js");
+                                    }
+                                });
+                            }
+                            catch (e) {
+                                console.warn("WARN: could not create needle-app.js\n", e);
+                            }
+                        }
+                    }
+                }
+            },
+
+        }
+    ]
+}
+
+
+/**
+ * @param {string} filepath
+ * @param {string[]} needleEngineSrcPaths
+ * @returns {string}
+ */
+function generateNeedleEmbedWebComponent(filepath, needleEngineSrcPaths) {
+
+
+    // filepath is e.g. `assets/index-XXXXXXXX.js`
+    // we want to make sure the path is correct relative to where the component will be used
+    // this script will be emitted in the output directory root (e.g. needle-embed.js)
+
+    const src = needleEngineSrcPaths?.length ? `${needleEngineSrcPaths[0]}` : "";
+
+    const componentName = 'needle-app';
+    const className = 'NeedleApp';
+
+    return `
+class ${className} extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const template = document.createElement('template');
+        template.innerHTML = \`
+            <style>
+                :host {
+                    position: relative;
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    margin: 0;
+                    padding: 0;
+                }
+                needle-engine {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+            </style>
+        \`;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+        const script = document.createElement('script');
+        script.type = 'module';
+        const url = new URL('.', import.meta.url);
+        let basePath = this.getAttribute('base-path') || \`\${url.protocol}//\${url.host}\${url.pathname}\`;
+        while(basePath.endsWith('/')) {
+            basePath = basePath.slice(0, -1);
+        }
+        script.src = this.getAttribute('script-src') || \`\${basePath}/${filepath}\`;
+        this.shadowRoot.appendChild(script);
+
+        const needleEngine = document.createElement('needle-engine');
+        needleEngine.src = this.getAttribute('src') || ${src?.length ? `\${basePath}/${needleEngineSrcPaths}` : undefined};
+        this.shadowRoot.appendChild(needleEngine);
+
+        console.debug(basePath, script.src, needleEngine.getAttribute("src"));
+    }
+
+    onConnectedCallback() {
+        console.debug('NeedleEmbed connected to the DOM');
+    }
+
+    disconnectedCallback() {
+        console.debug('NeedleEmbed disconnected from the DOM');
+    }
+}
+
+
+if (!customElements.get('${componentName}')) {
+    console.debug("Defining ${componentName}");
+    customElements.define('${componentName}', ${className});
+}
+`
+}

package/src/engine/codegen/register_types.ts

@@ -90,6 +90,7 @@ import { SkinnedMeshRenderer } from "../../engine-components/Renderer.js";
 import { Rigidbody } from "../../engine-components/RigidBody.js";
 import { SceneSwitcher } from "../../engine-components/SceneSwitcher.js";
 import { ScreenCapture } from "../../engine-components/ScreenCapture.js";
+import { SeeThrough } from "../../engine-components/SeeThrough.js";
 import { ShadowCatcher } from "../../engine-components/ShadowCatcher.js";
 import { RemoteSkybox } from "../../engine-components/Skybox.js";
 import { SmoothFollow } from "../../engine-components/SmoothFollow.js";
@@ -249,6 +250,7 @@ TypeStore.add("SkinnedMeshRenderer", SkinnedMeshRenderer);
 TypeStore.add("Rigidbody", Rigidbody);
 TypeStore.add("SceneSwitcher", SceneSwitcher);
 TypeStore.add("ScreenCapture", ScreenCapture);
+TypeStore.add("SeeThrough", SeeThrough);
 TypeStore.add("ShadowCatcher", ShadowCatcher);
 TypeStore.add("RemoteSkybox", RemoteSkybox);
 TypeStore.add("SmoothFollow", SmoothFollow);

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -289,11 +289,11 @@ export class Gizmos {
         const mesh = Internal.getMesh(options.duration ?? 0);
         if ("mesh" in options) {
             mesh.geometry = options.mesh.geometry;
-            mesh.matrix.copy(options.mesh.matrixWorld);
+            mesh.matrixWorld.copy(options.mesh.matrixWorld);
         }
         else {
             mesh.geometry = options.geometry;
-            mesh.matrix.copy(options.matrix);
+            mesh.matrixWorld.copy(options.matrix);
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;