Needle Engine 3.46.0-beta.4

Files changed (2) hide show

src/engine-components/DragControls.ts +70 -49
src/engine-components/SceneSwitcher.ts +78 -11

src/engine-components/DragControls.ts CHANGED Viewed

@@ -56,11 +56,11 @@
     /** Snap dragged objects to a XYZ grid – 0 means: no snapping. */
     @serializable()
     public snapGridResolution: number = 0.0;
     /** Keep the original rotation of the dragged object. */
     @serializable()
     public keepRotation: boolean = true;
     /** How and where the object is dragged along while dragging in XR. */
     @serializable()
     public xrDragMode: DragMode = DragMode.Attached;
@@ -82,7 +82,7 @@
     public static get HasAnySelected(): boolean { return this._active > 0; }
     private static _active: number = 0;
     /** The object to be dragged – we pass this to handlers when they are created */
     private targetObject: GameObject | null = null;
     private orbit: OrbitControls | null = null;
@@ -167,10 +167,10 @@
             }
             DragControls._active += 1;
             const newDragHandler = new DragPointerHandler(this, this.targetObject || this.gameObject);
             this._dragHandlers.set(args.event.space, newDragHandler);
             // We need to turn off OrbitControls immediately, otherwise they still get data for a short moment
             // and they don't properly handle being disabled while already processing data (smoothing happens when enabling again)
             if (this.orbit) this.orbit.enabled = false;
@@ -197,8 +197,8 @@
     onPointerUp(args: PointerEventData) {
-        if(debug) Gizmos.DrawLabel(args.point ?? this.gameObject.worldPosition, "POINTERUP:" + args.pointerId + ", " + args.button, .03, 3);
+        if (debug) Gizmos.DrawLabel(args.point ?? this.gameObject.worldPosition, "POINTERUP:" + args.pointerId + ", " + args.button, .03, 3);
         if (!this.allowEdit(this.gameObject)) return;
         if (args.button !== 0) return;
         this._potentialDragStartEvt = null;
@@ -214,10 +214,10 @@
         if (handler) {
             if (DragControls._active > 0)
                 DragControls._active -= 1;
             if (handler.onDragEnd) handler.onDragEnd(args);
             this._dragHandlers.delete(args.event.space);
             if (this._dragHandlers.size === 0) {
                 this.onLastDragEnd(args);
             }
@@ -254,7 +254,7 @@
         for (const handler of this._dragHandlers.values())
             if (handler.onDragUpdate) handler.onDragUpdate(this._dragHandlers.size);
         if (this._dragHelper && this._dragHelper.hasSelected)
             this.onAnyDragUpdate();
     }
@@ -312,7 +312,7 @@
         }
         const object = this.targetObject || this.gameObject;
         InstancingUtil.markDirty(object);
     }
@@ -347,7 +347,7 @@
     getTotalMovement?(): Vector3;
     /** Target object can change mid-flight (e.g. in Duplicatable), handlers should react properly to that */
     setTargetObject(obj: Object3D | null): void;
     /** Prewarms the drag – can already move internal points around here but should not move the object itself */
     collectMovementInfo?(): void;
     onDragStart?(args: PointerEventData): void;
@@ -382,7 +382,7 @@
         this._followObject = new Object3D() as GameObject;
         this._manipulatorObject = new Object3D() as GameObject;
         this.context.scene.add(this._manipulatorObject);
         const rig = NeedleXRSession.active?.rig?.gameObject;
@@ -401,7 +401,7 @@
             rig.worldToLocal(this._tempVec2);
         }
         this._initialDistance = this._tempVec1.distanceTo(this._tempVec2);
         if (this._initialDistance < 0.02) {
             if (debug) {
                 console.log("Finding alternative drag attachment points since initial distance is too low: " + this._initialDistance.toFixed(2));
@@ -464,7 +464,7 @@
             console.error("onDragEnd called on MultiTouchDragHandler without valid handlers. This is likely a bug.");
             return;
         }
         // we want to initialize the drag points for these handlers again.
         // one of them will be removed, but we don't know here which one
         this.handlerA.recenter();
@@ -493,7 +493,7 @@
             console.error("alignManipulator called on MultiTouchDragHandler without valid handlers. This is likely a bug.", this);
             return;
         }
         if (!this.handlerA.followObject || !this.handlerB.followObject) {
             console.error("alignManipulator called on MultiTouchDragHandler without valid follow objects. This is likely a bug.", this.handlerA, this.handlerB);
             return;
@@ -520,7 +520,7 @@
         this._manipulatorObject.updateMatrixWorld(true);
         if (debug) {
-            Gizmos.DrawLabel(this._tempVec3.clone().add(new Vector3(0,0.2,0)), "A:B " + dist.toFixed(2), 0.03);
+            Gizmos.DrawLabel(this._tempVec3.clone().add(new Vector3(0, 0.2, 0)), "A:B " + dist.toFixed(2), 0.03);
             Gizmos.DrawLine(this._tempVec1, this._tempVec2, 0x00ff00, 0, false);
             // const wp = this._manipulatorObject.worldPosition;
@@ -585,7 +585,7 @@
         const rot = draggedObject.worldQuaternion;
         rot.slerp(targetObject.worldQuaternion, t);
         draggedObject.worldQuaternion = rot;
         const scl = draggedObject.worldScale;
         scl.lerp(targetObject.worldScale, t);
         draggedObject.worldScale = scl;
@@ -614,7 +614,7 @@
     private _lastRig: IGameObject | undefined = undefined;
     /** This object is placed at the pivot of the dragged object, and parented to the control space. */
-    private _followObject: GameObject;
+    private _followObject: GameObject;
     private _totalMovement: Vector3 = new Vector3();
     /** Motion along the pointer ray. On screens this doesn't change. In XR it can be used to determine how much
      * effort someone is putting into moving an object closer or further away. */
@@ -663,7 +663,7 @@
         this.gameObject.add(this._followObject);
         this._followObject.matrixAutoUpdate = false;
         this._followObject.position.set(0, 0, 0);
         this._followObject.quaternion.set(0, 0, 0, 1);
         this._followObject.scale.set(1, 1, 1);
@@ -690,20 +690,19 @@
         this._totalMovementAlongRayDirection = 0;
         this._lastDragPosRigSpace = undefined;
-        if (debug)
-        {
+        if (debug) {
             Gizmos.DrawLine(hitPointWP, p.worldPosition, 0x00ff00, 0.5, false);
-            Gizmos.DrawLabel(p.worldPosition.add(new Vector3(0,0.1,0)), this._grabStartDistance.toFixed(2), 0.03, 0.5);
+            Gizmos.DrawLabel(p.worldPosition.add(new Vector3(0, 0.1, 0)), this._grabStartDistance.toFixed(2), 0.03, 0.5);
         }
     }
     onDragStart(args: PointerEventData) {
         args.event.space.add(this._followObject);
         // prepare for drag, we will start dragging after an object has been dragged for a few centimeters
         this._lastDragPosRigSpace = undefined;
         if (args.point && args.normal) {
             this._hitPointInLocalSpace.copy(args.point);
             this.gameObject.worldToLocal(this._hitPointInLocalSpace);
@@ -741,7 +740,7 @@
         switch (dragMode) {
             case DragMode.XZPlane:
-                const up = new Vector3(0,1,0);
+                const up = new Vector3(0, 1, 0);
                 if (this.gameObject.parent) {
                     // TODO in this case _dragPlane should be in parent space, not world space,
                     // otherwise dragging the parent and this object at the same time doesn't keep the plane constrained
@@ -757,16 +756,11 @@
             case DragMode.Attached:
                 this._dragPlane.setFromNormalAndCoplanarPoint(rayDirection, hitWP);
                 break;
+            case DragMode.DynamicViewAngle: // At start (when nothing is hit yet) the drag plane should be aligned to the view
+                this.setPlaneViewAligned(hitWP, true);
+                break;
             case DragMode.SnapToSurfaces: // At start (when nothing is hit yet) the drag plane should be aligned to the view
-            case DragMode.DynamicViewAngle:
-                const v0 = new Vector3(0, 1, 0);
-                const v1 = rayDirection;
-                const angle = v0.angleTo(v1);
-                const angleThreshold = 0.5;
-                if (angle > Math.PI / 2 + angleThreshold || angle < Math.PI / 2 - angleThreshold)
-                    this._dragPlane.setFromNormalAndCoplanarPoint(new Vector3(0, 1, 0), hitWP);
-                else
-                    this._dragPlane.setFromNormalAndCoplanarPoint(rayDirection, hitWP);
+                this.setPlaneViewAligned(hitWP, false);
                 break;
             case DragMode.None:
                 break;
@@ -797,7 +791,7 @@
         bbox.getCenter(bboxCenter);
         const bboxSize = new Vector3();
         bbox.getSize(bboxSize);
         // attachment points for dragging
         this._bottomCenter.copy(bboxCenter.clone().add(new Vector3(0, -bboxSize.y / 2, 0)));
         this._backCenter.copy(bboxCenter.clone().add(new Vector3(0, 0, bboxSize.z / 2)));
@@ -917,10 +911,9 @@
             currentDist = Math.max(0.0, factor);
             currentDist = currentDist * currentDist * currentDist;
         }
-        else if (this._grabStartDistance <= 0.5)
-        {
+        else if (this._grabStartDistance <= 0.5) {
             // TODO there's still a frame delay between dragged objects and the hand models
-            lerpFactor = 3.0;
+            lerpFactor = 3.0;
         }
         // reset _followObject to its original position and rotation
@@ -935,6 +928,8 @@
         this._followObject.position.multiplyScalar(currentDist);
         this._followObject.updateMatrix();
+        const didHaveSurfaceHitPointLastFrame = this._hasLastSurfaceHitPoint;
+        this._hasLastSurfaceHitPoint = false;
         const ray = new Ray(dragSourceWP, rayDirection);
         let didHit = false;
@@ -964,6 +959,9 @@
                 if (hit.face) {
                     didHit = true;
+                    this._hasLastSurfaceHitPoint = true;
+                    this._lastSurfaceHitPoint.copy(hit.point);
                     const dragTimeThreshold = 0.15;
                     const dragTimeSatisfied = this._draggedOverObjectDuration >= dragTimeThreshold;
                     const dragDistance = 0.001;
@@ -972,7 +970,7 @@
                     // or if the surface normal changed
                     if ((dragTimeSatisfied || dragDistanceSatisfied) &&
                         (this._draggedOverObjectLastSetUp !== this._draggedOverObject
-                            || this._draggedOverObjectLastNormal.dot(hit.face.normal) < 0.999999
+                            || this._draggedOverObjectLastNormal.dot(hit.face.normal) < 0.999999
                             // if we're dragging on a flat surface with different levels (like the sandbox floor)
                             || this.context.time.frame % 60 === 0
                         )
@@ -988,7 +986,7 @@
                         center.sub(size.multiplyScalar(0.5).multiply(hit.face.normal));
                         this._hitPointInLocalSpace.copy(center);
                         this._hitNormalInLocalSpace.copy(hit.face.normal);
                         // ensure plane is far enough up that we don't drag into the surface
                         // Which offset we use here depends on the face normal direction we hit
                         // If we hit the bottom, we want to use the top, and vice versa
@@ -1014,6 +1012,9 @@
                     }
                 }
             }
+            else if (didHaveSurfaceHitPointLastFrame) {
+                this.setPlaneViewAligned(this.gameObject.worldPosition, false)
+            }
         }
         // if(dragMode === DragMode.SnapToSurfaces){
@@ -1034,12 +1035,12 @@
             const newWP = this._hitPointInLocalSpace.clone();
             this._followObject.localToWorld(newWP);
             if (debug) {
                 Gizmos.DrawLine(newWP, this._tempVec, 0x00ffff, 0, false);
             }
-            this._followObject.worldPosition  = this._tempVec.multiplyScalar(2).sub(newWP);
+            this._followObject.worldPosition = this._tempVec.multiplyScalar(2).sub(newWP);
             this._followObject.updateMatrix();
             /*
@@ -1069,11 +1070,11 @@
             this._followObject.worldQuaternion = this._followObjectStartWorldQuaternion;
             this._followObject.updateMatrix();
         }
         // TODO refactor to a common place
         // TODO should use unscaled time here // some test for lerp speed depending on distance
         const t = Mathf.clamp01(this.context.time.deltaTime * lerpStrength * lerpFactor);// / (currentDist - 1 + 0.01));
         const wp = draggedObject.worldPosition;
         wp.lerp(this._followObject.worldPosition, t);
         draggedObject.worldPosition = wp;
@@ -1083,8 +1084,7 @@
         draggedObject.worldQuaternion = rot;
-        if (debug)
-        {
+        if (debug) {
             const hitPointWP = this._hitPointInLocalSpace.clone();
             draggedObject.localToWorld(hitPointWP);
             // draw grab attachment point and normal. They are in grabbed object space
@@ -1094,7 +1094,7 @@
             Gizmos.DrawRay(hitPointWP, hitNormalWP, 0xff0000);
             // debug info
-            Gizmos.DrawLabel(wp.add(new Vector3(0, 0.25, 0)),
+            Gizmos.DrawLabel(wp.add(new Vector3(0, 0.25, 0)),
                 `Distance: ${this._totalMovement.length().toFixed(2)}\n
                 Along Ray: ${this._totalMovementAlongRayDirection.toFixed(2)}\n
                 Session: ${!!NeedleXRSession.active}\n
@@ -1124,6 +1124,27 @@
         this._followObject.destroy();
         this._lastDragPosRigSpace = undefined;
     }
+    private _hasLastSurfaceHitPoint: boolean = false;
+    private readonly _lastSurfaceHitPoint: Vector3 = new Vector3();
+    private setPlaneViewAligned(worldPoint: Vector3, useUpAngle: boolean) {
+        if (!this._followObject.parent) {
+            return false;
+        }
+        const viewDirection = (this._followObject.parent as IGameObject).worldForward;;
+        const v0 = getTempVector(0, 1, 0);
+        const v1 = viewDirection;
+        const angle = v0.angleTo(v1);
+        const angleThreshold = 0.5;
+        if (useUpAngle && (angle > Math.PI / 2 + angleThreshold || angle < Math.PI / 2 - angleThreshold))
+            this._dragPlane.setFromNormalAndCoplanarPoint(v0, worldPoint);
+        else
+            this._dragPlane.setFromNormalAndCoplanarPoint(viewDirection, worldPoint);
+        return true;
+    }
 }
 /** Currently does _only_ provide visuals support for DragControls operations.

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Object3D } from "three";
+import { EquirectangularReflectionMapping, Object3D, Scene, Texture } from "three";
 import { Addressables, AssetReference } from "../engine/engine_addressables.js";
 import { registerObservableAttribute } from "../engine/engine_element_extras.js";
@@ -7,8 +7,10 @@
 import { serializable } from "../engine/engine_serialization.js";
 import { delay, getParam, setParamWithoutReload } from "../engine/engine_utils.js";
 import { Behaviour, GameObject } from "./Component.js";
+import { destroy } from "../engine/engine_gameobject.js";
 const debug = getParam("debugsceneswitcher");
+const experimental_clearSceneOnLoad = getParam("sceneswitcher:clearscene");
 const ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME = "scene";
 registerObservableAttribute(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
@@ -103,58 +105,94 @@
  */
 export class SceneSwitcher extends Behaviour {
-    /** When enabled the first scene will be loaded when the SceneSwitcher becomes active */
+    /** When enabled the first scene will be loaded when the SceneSwitcher becomes active
+     * @default true
+    */
     @serializable()
     autoLoadFirstScene: boolean = true;
     /**
      * The scenes that can be loaded by the SceneSwitcher.
+     * @default []
      */
     @serializable(AssetReference)
     scenes: AssetReference[] = [];
+    /**
+     * The scene that is displayed while a scene is loading.
+     * @default undefined
+     */
     @serializable(AssetReference)
     loadingScene?: AssetReference;
-    /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable */
+    /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable
+     * @default "scene"
+    */
     @serializable()
     queryParameterName: string = "scene";
     /**
      * when enabled the scene name will be used as the query parameter (otherwise the scene index will be used)
      * Needs `queryParameterName` set
-     * */
+     * @default true
+     */
     @serializable()
     useSceneName: boolean = true;
+    /**
+     * When enabled the current scene index will be clamped to the scenes array bounds.
+     * For example when the last scene is loaded and `clamp` is true then trying to load the `next()` scene will not change the scene.
+     * When `clamp` is false and the last scene is loaded then the first scene will be loaded instead.
+     * @default true
+     */
     @serializable()
     clamp: boolean = true;
-    /** when enabled the new scene is pushed to the browser navigation history, only works with a valid query parameter set */
+    /** when enabled the new scene is pushed to the browser navigation history, only works with a valid query parameter set
+     * @default true
+    */
     @serializable()
     useHistory: boolean = true;
-    /** when enabled you can switch between scenes using keyboard left, right, A and D or number keys */
+    /** when enabled you can switch between scenes using keyboard left, right, A and D or number keys
+     * @default true
+    */
     @serializable()
     useKeyboard: boolean = true;
-    /** when enabled you can switch between scenes using swipe (mobile only) */
+    /** when enabled you can switch between scenes using swipe (mobile only)
+     * @default true
+    */
     @serializable()
     useSwipe: boolean = true;
-    /** when enabled will automatically apply the environment scene lights */
+    /** when enabled will automatically apply the environment scene lights
+     * @default true
+    */
     @serializable()
     useSceneLighting: boolean = true;
-    /** how many scenes after the currently active scene should be preloaded */
+    /** When enabled will automatically apply the skybox from the loaded scene
+     * @default true
+     */
     @serializable()
+    useSceneBackground: boolean = true;
+    /** how many scenes after the currently active scene should be preloaded
+     * @default 1
+    */
+    @serializable()
     preloadNext: number = 1;
-    /** how many scenes before the currently active scene should be preloaded */
+    /** how many scenes before the currently active scene should be preloaded
+     * @default 1
+    */
     @serializable()
     preloadPrevious: number = 1;
-    /** how many scenes can be loaded in parallel */
+    /** how many scenes can be loaded in parallel
+     * @default 2
+    */
     @serializable()
     preloadConcurrent: number = 2;
@@ -516,9 +554,38 @@
             if (this._currentIndex === index) {
                 if (debug) console.log("ADD", scene.uri);
                 this._currentScene = scene;
+                // Experimental: replace the whole content of the scene
+                if (experimental_clearSceneOnLoad) {
+                    const camera = this.context.mainCameraComponent?.gameObject || this.context.mainCamera;
+                    camera?.removeFromParent();
+                    const self = this.gameObject.removeFromParent();
+                    destroy(this.context.scene, true, true)
+                    this.context.scene = new Scene();
+                    this.context.scene.add(self);
+                    if (camera) {
+                        this.context.scene.add(camera);
+                    }
+                }
                 GameObject.add(scene.asset, this.gameObject);
                 if (this.useSceneLighting)
                     this.context.sceneLighting.enable(scene);
+                // Set the background texture from the loaded scene
+                if (this.useSceneBackground) {
+                    const skybox = this.context.lightmaps.tryGetSkybox(scene.url) as Texture;
+                    if (skybox) {
+                        skybox.mapping = EquirectangularReflectionMapping;
+                        this.context.scene.background = skybox;
+                    }
+                    else if (debug) {
+                        console.warn("SceneSwitcher: Can't find skybox for scene " + scene.url);
+                    }
+                }
                 if (this.useHistory && index >= 0) {
                     // take the index as the query parameter value
                     let queryParameterValue = index.toString();