@needle-tools/engine 5.0.0 → 5.1.0-experimental.1

package/src/engine/engine_three_utils.ts

@@ -533,7 +533,7 @@ export class Graphics {
         mesh.frustumCulled = false;
         this.scene.children.length = 0;
         this.scene.add(mesh);
-        this.renderer.setSize(texture.image.width, texture.image.height);
+        this.renderer.setSize((texture.image as any).width, (texture.image as any).height);
         this.renderer.clear();
         this.renderer.render(this.scene, this.perspectiveCam);
         const tex = new Texture(this.renderer.domElement);
@@ -618,7 +618,7 @@ export class Graphics {
         if (force === true || texture["isCompressedTexture"] === true) {
             texture = copyTexture(texture);
         }
-        const image = texture.image;
+        const image = texture.image as any;
         if (isImageBitmap(image)) {
             const canvas = document.createElement('canvas');
             canvas.width = image.width;

package/src/engine/engine_time.ts

@@ -1,4 +1,4 @@
-import { Clock } from 'three'
+import { Timer } from 'three'
 
 import { type ITime } from './engine_types.js';
 import { getParam } from './engine_utils.js';
@@ -59,7 +59,7 @@ export class Time implements ITime {
 
     /** The time in seconds it took to complete the last frame (Read Only). */
     get realtimeSinceStartup(): number {
-        return this.clock.elapsedTime;
+        return this.clock.getElapsed();
     }
 
     /** 
@@ -80,7 +80,7 @@ export class Time implements ITime {
     get smoothedDeltaTime() { return 1 / this._smoothedFps; }
 
 
-    private clock = new Clock();
+    private clock = new Timer();
     private _smoothedFps: number = 0;
     private _smoothedDeltaTime: number = 0;
     private readonly _fpsSamples: number[] = [];
@@ -95,6 +95,7 @@ export class Time implements ITime {
      * @internal
      */
     update() {
+        this.clock.update();
         this.deltaTime = this.clock.getDelta();
         // clamp delta time because if tab is not active clock.getDelta can get pretty big
         this.deltaTime = Math.min(.1, this.deltaTime);

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -2,7 +2,7 @@ import { CubeReflectionMapping, CubeUVReflectionMapping, LinearSRGBColorSpace, S
 import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
 import { type GLTF, type GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+import { HDRLoader } from "three/examples/jsm/loaders/HDRLoader.js";
 
 import { isDevEnvironment } from "../debug/index.js";
 import { type ILightDataRegistry } from "../engine_lightdata.js";
@@ -83,11 +83,11 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                                 const path = resolveUrl(this.source, entry.pointer);
                                 const isPMREM = path.endsWith(".pmrem.ktx2");
 
-                                let loader: TextureLoader | EXRLoader | RGBELoader | KTX2Loader;
+                                let loader: TextureLoader | EXRLoader | HDRLoader | KTX2Loader;
                                 if (path.endsWith(".exr"))
                                     loader = new EXRLoader(this.parser.options.manager);
                                 else if (path.endsWith(".hdr"))
-                                    loader = new RGBELoader(this.parser.options.manager);
+                                    loader = new HDRLoader(this.parser.options.manager);
                                 else if (isPMREM)
                                     loader = (this.parser.options as any).ktx2Loader; // We re-use the KTX2Loader configured on the GLTFLoader, which has GPU support detection built in
                                 else

package/src/engine/webcomponents/icons.ts

@@ -61,8 +61,9 @@ export async function getIconTexture(str: string): Promise<Texture | null> {
         const data = canvas.toDataURL();
         const texture = new Texture();
         texture.name = str + " icon";
-        texture.image = new Image();
-        texture.image.src = data;
+        const img = new Image();
+        (texture as any).image = img;
+        img.src = data;
         texture.needsUpdate = true;
         textures.set(str, texture);
         return texture;

package/src/engine-components/AudioSource.ts

@@ -451,7 +451,7 @@ export class AudioSource extends Behaviour {
             sound.stop();
 
         if (buffer) sound.setBuffer(buffer);
-        sound.loop = this._loop;
+        sound.setLoop(this._loop);
         if (this.context.application.muted) sound.setVolume(0);
         else sound.setVolume(this.volume);
         sound.autoplay = this.shouldPlay && AudioSource.userInteractionRegistered;

package/src/engine-components/Light.ts

@@ -187,8 +187,8 @@ export class Light extends Behaviour implements ILight {
     set shadowNearPlane(val: number) {
         if (val === this._shadowNearPlane) return;
         this._shadowNearPlane = val;
-        if (this.light?.shadow?.camera !== undefined) {
-            const cam = this.light.shadow.camera as OrthographicCamera;
+        if (this.shadowLight?.shadow?.camera !== undefined) {
+            const cam = this.shadowLight!.shadow.camera as OrthographicCamera;
             cam.near = val;
         }
     }
@@ -202,9 +202,9 @@ export class Light extends Behaviour implements ILight {
     set shadowBias(val: number) {
         if (val === this._shadowBias) return;
         this._shadowBias = val;
-        if (this.light?.shadow?.bias !== undefined) {
-            this.light.shadow.bias = val;
-            this.light.shadow.needsUpdate = true;
+        if (this.shadowLight?.shadow?.bias !== undefined) {
+            this.shadowLight!.shadow.bias = val;
+            this.shadowLight!.shadow.needsUpdate = true;
         }
     }
     get shadowBias(): number { return this._shadowBias; }
@@ -217,9 +217,9 @@ export class Light extends Behaviour implements ILight {
     set shadowNormalBias(val: number) {
         if (val === this._shadowNormalBias) return;
         this._shadowNormalBias = val;
-        if (this.light?.shadow?.normalBias !== undefined) {
-            this.light.shadow.normalBias = val;
-            this.light.shadow.needsUpdate = true;
+        if (this.shadowLight?.shadow?.normalBias !== undefined) {
+            this.shadowLight!.shadow.normalBias = val;
+            this.shadowLight!.shadow.needsUpdate = true;
         }
     }
     get shadowNormalBias(): number { return this._shadowNormalBias; }
@@ -268,7 +268,7 @@ export class Light extends Behaviour implements ILight {
      */
     @serializable()
     get shadowDistance(): number {
-        const light = this.light;
+        const light = this.shadowLight;
         if (light?.shadow) {
             const cam = light.shadow.camera as OrthographicCamera;
             return cam.far;
@@ -277,7 +277,7 @@ export class Light extends Behaviour implements ILight {
     }
     set shadowDistance(val: number) {
         this._shadowDistance = val;
-        const light = this.light;
+        const light = this.shadowLight;
         if (light?.shadow) {
             const cam = light.shadow.camera as OrthographicCamera;
             cam.far = val;
@@ -294,7 +294,7 @@ export class Light extends Behaviour implements ILight {
      */
     @serializable()
     get shadowResolution(): number {
-        const light = this.light;
+        const light = this.shadowLight;
         if (light?.shadow) {
             return light.shadow.mapSize.x;
         }
@@ -303,7 +303,7 @@ export class Light extends Behaviour implements ILight {
     set shadowResolution(val: number) {
         if (val === this._shadowResolution) return;
         this._shadowResolution = val;
-        const light = this.light;
+        const light = this.shadowLight;
         if (light?.shadow) {
             light.shadow.mapSize.set(val, val);
             light.shadow.needsUpdate = true;
@@ -337,6 +337,14 @@ export class Light extends Behaviour implements ILight {
      */
     private light: ThreeLight | undefined = undefined;
 
+    /** Access the light as a shadow-casting light (DirectionalLight, SpotLight, PointLight).
+     * In r183 types, the `shadow` property is only on specific light subclasses. */
+    private get shadowLight(): (DirectionalLight | SpotLight | PointLight) | undefined {
+        const l = this.light;
+        if (l && 'shadow' in l) return l as DirectionalLight | SpotLight | PointLight;
+        return undefined;
+    }
+
     /**
      * Gets the world position of the light
      * @param vec Vector3 to store the result
@@ -458,29 +466,29 @@ export class Light extends Behaviour implements ILight {
             }
             else this.light.castShadow = false;
 
-            if (this.light.shadow) {
+            if (this.shadowLight?.shadow) {
                 // shadow intensity is currently not a thing: https://github.com/mrdoob/three.js/pull/14087
                 if (this._shadowResolution !== undefined && this._shadowResolution > 4) {
-                    this.light.shadow.mapSize.width = this._shadowResolution;
-                    this.light.shadow.mapSize.height = this._shadowResolution;
+                    this.shadowLight!.shadow.mapSize.width = this._shadowResolution;
+                    this.shadowLight!.shadow.mapSize.height = this._shadowResolution;
                 }
                 else {
-                    this.light.shadow.mapSize.width = 2048;
-                    this.light.shadow.mapSize.height = 2048;
+                    this.shadowLight!.shadow.mapSize.width = 2048;
+                    this.shadowLight!.shadow.mapSize.height = 2048;
                 }
-                // this.light.shadow.needsUpdate = true;
-                // console.log(this.light.shadow.mapSize);
+                // this.shadowLight!.shadow.needsUpdate = true;
+                // console.log(this.shadowLight!.shadow.mapSize);
                 // return;
 
                 if (debug)
                     console.log("Override shadow bias?", this._overrideShadowBiasSettings, this.shadowBias, this.shadowNormalBias);
 
-                this.light.shadow.bias = this.shadowBias;
-                this.light.shadow.normalBias = this.shadowNormalBias;
+                this.shadowLight!.shadow.bias = this.shadowBias;
+                this.shadowLight!.shadow.normalBias = this.shadowNormalBias;
 
                 this.updateShadowSoftHard();
 
-                const cam = this.light.shadow.camera as OrthographicCamera;
+                const cam = this.shadowLight!.shadow.camera as OrthographicCamera;
                 cam.near = this.shadowNearPlane;
                 // use shadow distance that was set explictly (if any)
                 if (this._shadowDistance !== undefined && typeof this._shadowDistance === "number")
@@ -508,7 +516,7 @@ export class Light extends Behaviour implements ILight {
                     cam.top *= sy;
                     cam.bottom *= sy;
                 }
-                this.light.shadow.needsUpdate = true;
+                this.shadowLight!.shadow.needsUpdate = true;
 
                 if (debug)
                     this.context.scene.add(new CameraHelper(cam));
@@ -551,15 +559,15 @@ export class Light extends Behaviour implements ILight {
      */
     private updateShadowSoftHard() {
         if (!this.light) return;
-        if (!this.light.shadow) return;
+        if (!this.shadowLight!.shadow) return;
         if (this.shadows === LightShadows.Soft) {
-            // const radius = this.light.shadow.mapSize.width / 1024 * 5;
+            // const radius = this.shadowLight!.shadow.mapSize.width / 1024 * 5;
             // const samples = Mathf.clamp(Math.round(radius), 2, 10);
-            // this.light.shadow.radius = radius;
-            // this.light.shadow.blurSamples = samples;
+            // this.shadowLight!.shadow.radius = radius;
+            // this.shadowLight!.shadow.blurSamples = samples;
             // if (isMobileDevice()) {
-            //     this.light.shadow.radius *= .5;
-            //     this.light.shadow.blurSamples = Math.floor(this.light.shadow.blurSamples * .5);
+            //     this.shadowLight!.shadow.radius *= .5;
+            //     this.shadowLight!.shadow.blurSamples = Math.floor(this.shadowLight!.shadow.blurSamples * .5);
             // }
             // if (Light.allowChangingRendererShadowMapType) {
             //     if(this.context.renderer.shadowMap.type !== VSMShadowMap){
@@ -569,8 +577,8 @@ export class Light extends Behaviour implements ILight {
             // }
         }
         else {
-            this.light.shadow.radius = 1;
-            this.light.shadow.blurSamples = 1;
+            this.shadowLight!.shadow.radius = 1;
+            this.shadowLight!.shadow.blurSamples = 1;
         }
     }
 

package/src/engine-components/OrbitControls.ts

@@ -275,14 +275,14 @@ export class OrbitControls extends Behaviour implements ICameraController {
      * Set this to a different element to make the OrbitControls listen to that element instead.  
      */
     get targetElement(): HTMLElement | null {
-        return this._controls?.domElement ?? this._targetElement;
+        return this._controls?.domElement as HTMLElement ?? this._targetElement;
     }
     set targetElement(value: HTMLElement | null) {
         this._targetElement = value;
         if (this._controls && this._controls.domElement !== value) {
             this._controls.disconnect();
             this._controls.domElement = value;
-            this._controls.connect();
+            if (value) this._controls.connect(value);
         }
     }
     private _targetElement: HTMLElement | null = null;

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -832,7 +832,7 @@ class USDZExporter {
 			
 			// Change: we need to always read back the texture now, otherwise the unpremultiplied workflow doesn't work.
 			let img: ImageReadbackResult = {
-				imageData: texture.image
+				imageData: texture.image as ImageData
 			};
 			
 			Progress.report("export-usdz-textures", { message: "read back texture", autoStep: true });
@@ -1516,7 +1516,7 @@ function getGeometryName(geometry: BufferGeometry, _fallbackName: string) {
 }
 
 function getMaterialName(material: Material) {
-	return makeNameSafe(material.name || 'Material') + "_" + material.id;
+	return makeNameSafe(material.name || 'Material') + "_" + (material as any).id;
 }
 
 function getPathToSkeleton(bone: Object3D, assumedRoot: Object3D) {

package/src/engine-components/export/usdz/extensions/Animation.ts

@@ -62,7 +62,7 @@ export class RegisteredAnimationInfo {
         try {
             for (const track of this.clip?.tracks ?? []) {
                 const parsedPath = PropertyBinding.parseTrackName(track.name);
-                let animationTarget = PropertyBinding.findNode(this.root, parsedPath.nodeName);
+                let animationTarget = PropertyBinding.findNode(this.root, parsedPath.nodeName) as Object3D | null;
                 if (animationTarget) {
                     if (!highestRoot) highestRoot = animationTarget;
                     else {
@@ -218,9 +218,10 @@ export class TransformData {
         const scale = new Vector3(1, 1, 1);
         const object = this.target;
 
-        const positionInterpolant: Interpolant | undefined = generatePos ? this.pos?.createInterpolant() : undefined;
-        const rotationInterpolant: Interpolant | undefined = generateRot ? this.rot?.createInterpolant() : undefined;
-        const scaleInterpolant: Interpolant | undefined = generateScale ? this.scale?.createInterpolant() : undefined;
+        // createInterpolant exists at runtime but was removed from types in r183
+        const positionInterpolant: Interpolant | undefined = generatePos ? (this.pos as any)?.createInterpolant() : undefined;
+        const rotationInterpolant: Interpolant | undefined = generateRot ? (this.rot as any)?.createInterpolant() : undefined;
+        const scaleInterpolant: Interpolant | undefined = generateScale ? (this.scale as any)?.createInterpolant() : undefined;
 
         if (!positionInterpolant) translation.set(object.position.x, object.position.y, object.position.z);
         if (!rotationInterpolant) rotation.set(object.quaternion.x, object.quaternion.y, object.quaternion.z, object.quaternion.w);
@@ -435,7 +436,7 @@ export class AnimationExtension implements IUSDExporterExtension {
         // const sortedTracks = clip.tracks.filter(x => !!x).sort((a, _b) => a.name.endsWith("position") || a.name.endsWith("quaternion") || a.name.endsWith("scale") ? -1 : 1);
         for (const track of clip.tracks) {
             const parsedPath = PropertyBinding.parseTrackName(track.name);
-            const animationTarget = PropertyBinding.findNode(root, parsedPath.nodeName);
+            const animationTarget = PropertyBinding.findNode(root, parsedPath.nodeName) as Object3D | null;
             
             if (!animationTarget) {
                 console.warn("no object found for track", track.name, "using " + root.name + " instead");

package/src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts

@@ -388,7 +388,7 @@ export class ChangeMaterialOnClick extends Behaviour implements IPointerClickHan
     }
 
     private static getMaterialName(material: Material) {
-        return makeNameSafeForUSD(material.name || 'Material') + "_" + material.id;
+        return makeNameSafeForUSD(material.name || 'Material') + "_" + (material as any).id;
     }
 
     static variantSwitchIndex: number = 0;

package/src/engine-components/postprocessing/PostProcessingHandler.ts

@@ -1,5 +1,5 @@
 import type { Effect, EffectComposer, Pass, ToneMappingEffect as _TonemappingEffect } from "postprocessing";
-import { Camera as Camera3, DepthTexture, HalfFloatType, LinearFilter, NoToneMapping, Scene, Source, Texture, ToneMapping, WebGLRenderTarget } from "three";
+import { Camera as Camera3, DepthTexture, HalfFloatType, LinearFilter, NoToneMapping, PixelFormat, Scene, Source, Texture, ToneMapping, WebGLRenderTarget } from "three";
 
 import { isDevEnvironment, showBalloonWarning } from "../../engine/debug/index.js";
 // import { internal_SetSharpeningEffectModule } from "./Effects/Sharpening.js";
@@ -417,7 +417,7 @@ export class PostProcessingHandler {
                 this._customInputBuffer?.dispose();
 
                 this._customInputBuffer = new WebGLRenderTarget(inputBuffer.width, inputBuffer.height, {
-                    format: inputBuffer.texture.format,
+                    format: inputBuffer.texture.format as PixelFormat,
                     type: HalfFloatType,
                     depthBuffer: inputBuffer.depthBuffer,
                     depthTexture: inputBuffer.depthTexture
@@ -577,7 +577,7 @@ export class PostProcessingHandler {
         // Assigning a new Source breaks the deduplication so they get separate GL textures.
         const composerDepthTexture = (composer as any).depthTexture as DepthTexture | null;
         if (composerDepthTexture) {
-            composerDepthTexture.source = new Source({ width: 0, height: 0 });
+            composerDepthTexture.source = new Source({ width: 0, height: 0 } as any);
             composerDepthTexture.needsUpdate = true;
         }
 

package/src/engine-components/timeline/TimelineTracks.ts

@@ -700,8 +700,8 @@ export class AudioTrackHandler extends TrackHandler {
             }
             if (AudioSource.userInteractionRegistered === false) continue;
             if (audio === null || !audio.buffer) continue;
-            audio.playbackRate = this.director.context.time.timeScale * this.director.speed;
-            audio.loop = asset.loop;
+            (audio as any).playbackRate = this.director.context.time.timeScale * this.director.speed;
+            (audio as any).loop = asset.loop;
             if (time >= model.start && time <= model.end && time < this.director.duration) {
                 if (!audio.isPlaying || !this.director.isPlaying) {
                     // if the timeline is paused we trigger the audio clip once when the model is entered

package/src/engine-components/ui/Canvas.ts

@@ -132,7 +132,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
         this._renderMode = val;
         this.onRenderSettingsChanged();
     }
-    private _renderMode: RenderMode = RenderMode.Undefined;
+    private _renderMode: RenderMode = RenderMode.WorldSpace;
 
     private _rootCanvas!: Canvas;
 
@@ -159,7 +159,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
     worldCamera?: Camera;
 
     @serializable()
-    planeDistance: number = -1;
+    planeDistance: number = 100;
 
     awake() {
         //@ts-ignore

package/src/engine-components/ui/Graphic.ts

@@ -35,8 +35,12 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         if (!this._color) this._color = new RGBAColor(1, 1, 1, 1);
         return this._color;
     }
-    set color(col: RGBAColor) {
-        const changed = !this._color || this._color.r !== col.r || this._color.g !== col.g || this._color.b !== col.b || this._color.alpha !== col.alpha;
+    set color(col: RGBAColor | Color) {
+        const changed = !this._color
+            || this._color.r !== col.r
+            || this._color.g !== col.g
+            || this._color.b !== col.b
+            || ("alpha" in col ? this._color.alpha !== col.alpha : this._color.alpha !== 1);
         if (!changed) return;
         if (!this._color) {
             this._color = new RGBAColor(1, 1, 1, 1);
@@ -44,6 +48,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this._color.copy(col);
         this.onColorChanged();
     }
+    private _color: RGBAColor = null!;
 
     private _alphaFactor: number = 1;
     setAlphaFactor(factor: number) {
@@ -88,7 +93,6 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     raycastTarget: boolean = true;
 
     protected uiObject: ThreeMeshUI.Block | null = null;
-    private _color: RGBAColor = null!;
 
     private _rect: RectTransform | null = null;
 

package/src/engine-components/ui/Image.ts

@@ -77,7 +77,7 @@ export class Image extends MaskableGraphic {
         }
         // this is a hack/workaround for production builds where the name of the sprite is missing
         // need to remove this!!!!
-        if (!sprite?.texture?.name?.length && sprite?.texture?.image?.width === 32 && sprite?.texture?.image?.height === 32)
+        if (!sprite?.texture?.name?.length && (sprite?.texture?.image as any)?.width === 32 && (sprite?.texture?.image as any)?.height === 32)
             return true;
         return false;
     }