@needle-tools/engine 4.8.8-next.e80f4d7 → 4.8.9-next.5e888f7

package/lib/engine-components/splines/SplineUtils.js

@@ -0,0 +1,33 @@
+import { Vector3 } from "three";
+import { Mathf } from "../../engine/engine_math.js";
+import { SplineContainer, SplineData } from "./Spline.js";
+export var SplineUtils;
+(function (SplineUtils) {
+    /**
+     * Creates a SplineContainer from an array of points.
+     * @param positions The positions of the knots.
+     * @param closed Whether the spline is closed (the last knot connects to the first).
+     * @param tension The tension of the spline. 0 is no tension, 1 is high tension (straight lines between knots). Default is 0.75.
+     * @return The created SplineContainer component - add it to an Object3D to use it.
+     */
+    function createFromPoints(positions, closed = false, tension = .75) {
+        const spline = new SplineContainer();
+        const tangentFactor = 1 - Mathf.clamp(tension, 0, 1);
+        positions.forEach((pos, index) => {
+            const tangent = new Vector3();
+            if (index < positions.length - 1)
+                tangent.subVectors(positions[index + 1], pos).normalize().multiplyScalar(tangentFactor);
+            else if (closed && positions.length > 1)
+                tangent.subVectors(positions[0], pos).normalize().multiplyScalar(tangentFactor);
+            const knot = new SplineData();
+            knot.position.copy(pos);
+            knot.tangentIn.copy(tangent);
+            knot.tangentOut.copy(tangent);
+            spline.addKnot(knot);
+        });
+        spline.closed = closed;
+        return spline;
+    }
+    SplineUtils.createFromPoints = createFromPoints;
+})(SplineUtils || (SplineUtils = {}));
+//# sourceMappingURL=SplineUtils.js.map

package/lib/engine-components/splines/SplineUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplineUtils.js","sourceRoot":"","sources":["../../../src/engine-components/splines/SplineUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,KAAW,WAAW,CAyB3B;AAzBD,WAAiB,WAAW;IAExB;;;;;;OAMG;IACH,SAAgB,gBAAgB,CAAC,SAAoB,EAAE,SAAkB,KAAK,EAAE,UAAkB,GAAG;QACjG,MAAM,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;QACrC,MAAM,aAAa,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACrD,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;YAC9B,IAAI,KAAK,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;iBACrH,IAAI,MAAM,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;YACzH,MAAM,IAAI,GAAG,IAAI,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QACvB,OAAO,MAAM,CAAC;IAClB,CAAC;IAfe,4BAAgB,mBAe/B,CAAA;AACL,CAAC,EAzBgB,WAAW,KAAX,WAAW,QAyB3B"}

package/lib/engine-components/splines/SplineWalker.d.ts

@@ -0,0 +1,47 @@
+import { Object3D } from "three";
+import { Behaviour } from "../Component.js";
+import { SplineContainer } from "./Spline.js";
+/**
+ * Moves an object along a spline. Use this with a SplineContainer component.
+ */
+export declare class SplineWalker extends Behaviour {
+    /**
+     * The spline to use/walk along. Add a SplineContainer component to an object and assign it here.
+     */
+    spline: SplineContainer | null;
+    /** The object to move along the spline. If object is undefined then the spline walker will use the gameObject the component has been added to
+     * @default undefined
+    */
+    object?: Object3D | null;
+    /** The object to look at while moving along the spline
+     * @default null
+    */
+    lookAt: Object3D | null;
+    /**
+     * When clamp is set to true, the position01 value will be clamped between 0 and 1 and the object will not loop the spline.
+     * @default false
+     */
+    clamp: boolean;
+    /** The current position on the spline. The value ranges from 0 (start of the spline curve) to 1 (end of the spline curve)
+     * @default 0
+     */
+    get position01(): number;
+    set position01(v: number);
+    /** Resets the position to 0 */
+    reset(): void;
+    /**
+     * If true the SplineWalker will automatically move along the spline
+     * @default true
+     */
+    autoRun: boolean;
+    /**
+     * The duration in seconds it takes to complete the whole spline when autoWalk is enabled.
+     * @default 10
+     */
+    duration: number;
+    private _position01;
+    /** @internal */
+    start(): void;
+    update(): void;
+    private updateFromPosition;
+}

package/lib/engine-components/splines/SplineWalker.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { Object3D } from "three";
+import { Mathf } from "../../engine/engine_math.js";
+import { serializeable } from "../../engine/engine_serialization_decorator.js";
+import { Behaviour } from "../Component.js";
+import { SplineContainer } from "./Spline.js";
+/**
+ * Moves an object along a spline. Use this with a SplineContainer component.
+ */
+export class SplineWalker extends Behaviour {
+    /**
+     * The spline to use/walk along. Add a SplineContainer component to an object and assign it here.
+     */
+    spline = null;
+    /** The object to move along the spline. If object is undefined then the spline walker will use the gameObject the component has been added to
+     * @default undefined
+    */
+    object = undefined;
+    /** The object to look at while moving along the spline
+     * @default null
+    */
+    lookAt = null;
+    /**
+     * When clamp is set to true, the position01 value will be clamped between 0 and 1 and the object will not loop the spline.
+     * @default false
+     */
+    clamp = false;
+    /** The current position on the spline. The value ranges from 0 (start of the spline curve) to 1 (end of the spline curve)
+     * @default 0
+     */
+    // @type float
+    get position01() {
+        return this._position01;
+    }
+    set position01(v) {
+        this._position01 = v;
+        this.updateFromPosition();
+    }
+    /** Resets the position to 0 */
+    reset() {
+        this._position01 = 0;
+    }
+    /**
+     * If true the SplineWalker will automatically move along the spline
+     * @default true
+     */
+    autoRun = true;
+    /**
+     * The duration in seconds it takes to complete the whole spline when autoWalk is enabled.
+     * @default 10
+     */
+    duration = 10;
+    // #region internal
+    _position01 = 0;
+    /** @internal */
+    start() {
+        if (this.object === undefined)
+            this.object = this.gameObject;
+        this.updateFromPosition();
+    }
+    update() {
+        if (this.autoRun) {
+            this._position01 += this.context.time.deltaTime / this.duration;
+            this.updateFromPosition();
+        }
+    }
+    updateFromPosition() {
+        if (!this.spline || !this.spline.curve)
+            return;
+        if (!this.object)
+            return;
+        if (this.clamp)
+            this._position01 = Mathf.clamp01(this._position01);
+        else
+            this._position01 = this._position01 % 1;
+        const t = this._position01 >= 1 ? 1 : this._position01 % 1;
+        const pt = this.spline.getPointAt(t);
+        this.object.worldPosition = pt;
+        if (!this.lookAt) {
+            const tan = this.spline.getTangentAt(t);
+            this.object.lookAt(pt.add(tan));
+        }
+        else
+            this.object.lookAt(this.lookAt.worldPosition);
+    }
+}
+__decorate([
+    serializeable(SplineContainer)
+], SplineWalker.prototype, "spline", void 0);
+__decorate([
+    serializeable(Object3D)
+], SplineWalker.prototype, "object", void 0);
+__decorate([
+    serializeable(Object3D)
+], SplineWalker.prototype, "lookAt", void 0);
+__decorate([
+    serializeable()
+], SplineWalker.prototype, "clamp", void 0);
+__decorate([
+    serializeable()
+], SplineWalker.prototype, "position01", null);
+__decorate([
+    serializeable()
+], SplineWalker.prototype, "autoRun", void 0);
+__decorate([
+    serializeable()
+], SplineWalker.prototype, "duration", void 0);
+//# sourceMappingURL=SplineWalker.js.map

package/lib/engine-components/splines/SplineWalker.js.map

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

package/lib/engine-components/splines/index.d.ts

@@ -0,0 +1,3 @@
+export { SplineContainer } from "./Spline.js";
+export { SplineUtils } from "./SplineUtils.js";
+export { SplineWalker } from "./SplineWalker.js";

package/lib/engine-components/splines/index.js

@@ -0,0 +1,4 @@
+export { SplineContainer } from "./Spline.js";
+export { SplineUtils } from "./SplineUtils.js";
+export { SplineWalker } from "./SplineWalker.js";
+//# sourceMappingURL=index.js.map

package/lib/engine-components/splines/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/splines/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.8.8-next.e80f4d7",
+  "version": "4.8.9-next.5e888f7",
   "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": {
@@ -93,7 +93,7 @@
   ],
   "dependencies": {
     "@dimforge/rapier3d-compat": "^0.14.0",
-    "@needle-tools/gltf-progressive": "3.3.2",
+    "@needle-tools/gltf-progressive": "3.3.3",
     "@needle-tools/three-animation-pointer": "1.0.2",
     "@webxr-input-profiles/motion-controllers": "^1.0.0",
     "flatbuffers": "2.0.4",

package/plugins/vite/alias.js

@@ -60,8 +60,9 @@ const packages_to_resolve = {
     'postprocessing': "auto-resolve",
     '@dimforge/rapier3d-compat': "auto-resolve",
 
-    '@needle-tools/gltf-progressive': "auto-resolve",
-    '@needle-tools/materialx': "auto-resolve",
+    // Note: this isnt necessary anymore since we exclude needle-engine from optimization when locally installed in the dev server
+    // '@needle-tools/gltf-progressive': "auto-resolve",
+    // '@needle-tools/materialx': "auto-resolve",
 }
 
 /**

package/src/engine/codegen/register_types.ts

@@ -95,6 +95,8 @@ import { SmoothFollow } from "../../engine-components/SmoothFollow.js";
 import { SpatialTriggerReceiver } from "../../engine-components/SpatialTrigger.js";
 import { SpatialTrigger } from "../../engine-components/SpatialTrigger.js";
 import { SpectatorCamera } from "../../engine-components/SpectatorCamera.js";
+import { SplineContainer } from "../../engine-components/splines/Spline.js";
+import { SplineWalker } from "../../engine-components/splines/SplineWalker.js";
 import { SpriteRenderer } from "../../engine-components/SpriteRenderer.js";
 import { SyncedCamera } from "../../engine-components/SyncedCamera.js";
 import { SyncedRoom } from "../../engine-components/SyncedRoom.js";
@@ -245,6 +247,8 @@ TypeStore.add("SmoothFollow", SmoothFollow);
 TypeStore.add("SpatialTriggerReceiver", SpatialTriggerReceiver);
 TypeStore.add("SpatialTrigger", SpatialTrigger);
 TypeStore.add("SpectatorCamera", SpectatorCamera);
+TypeStore.add("SplineContainer", SplineContainer);
+TypeStore.add("SplineWalker", SplineWalker);
 TypeStore.add("SpriteRenderer", SpriteRenderer);
 TypeStore.add("SyncedCamera", SyncedCamera);
 TypeStore.add("SyncedRoom", SyncedRoom);

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

@@ -1,5 +1,6 @@
 import "./Layers.js";
 import "./Camera.js";
 export * from "./ExtensionUtils.js";
-export * from "./Object3D.js";
-export * from "./RGBAColor.js";
+export { apply } from "./Object3D.js";
+export * from "./RGBAColor.js";
+export { } from "./Vector.js";

package/src/engine-components/Camera.ts

@@ -9,8 +9,8 @@ import { RenderTexture } from "../engine/engine_texture.js";
 import { getTempColor, getWorldPosition } from "../engine/engine_three_utils.js";
 import type { ICamera } from "../engine/engine_types.js"
 import { getParam } from "../engine/engine_utils.js";
-import { RGBAColor } from "../engine/js-extensions/index.js";
 import { NeedleXREventArgs } from "../engine/engine_xr.js";
+import { RGBAColor } from "../engine/js-extensions/index.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { OrbitControls } from "./OrbitControls.js";
 

package/src/engine-components/OrbitControls.ts

@@ -995,14 +995,13 @@ export class OrbitControls extends Behaviour implements ICameraController {
         }
 
         let objects: Object3D | Array<Object3D> | undefined = undefined;
-
         // If the user passed in an array as first argument
         if (Array.isArray(objectsOrOptions)) {
             objects = objectsOrOptions;
         }
         // If the user passed in an object as first argument
         else if (objectsOrOptions && "type" in objectsOrOptions) {
-            objects = objectsOrOptions.children;
+            objects = objectsOrOptions;
         }
         // If the user passed in an object as first argument and options as second argument
         else if (objectsOrOptions && typeof objectsOrOptions === "object") {
@@ -1011,12 +1010,10 @@ export class OrbitControls extends Behaviour implements ICameraController {
                 objects = options.objects;
             }
         }
-
         // Ensure objects are setup correctly
         if (objects && !Array.isArray(objects)) {
-            objects = objects.children;
+            objects = [objects];
         }
-
         if (!Array.isArray(objects) || objects && objects.length <= 0) {
             objects = this.context.scene.children;
         }

package/src/engine-components/api.ts

@@ -52,9 +52,10 @@ import "./AnimationUtils.js"
 import "./AnimationUtilsAutoplay.js"
 
 export { DragMode } from "./DragControls.js";
-export { type FitCameraOptions } from "./OrbitControls.js";
 export type { DropListenerNetworkEventArguments, DropListenerOnDropArguments } from "./DropListener.js";
+export { type FitCameraOptions } from "./OrbitControls.js";
 export * from "./particlesystem/api.js"
+export * from "./splines/index.js";
 
 // for correct type resolution in JSDoc
 import type { PhysicsMaterial } from "../engine/engine_physics.types.js";

package/src/engine-components/codegen/components.ts

@@ -150,6 +150,9 @@ export { SmoothFollow } from "../SmoothFollow.js";
 export { SpatialTriggerReceiver } from "../SpatialTrigger.js";
 export { SpatialTrigger } from "../SpatialTrigger.js";
 export { SpectatorCamera } from "../SpectatorCamera.js";
+export { SplineData } from "../splines/Spline.js";
+export { SplineContainer } from "../splines/Spline.js";
+export { SplineWalker } from "../splines/SplineWalker.js";
 export { Sprite } from "../SpriteRenderer.js";
 export { SpriteSheet } from "../SpriteRenderer.js";
 export { SpriteData } from "../SpriteRenderer.js";

package/src/engine-components/splines/Spline.ts

@@ -0,0 +1,284 @@
+
+import { BufferGeometry, CatmullRomCurve3, CubicBezierCurve3, Curve, Line, LineBasicMaterial,LineCurve3, Object3D, Quaternion, Vector3 } from "three";
+
+import { Mathf } from "../../engine/engine_math.js";
+import { serializeable } from "../../engine/engine_serialization.js";
+import { getParam } from "../../engine/engine_utils.js";
+import { Behaviour } from "../Component.js";
+
+const debug = getParam("debugsplines");
+
+export class SplineData {
+    @serializeable(Vector3)
+    position: Vector3 = new Vector3();
+
+    @serializeable(Quaternion)
+    rotation: Quaternion = new Quaternion();
+
+    @serializeable(Vector3)
+    tangentIn: Vector3 = new Vector3();
+
+    @serializeable(Vector3)
+    tangentOut: Vector3 = new Vector3();
+}
+
+// enum SplineTypeEnum {
+//     CatmullRom = 0,
+//     Bezier = 1,
+//     Linear = 2
+// }
+// type SplineType = "CatmullRom" | "Bezier" | "Linear";
+
+
+//@dont-generate-component
+/**
+ * Holds spline data and generates a spline curve. Use with SplineWalker to move objects along the spline or call getPointAt to sample points on the spline.
+ * The spline is defined by an array of knots (SplineData) which define position, rotation and tangents.  
+ * 
+ * You can create a SplineContainer from an array of points using the static method 'createFromPoints'.
+ */
+export class SplineContainer extends Behaviour {
+
+    /**
+     * Adds a knot to the end of the spline.
+     */
+    addKnot(knot: SplineData | { position: Vector3 }): SplineContainer {
+        if (knot instanceof SplineData) {
+            this.spline.push(knot);
+            this._isDirty = true;
+        }
+        else {
+            const k = new SplineData();
+            k.position.copy(knot.position);
+            this.spline.push(k);
+            this._isDirty = true;
+        }
+        return this;
+    }
+
+    /**
+     * Removes a knot by index or by reference.
+     */
+    removeKnot(index: number | SplineData): SplineContainer {
+        if (typeof index === "number") {
+            this.spline.splice(index, 1);
+            this._isDirty = true;
+        } else {
+            const i = this.spline.indexOf(index);
+            if (i !== -1) {
+                this.spline.splice(i, 1);
+                this._isDirty = true;
+            }
+        }
+        return this;
+    }
+
+    /**
+     * Gets a point on the spline in world space.
+     */
+    getPointAt(t: number, target?: Vector3): Vector3 {
+        if (!this.curve) return new Vector3();
+        const pos = this.curve.getPointAt(Mathf.clamp01(t), target);
+        const worldMatrix = this.gameObject.matrixWorld ?? undefined;
+        if (worldMatrix) {
+            pos.applyMatrix4(worldMatrix);
+        }
+        return pos;
+    }
+
+    /**
+     * Marks the spline as dirty, causing it to be rebuilt on the next update.
+     */
+    markDirty() {
+        this._isDirty = true;
+    }
+
+    /**
+     * Gets the tangent vector on the spline in world space.
+     */
+    getTangentAt(t: number, target?: Vector3): Vector3 {
+        if (!this.curve) return target ?? new Vector3();
+        const wr = this.gameObject.worldQuaternion;
+        return this.curve.getTangentAt(Mathf.clamp01(t), target).applyQuaternion(wr);
+    }
+
+    @serializeable()
+    set closed(value: boolean) {
+        this._closed = value;
+        this._isDirty = true;
+    }
+    get closed() { return this._closed; }
+    private _closed: boolean = false;
+
+
+    /** Spline data. Call 'markDirty' if modified */
+    @serializeable(SplineData)
+    spline: SplineData[] = [];
+
+    /** Enable to render the spline curve for debugging */
+    set debug(debug: boolean) {
+        if (debug && !this._builtCurve) this.buildCurve();
+        if (!this._debugLine) return;
+        this._debugLine.visible = debug;
+    }
+
+    /** Gets the spline curve generated from the 'spline' data */
+    get curve(): Curve<Vector3> | null {
+        return this._curve;
+    }
+
+    get isDirty() { return this._isDirty; }
+
+    private _isDirty: boolean = false;
+
+    private _curve: Curve<Vector3> | null = null;
+    private _builtCurve: boolean = false;
+    private _debugLine: Object3D | null = null;
+
+    /** @internal */
+    awake() {
+        if (debug) {
+            console.log(`[Spline] ${this.name}`, this);
+            this.buildCurve();
+        }
+    }
+
+    /** @internal */
+    update() {
+        if (this._isDirty) {
+            this.buildCurve(true);
+        }
+        if (this._debugLine && this._debugLine.parent !== this.gameObject) this.gameObject.add(this._debugLine);
+    }
+
+    private buildCurve(force: boolean = false) {
+        if (this._builtCurve && !force) return;
+        this._builtCurve = true;
+
+        if (!this.spline) {
+            console.error("[Spline] Can not build curve, no spline data", this.name);
+            return;
+        }
+        this._isDirty = false;
+        this._curve = createCatmullRomCurve(this.spline, this.closed);
+        this.buildDebugCurve();
+        // TODO: Unity supports spline interpolation type per knot which we don't support right now. Additionally EditType is deprecated. For simplicity we're just supporting CatmullRom for now.
+        // switch (this.editType) {
+        //     case SplineType.CatmullRom:
+        //         this.createCatmullRomCurve();
+        //         break;
+        //     case SplineType.Bezier:
+        //         console.warn("Bezier spline not implemented yet", this.name);
+        //         this.createCatmullRomCurve();
+        //         // this.createBezierCurve();
+        //         break;
+        //     case SplineType.Linear:
+        //         this.createLinearCurve();
+        //         break;
+        // }
+    }
+
+    private buildDebugCurve() {
+        if (debug && this.spline && this._curve) {
+            this._debugLine?.removeFromParent();
+            this._debugLine = null;
+
+            const material = new LineBasicMaterial({
+                color: 0x6600ff,
+            });
+            const res = this.spline.length * 10;
+            const splinePoints = this._curve.getPoints(res);
+            const geometry = new BufferGeometry().setFromPoints(splinePoints);
+            this._debugLine = new Line(geometry, material);
+            this.gameObject?.add(this._debugLine);
+        }
+    }
+}
+
+
+function createCatmullRomCurve(data: SplineData[], closed: boolean): CatmullRomCurve3 {
+    const points = data.map(knot => new Vector3(-knot.position.x, knot.position.y, knot.position.z));
+    if (points.length === 1) points.push(points[0]);
+    const averageTension = data.reduce((acc, knot) => acc + Math.abs(knot.tangentOut.x) + Math.abs(knot.tangentOut.y) + Math.abs(knot.tangentOut.z), 0) / data.length;
+    const tension = Mathf.remap(averageTension, 0, 0.3, 0, .5);
+    return new CatmullRomCurve3(points, closed, "catmullrom", tension);
+}
+
+function createLinearCurve(data: SplineData[], closed: boolean): LineCurve3 | null {
+    if (!data || data.length < 2) return null;
+    const points = data.map(knot => new Vector3(-knot.position.x, knot.position.y, knot.position.z));
+    if (closed) points.push(points[0]);
+    return new LineCurve3(points.at(0), points.at(1));
+}
+
+
+// function createBezierCurve(data: SplineData[], closed: boolean): CubicBezierCurve3 | null {
+//     if (!data || data.length < 2) return null;
+
+//     for (let k = 0; k < data.length; k++) {
+//         const k0 = data[k];
+//         let nextIndex = k + 1;
+//         if (nextIndex >= data.length) {
+//             if (!closed) break;
+//             nextIndex = 0;
+//         }
+//         const k1 = data[nextIndex];
+//         // points
+//         const p0 = new Vector3(-k0.position.x, k0.position.y, k0.position.z);
+//         const p1 = new Vector3(-k1.position.x, k1.position.y, k1.position.z);
+//         // tangents
+//         const t0 = new Vector3(-k0.tangentOut.x, k0.tangentOut.y, k0.tangentOut.z);
+//         const t1 = new Vector3(-k1.tangentIn.x, k1.tangentIn.y, k1.tangentIn.z);
+//         // rotations
+//         // const q0 = k0.rotation;// new Quaternion(k0.rotation.value.x, k0.rotation.value.y, k0.rotation.value.z, k0.rotation.value.w);
+//         // const q1 = k1.rotation;// new Quaternion(k1.rotation.value.x, k1.rotation.value.y, k1.rotation.value.z, k1.rotation.value.w);
+//         // const a = new Vector3(0,1,0);
+//         // const angle = Math.PI*.5;
+//         // t0.sub(p0).applyQuaternion(q0).add(p0);
+//         // t1.sub(p1).applyQuaternion(q1).add(p1);
+//         t0.add(p0);
+//         // t0.applyQuaternion(q0);
+//         t1.add(p1);
+//         const curve = new CubicBezierCurve3(p0, t0, t1, p1);
+//         return curve;
+//     }
+//     return null;
+// }
+
+// class SplineCurve {
+
+//     private spline: Spline;
+
+//     constructor(spline: Spline) {
+//         this.spline = spline;
+//     }
+
+//     getPoints(num: number): Vector3[] {
+//         const points: Vector3[] = [];
+//         const samplePerKnot = num / this.spline.length;
+//         for (let k = 1; k < this.spline.length; k++) {
+//             const cur = this.spline[k];
+//             const prev = this.spline[k - 1];
+
+//             for (let i = 0; i < samplePerKnot; i++) {
+//                 const t = i / (samplePerKnot - 1);
+//                 console.log(CurveUtils);
+//                 const x = this.interpolate(-prev.Position.x, -cur.Position.x, -prev.tangentOut.x, -cur.TangentIn.x, t);
+//                 const y = this.interpolate(prev.Position.y, cur.Position.y, prev.tangentOut.y, cur.TangentIn.y, t);
+//                 const z = this.interpolate(prev.Position.z, cur.Position.z, prev.tangentOut.z, cur.TangentIn.z, t);
+//                 points.push(new Vector3(x, y, z));
+//             }
+//         }
+
+//         return points;
+//     }
+
+//     interpolate(p0, p1, p2, p3, t) {
+
+//         var v0 = (p2 - p0) * 0.5;
+//         var v1 = (p3 - p1) * 0.5;
+//         var t2 = t * t;
+//         var t3 = t * t2;
+//         return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (- 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+//     }
+// }

package/src/engine-components/splines/SplineUtils.ts

@@ -0,0 +1,32 @@
+import { Vector3 } from "three";
+
+import { Mathf } from "../../engine/engine_math.js";
+import { SplineContainer, SplineData } from "./Spline.js";
+
+
+export namespace SplineUtils {
+
+    /**
+     * Creates a SplineContainer from an array of points.
+     * @param positions The positions of the knots.
+     * @param closed Whether the spline is closed (the last knot connects to the first).
+     * @param tension The tension of the spline. 0 is no tension, 1 is high tension (straight lines between knots). Default is 0.75.
+     * @return The created SplineContainer component - add it to an Object3D to use it.
+     */
+    export function createFromPoints(positions: Vector3[], closed: boolean = false, tension: number = .75): SplineContainer {
+        const spline = new SplineContainer();
+        const tangentFactor = 1 - Mathf.clamp(tension, 0, 1);
+        positions.forEach((pos, index) => {
+            const tangent = new Vector3();
+            if (index < positions.length - 1) tangent.subVectors(positions[index + 1], pos).normalize().multiplyScalar(tangentFactor);
+            else if (closed && positions.length > 1) tangent.subVectors(positions[0], pos).normalize().multiplyScalar(tangentFactor);
+            const knot = new SplineData();
+            knot.position.copy(pos);
+            knot.tangentIn.copy(tangent);
+            knot.tangentOut.copy(tangent);
+            spline.addKnot(knot);
+        });
+        spline.closed = closed;
+        return spline;
+    }
+}