Needle Engine 3.41.2-beta

Files changed (10) hide show

src/engine-components/DragControls.ts +16 -9
src/engine-components/DropListener.ts +220 -41
src/engine/engine_element.ts +4 -0
src/engine/engine_input.ts +2 -1
src/engine/engine_networking_files_default_components.ts +1 -1
src/engine/engine_physics.ts +4 -2
src/engine/engine_three_utils.ts +90 -0
src/engine-components/OrbitControls.ts +2 -2
src/engine-components/Skybox.ts +51 -26
src/engine-components/SyncedRoom.ts +65 -1

src/engine-components/DragControls.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { Context } from "../engine/engine_setup.js";
-import { getWorldPosition, setWorldPosition } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getWorldPosition, setWorldPosition } from "../engine/engine_three_utils.js";
 import { type IGameObject } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
 import { NeedleXRSession } from "../engine/engine_xr.js";
@@ -768,7 +768,7 @@
         }
         // calculate bounding box and snapping points. We want to either snap the "back" point or the "bottom" point.
-        const bbox = new Box3();
+        // const bbox = new Box3();
         const p = this.gameObject.parent;
         const localP = this.gameObject.position.clone();
         const localQ = this.gameObject.quaternion.clone();
@@ -780,8 +780,13 @@
         this.gameObject.position.set(0, 0, 0);
         this.gameObject.quaternion.set(0, 0, 0, 1);
         this.gameObject.scale.set(1, 1, 1);
-        bbox.setFromObject(this.gameObject);
+        const bbox = getBoundingBox([this.gameObject]);
+        // we force the bbox to include our own point *because* the DragControls might be attached to an empty object (which isnt included in the bounding box call above)
+        bbox.expandByPoint(this.gameObject.worldPosition);
+        // console.log(this.gameObject.position.y - bbox.min.y)
+        // bbox.min.y += (this.gameObject.position.y - bbox.min.y);
         // get front center point of the bbox. basically (0, 0, 1) in local space
         const bboxCenter = new Vector3();
         bbox.getCenter(bboxCenter);
@@ -934,9 +939,9 @@
             // This would allow dragging slightly out of the object's bounds and still continue snapping to it.
             // Do a regular raycast (without the dragged object) to determine if we should change what is dragged onto.
             const opts = new RaycastOptions();
-            opts.ignore = [draggedObject];
+            opts.testObject = o => o !== this.followObject && o !== dragSource && o !== draggedObject;
             const hits = this.context.physics.raycastFromRay(ray, opts);
             if (hits.length > 0) {
                 const hit = hits[0];
                 // if we're above the same surface for a specified time, adjust drag options:
@@ -980,9 +985,11 @@
                         const offset = this._hitPointInLocalSpace.clone().add(center);
                         this._followObject.localToWorld(offset);
-                        const offsetWP = this._followObject.worldPosition.sub(offset);
-                        this._dragPlane.setFromNormalAndCoplanarPoint(hit.face.normal, hit.point.sub(offsetWP));
+                        // See https://linear.app/needle/issue/NE-5004
+                        // const offsetWP = this._followObject.worldPosition.sub(offset);
+                        const point = hit.point;//.sub(offsetWP);
+                        this._dragPlane.setFromNormalAndCoplanarPoint(hit.face.normal, point);
                     }
                 }
             }
@@ -1337,7 +1344,7 @@
         const wp = getWorldPosition(this._selected);
         const ray = new Ray(new Vector3(0, .1, 0).add(wp), new Vector3(0, -1, 0));
         const opts = new RaycastOptions();
-        opts.ignore = [this._selected];
+        opts.testObject = o => o !== this._selected;
         const hits = this._context.physics.raycastFromRay(ray, opts);
         for (let i = 0; i < hits.length; i++) {
             const hit = hits[i];

src/engine-components/DropListener.ts CHANGED Viewed

@@ -1,11 +1,19 @@
+import { AxesHelper, Box3, Object3D, Vector2, Vector3 } from "three";
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { isDevEnvironment } from "../engine/debug/index.js";
+import { AnimationUtils } from "../engine/engine_animation.js";
+import { addComponent } from "../engine/engine_components.js";
+import { destroy } from "../engine/engine_gameobject.js";
+import { Gizmos } from "../engine/engine_gizmos.js";
 import * as files from "../engine/engine_networking_files.js";
-import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
+import { fitObjectIntoVolume, placeOnSurface } from "../engine/engine_three_utils.js";
+import { Vec3 } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
-import { Networking } from "../engine-components/Networking.js";
-import { Behaviour, GameObject } from "./Component.js";
+import { Animation } from "./Animation.js";
+import { Behaviour } from "./Component.js";
+import { EventList } from "./EventList.js";
 const debug = getParam("debugdroplistener");
@@ -20,6 +28,17 @@
     ObjectAdded = "object-added",
 }
+declare type DropContext = {
+    screenposition: Vector2;
+    url?: string,
+}
+declare type DropListenerNetworkEvent = {
+    guid: string,
+    url: string | string[],
+    point: Vec3;
+}
 /** The DropListener component is used to listen for drag and drop events in the browser and add the dropped files to the scene
  * It can be used to allow users to drag and drop glTF files into the scene to add new objects.
  *
@@ -47,36 +66,111 @@
  */
 export class DropListener extends Behaviour {
-    /** The URL to the files backend that handles networking the files */
+    /**
+     * When assigned the Droplistener will only accept files that are dropped on this object.
+     */
+    @serializable(Object3D)
+    dropArea?: Object3D;
+    /**
+     * When enabled the object will be fitted into a volume. Use {@link fitVolumeSize} to specify the volume size.
+     * @default false
+     */
     @serializable()
-    filesBackendUrl?: string;
+    fitIntoVolume: boolean = false;
+    /**
+     * The volume size will be used to fit the object into the volume. Use {@link fitIntoVolume} to enable this feature.
+     */
+    @serializable(Vector3)
+    fitVolumeSize = new Vector3(1, 1, 1);
+    /** When enabled the object will be placed at the drop position (under the cursor)
+     * @default true
+     */
     @serializable()
-    localhost?: string;
+    placeAtHitPosition: boolean = true;
+    @serializable(EventList)
+    onDropped: EventList = new EventList();
     /** @internal */
     onEnable(): void {
-        this.filesBackendUrl = Networking.GetUrl(this.filesBackendUrl, this.localhost) ?? this.filesBackendUrl;
-        if (debug) console.log(this, this.filesBackendUrl);
-        this.context.domElement.addEventListener("dragover", this.onDrag);
-        this.context.domElement.addEventListener("drop", this.onDrop);
+        this.context.renderer.domElement.addEventListener("dragover", this.onDrag);
+        this.context.renderer.domElement.addEventListener("drop", this.onDrop);
+        window.addEventListener("keyup", this.handlePaste);
+        this.context.connection.beginListen("droplistener", this.onNetworkEvent)
     }
     /** @internal */
     onDisable(): void {
-        this.context.domElement.removeEventListener("dragover", this.onDrag);
-        this.context.domElement.removeEventListener("drop", this.onDrop);
+        this.context.renderer.domElement.removeEventListener("dragover", this.onDrag);
+        this.context.renderer.domElement.removeEventListener("drop", this.onDrop);
+        window.removeEventListener("keyup", this.handlePaste);
+        this.context.connection.stopListen("droplistener", this.onNetworkEvent)
     }
+    private onNetworkEvent = (evt: DropListenerNetworkEvent) => {
+        if (evt.guid?.startsWith(this.guid)) {
+            const url = evt.url;
+            if (url) {
+                if (Array.isArray(url)) {
+                    for (const _url of url) {
+                        this.addFromUrl(_url, { screenposition: new Vector2() }, true).then(res => {
+                            res?.position.set(evt.point.x, evt.point.y, evt.point.z);
+                        })
+                    }
+                }
+                else {
+                    this.addFromUrl(url, { screenposition: new Vector2() }, true).then(res => {
+                        res?.position.set(evt.point.x, evt.point.y, evt.point.z);
+                    })
+                }
+            }
+        }
+    }
+    private handlePaste = async (evt: KeyboardEvent) => {
+        if (this.context.connection.allowEditing === false) return;
+        // detect paste
+        const isPasteCommand = (evt.ctrlKey || evt.metaKey) && evt.key === "v";
+        if (isPasteCommand) {
+            const clipboard = navigator.clipboard;
+            const value = await clipboard.readText().catch(console.warn);
+            if (value) {
+                const isUrl = value.startsWith("http") || value.startsWith("https") || value.startsWith("blob");
+                if (isUrl) {
+                    const ctx = { screenposition: new Vector2(this.context.input.mousePosition.x, this.context.input.mousePosition.y) };
+                    if (this.testIfIsInDropArea(ctx))
+                        this.addFromUrl(value, ctx, false);
+                }
+            }
+        }
+    }
     private onDrag = (evt: DragEvent) => {
+        if (this.context.connection.allowEditing === false) return;
         // necessary to get drop event
         evt.preventDefault();
     }
     private onDrop = async (evt: DragEvent) => {
+        if (this.context.connection.allowEditing === false) return;
         if (debug) console.log(evt);
         if (!evt?.dataTransfer) return;
         evt.preventDefault();
+        const ctx: DropContext = { screenposition: new Vector2(evt.offsetX, evt.offsetY) };
+        if (this.dropArea) {
+            const res = this.testIfIsInDropArea(ctx);
+            if (res === false) return;
+        }
+        evt.stopImmediatePropagation();
         const items = evt.dataTransfer.items;
         if (!items) return;
@@ -85,62 +179,147 @@
             if (it.kind === "file") {
                 const file = it.getAsFile();
                 if (!file) continue;
-                await this.addFiles(file);
+                await this.addFiles([file], ctx);
             }
             else if (it.kind === "string" && it.type == "text/plain") {
-                it.getAsString(async str => {
-                    if (debug) console.log("dropped url", str);
-                    try {
-                        const url = new URL(str);
-                        if (!url) return;
-                        const res = await files.addFileFromUrl(url, this.context);
-                        if (res)
-                            this.addObject(evt, res);
-                    }
-                    catch (_) {
-                        console.log("dropped string is not a valid URL!", str);
-                    }
+                it.getAsString(str => {
+                    this.addFromUrl(str, ctx, false);
                 });
             }
         }
     }
-    private async addFiles(...fileList: Array<File>) {
-        if(debug) console.log("Add files", fileList)
+    private async addFromUrl(url: string, ctx: DropContext, isRemote: boolean) {
+        if (debug) console.log("dropped url", url);
+        try {
+            if (url.startsWith("https://github.com/")) {
+                // make raw.githubusercontent.com url
+                const parts = url.split("/");
+                const user = parts[3];
+                const repo = parts[4];
+                const branch = parts[6];
+                const path = parts.slice(7).join("/");
+                url = `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${path}`;
+            }
+            if (!url) return null;
+            const res = await files.addFileFromUrl(new URL(url), this.context);
+            if (res) {
+                ctx.url = url;
+                const obj = this.addObject(res, ctx, isRemote);
+                return obj;
+            }
+        }
+        catch (_) {
+            console.warn("String is not a valid URL", url);
+        }
+        return null;
+    }
+    private async addFiles(fileList: Array<File>, ctx: DropContext) {
+        if (debug) console.log("Add files", fileList)
         if (!Array.isArray(fileList)) return;
         if (!fileList.length) return;
         for (const file of fileList) {
             if (!file) continue;
-            if (debug) console.log("Register file " + file.name + " to", this.filesBackendUrl, file);
-            const res = await files.addFile(file, this.context, this.filesBackendUrl);
+            if (debug) console.log("Register file " + file.name, file);
+            const res = await files.addFile(file, this.context);
             this.dispatchEvent(new CustomEvent(DropListenerEvents.FileDropped, { detail: file }));
             if (res)
-                this.addObject(undefined, res);
+                this.addObject(res, ctx, false);
         }
     }
-    private async addObject(evt: DragEvent | undefined, gltf: GLTF) {
-        if (debug) console.log("Dropped", gltf);
+    /** Previously added objects */
+    private readonly _addedObjects = new Array<Object3D>();
+    private addObject(gltf: GLTF, ctx: DropContext, isRemote: boolean) : Object3D | null {
+        if (debug) console.log(`Dropped ${this.gameObject.name}`, gltf);
         if (!gltf?.scene) {
             console.warn("No object specified to add to scene", gltf);
-            return;
+            return null;
         }
+        for (const prev of this._addedObjects) {
+            if (prev.parent === this.gameObject) {
+                destroy(prev, true, true);
+            }
+        }
+        this._addedObjects.length = 0;
         const obj = gltf.scene;
-        if (evt !== undefined) {
-            const opts = new RaycastOptions();
-            opts.setMask(0xffffff);
-            opts.screenPointFromOffset(evt.offsetX, evt.offsetY);
-            const rc = this.context.physics.raycast(opts);
+        // use attach to ignore the DropListener scale (e.g. if the parent object scale is not uniform)
+        this.gameObject.attach(obj);
+        obj.position.set(0, 0, 0);
+        obj.quaternion.identity();
+        this._addedObjects.push(obj);
+        if (debug) obj.add(new AxesHelper(1));
+        const volume = new Box3().setFromCenterAndSize(new Vector3(0, this.fitVolumeSize.y * .5, 0).add(this.gameObject.worldPosition), this.fitVolumeSize);
+        if (debug) Gizmos.DrawWireBox3(volume, 0x0000ff, 5);
+        if (this.fitIntoVolume) {
+            fitObjectIntoVolume(obj, volume, {
+                position: !this.placeAtHitPosition
+            });
+        }
+        if (this.placeAtHitPosition && ctx && ctx.screenposition) {
+            const rc = this.context.physics.raycast({ screenPoint: this.context.input.convertScreenspaceToRaycastSpace(ctx.screenposition.clone()) });
             if (rc && rc.length > 0) {
                 for (const hit of rc) {
-                    obj.position.copy(hit.point);
+                    const pos = hit.point.clone();
+                    placeOnSurface(obj, pos);
                     break;
                 }
             }
         }
-        this.gameObject.add(obj);
+        AnimationUtils.assignAnimationsFromFile(gltf, {
+            createAnimationComponent: obj => addComponent(obj, Animation)
+        });
         this.dispatchEvent(new CustomEvent(DropListenerEvents.ObjectAdded, { detail: gltf }));
+        this.onDropped?.invoke({ sender: this, gltf })
+        // send network event
+        if (!isRemote && ctx.url?.startsWith("http") && this.context.connection.isConnected && obj) {
+            const evt: DropListenerNetworkEvent = {
+                guid: this.guid,
+                url: ctx.url,
+                point: obj.position.clone(),
+            };
+            this.context.connection.send("droplistener", evt);
+        }
+        return obj;
     }
+    private testIfIsInDropArea(ctx: DropContext): boolean {
+        if (this.dropArea) {
+            const screenPoint = this.context.input.convertScreenspaceToRaycastSpace(ctx.screenposition.clone());
+            const hits = this.context.physics.raycast({
+                targets: [this.dropArea],
+                screenPoint,
+                recursive: true,
+                testObject: obj => {
+                    if (this._addedObjects.includes(obj)) return false;
+                    return true;
+                }
+            });
+            if (!hits.length) {
+                if (isDevEnvironment()) console.log(`Dropped outside of drop area for DropListener \"${this.name}\".`);
+                return false;
+            }
+        }
+        return true;
+    }
 }

src/engine/engine_element.ts CHANGED Viewed

@@ -482,6 +482,10 @@
             case "agx":
                 this._context.renderer.toneMapping = AgXToneMapping;
                 break;
+            default:
+                if (attribute !== null && attribute !== undefined) {
+                    console.warn("Invalid tone-mapping attribute: " + attribute);
+                }
         }
     }

src/engine/engine_input.ts CHANGED Viewed

@@ -653,9 +653,10 @@
         }
     }
-    convertScreenspaceToRaycastSpace(vec2: Vec2) {
+    convertScreenspaceToRaycastSpace<T extends Vec2 | Vector2>(vec2: T): T {
         vec2.x = (vec2.x - this.context.domX) / this.context.domWidth * 2 - 1;
         vec2.y = -((vec2.y - this.context.domY) / this.context.domHeight) * 2 + 1;
+        return vec2;
     }
     /** @internal */

src/engine/engine_networking_files_default_components.ts CHANGED Viewed

@@ -10,7 +10,7 @@
 export function onDynamicObjectAdded(_obj: Object3D, _idProv: UIDProvider, _gltf?: GLTF) {
-    console.warn("Adding components on object has been temporarily disabled");
+    // console.warn("Adding components on object has been temporarily disabled");
     // // this ensures we have a drag component
     // let drag = getComponentInChildren(obj as GameObject, DragControls);

src/engine/engine_physics.ts CHANGED Viewed

@@ -282,7 +282,7 @@
         if (debugPhysics) {
             console.timeEnd("raycast");
-            console.log("hits:", (results?.length ? [...results] : "nothing"));
+            console.warn("#" + this.context.time.frame + ", hits:", (results?.length ? [...results] : "nothing"));
         }
         return results;
@@ -309,8 +309,10 @@
                 if (geometry) {
                     const raycastMesh = getRaycastMesh(obj);
                     if (raycastMesh) mesh.geometry = raycastMesh;
+                    const lastResultsCount = results.length;
                     raycaster.intersectObject(obj, false, results);
-                    if (debugPhysics) Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .1 })
+                    if (debugPhysics && results.length != lastResultsCount)
+                        Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .2, color: raycastMesh ? 0x88dd55 : 0x770000 })
                     mesh.geometry = geometry;
                 }
             }

src/engine/engine_three_utils.ts CHANGED Viewed

@@ -543,8 +543,98 @@
     return box;
 }
+/**
+ * Fits an object into a bounding volume. The volume is defined by a Box3 in world space.
+ * @param obj the object to fit
+ * @param volume the volume to fit the object into
+ * @param opts options for fitting
+ */
+export function fitObjectIntoVolume(obj: Object3D, volume: Box3, opts?: {
+    /** Objects to ignore when calculating the obj's bounding box */
+    ignore?: Object3D[],
+    /** when `true` aligns the objects position to the volume ground
+     * @default true
+    */
+    position?: boolean
+    /** when `true` scales the object to fit the volume
+     * @default true
+    */
+    scale?: boolean,
+}): {
+    /** The object's bounding box before fitting */
+    boundsBefore: Box3,
+    /** The scale that was applied to the object */
+    scale: Vector3,
+} {
+    const box = getBoundingBox([obj], opts?.ignore);
+    const boundsSize = new Vector3();
+    box.getSize(boundsSize);
+    const boundsCenter = new Vector3();
+    box.getCenter(boundsCenter);
+    const targetSize = new Vector3();
+    volume.getSize(targetSize);
+    const targetCenter = new Vector3();
+    volume.getCenter(targetCenter);
+    const scale = new Vector3();
+    scale.set(targetSize.x / boundsSize.x, targetSize.y / boundsSize.y, targetSize.z / boundsSize.z);
+    const minScale = Math.min(scale.x, scale.y, scale.z);
+    const useScale = opts?.scale !== false;
+    if (useScale) {
+        setWorldScale(obj, getWorldScale(obj).multiplyScalar(minScale));
+    }
+    if (opts?.position !== false) {
+        const boundsBottomPosition = new Vector3();
+        box.getCenter(boundsBottomPosition);
+        boundsBottomPosition.y = box.min.y;
+        const targetBottomPosition = new Vector3();
+        volume.getCenter(targetBottomPosition);
+        targetBottomPosition.y = volume.min.y;
+        const offset = targetBottomPosition.clone().sub(boundsBottomPosition);
+        if (useScale) offset.multiplyScalar(minScale);
+        setWorldPosition(obj, getWorldPosition(obj).add(offset));
+    }
+    return {
+        boundsBefore: box,
+        scale,
+    }
+}
+declare type PlaceOnSurfaceResult = {
+    /** The offset from the object bounds to the pivot */
+    offset: Vector3,
+    /** The object's bounding box */
+    bounds: Box3
+}
 /**
+ * Place an object on a surface. This will calculate the object bounds which might be an expensive operation for complex objects.
+ * The object will be visually placed on the surface (the object's pivot will be ignored)
+ * @param obj the object to place on the surface
+ * @param point the point to place the object on
+ * @returns the offset from the object bounds to the pivot
+ */
+export function placeOnSurface(obj: Object3D, point: Vector3): PlaceOnSurfaceResult {
+    const bounds = getBoundingBox([obj]);
+    const center = new Vector3();
+    bounds.getCenter(center);
+    center.y = bounds.min.y;
+    const offset = point.clone().sub(center);
+    const worldPos = getWorldPosition(obj);
+    setWorldPosition(obj, worldPos.add(offset));
+    return {
+        offset,
+        bounds,
+    }
+}
+/**
  * Postprocesses the material of an object loaded by THREE.FBXLoader. It will apply some conversions to the material and will assign a MeshStandardMaterial to the object.
  */
 export function postprocessFBXMaterials(obj: Mesh, material: Material): boolean {

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -694,7 +694,7 @@
         centerCamera?: "none" | "y"
     } = {
             fitOffset: undefined,
-            immediate: true
+            immediate: false
         }) {
         if (this.context.isInXR) {
@@ -702,7 +702,7 @@
             return;
         }
-        const { immediate, centerCamera } = options;
+        const { immediate = false, centerCamera } = options;
         let { fitOffset } = options;
         if (fitOffset == undefined) {

src/engine-components/Skybox.ts CHANGED Viewed

@@ -39,13 +39,9 @@
 ContextRegistry.addContextCreatedCallback((args) => {
     const context = args.context;
-    let skyboxImage = context.domElement.getAttribute("skybox-image");
-    let environmentImage = context.domElement.getAttribute("environment-image");
+    const skyboxImage = context.domElement.getAttribute("skybox-image");
+    const environmentImage = context.domElement.getAttribute("environment-image");
     const promises = new Array<Promise<any>>();
-    skyboxImage = tryParseMagicSkyboxName(skyboxImage);
-    environmentImage = tryParseMagicSkyboxName(environmentImage);
     if (skyboxImage) {
         if (debug)
             console.log("Creating remote skybox to load " + skyboxImage);
@@ -68,25 +64,6 @@
     return Promise.resolve();
 });
-function tryParseMagicSkyboxName(str: string | null | undefined): string | null {
-    switch (str?.toLowerCase()) {
-        case "studio":
-            str = "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.hdr";
-            break;
-        case "blurred-skybox":
-            str = "https://cdn.needle.tools/static/skybox/blurred-skybox.exr";
-            break;
-        case "quicklook-ar":
-            str = "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.exr";
-            break;
-        case "quicklook":
-            str = "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.exr";
-            break;
-    }
-    if (str === undefined) return null;
-    return str;
-}
 declare type SkyboxCacheEntry = { src: string, texture: Promise<Texture> };
 function ensureGlobalCache() {
     if (!globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"])
@@ -147,20 +124,42 @@
  */
 export class RemoteSkybox extends Behaviour {
+    /**
+     * URL to a remote skybox. This value can also use a magic skybox name. Options are "quicklook", "quicklook-ar", "studio", "blurred-skybox".
+     * @example
+     * ```ts
+     * skybox.url = "https://example.com/skybox.hdr";
+     * ```
+     */
     @syncField(RemoteSkybox.prototype.urlChangedSyncField)
     @serializable(URL)
     url?: string;
+    /**
+     * When enabled a user can drop a link to a skybox image on the scene to set the skybox.
+     * @default true
+     */
     @serializable()
     allowDrop: boolean = true;
+    /**
+     * When enabled the skybox will be set as the background of the scene.
+     * @default true
+     */
     @serializable()
     background: boolean = true;
+    /**
+     * When enabled the skybox will be set as the environment of the scene (to be used as environment map for reflections and lighting)
+     * @default true
+     */
     @serializable()
     environment: boolean = true;
-    /* set to false if you do not want to apply url change events via networking */
+    /**
+     * When enabled dropped skybox urls (or assigned skybox urls) will be networked to other users in the same networked room.
+     * @default true
+     */
     @serializable()
     allowNetworking: boolean = true;
@@ -206,7 +205,11 @@
      */
     async setSkybox(url: string | undefined | null, name?: string) {
         if (!this.activeAndEnabled) return false;
+        url = tryParseMagicSkyboxName(url);
         if (!url) return false;
         name ??= url;
         if (!this.isValidTextureType(name)) {
@@ -399,4 +402,26 @@
             }
         }
     };
+}
+function tryParseMagicSkyboxName(str: string | null | undefined): string | null {
+    switch (str?.toLowerCase()) {
+        case "studio":
+            str = "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.hdr";
+            break;
+        case "blurred-skybox":
+            str = "https://cdn.needle.tools/static/skybox/blurred-skybox.exr";
+            break;
+        case "quicklook-ar":
+            str = "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.exr";
+            break;
+        case "quicklook":
+            str = "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.exr";
+            break;
+    }
+    if (str === undefined) return null;
+    return str;
 }

src/engine-components/SyncedRoom.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { isDevEnvironment, showBalloonWarning } from "../engine/debug/index.js";
+import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../engine/debug/index.js";
 import { Mathf } from "../engine/engine_math.js";
 import { RoomEvents } from "../engine/engine_networking.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -19,36 +19,49 @@
     /**
      * The name of the room to join.
+     * @default ""
      */
     @serializable()
     public roomName!: string;
     /**
      * The URL parameter name to use for the room name. E.g. if set to "room" the URL will look like `?room=roomName`.
+     * @default "room"
      */
     @serializable()
     public urlParameterName: string = "room";
     /**
      * If true, the room will be joined automatically when this component becomes active
+     * @default true
      */
     @serializable()
     public joinRandomRoom: boolean = true;
     /**
      * If true and no room parameter is found in the URL then no room will be joined.
+     * @default false
      */
     @serializable()
     public requireRoomParameter: boolean = false;
     /**
      * If true, the room will be rejoined automatically when disconnected.
+     * @default true
      */
     @serializable()
     public autoRejoin: boolean = true;
     /**
      * If true, a join/leave room button will be created in the menu.
+     * @default true
      */
     @serializable()
     public createJoinButton: boolean = true;
+    /**
+     * If true, a join/leave room button for the view only URL will be created in the menu.
+     * @default false
+     */
+    @serializable()
+    public createViewOnlyButton: boolean = false;
     private _roomPrefix?: string;
     /**
@@ -88,11 +101,15 @@
             const button = this.createRoomButton();
             this.context.menu.appendChild(button);
         }
+        if (this.createViewOnlyButton) {
+            this.onEnableViewOnlyButton()
+        }
     }
     /** @internal */
     onDisable(): void {
         this._roomButton?.remove();
+        this.onDisableViewOnlyButton();
         if (this.roomName && this.roomName.length > 0)
             this.context.connection.leaveRoom(this.roomName);
     }
@@ -282,4 +299,51 @@
         this.context.connection.stopListen(RoomEvents.JoinedRoom, this.updateRoomButtonState);
         this.context.connection.stopListen(RoomEvents.LeftRoom, this.updateRoomButtonState);
     }
+    private _viewOnlyButton?: HTMLButtonElement;
+    private onEnableViewOnlyButton() {
+        if (this.context.connection.isConnected) {
+            this.onCreateViewOnlyButton();
+        }
+        else {
+            this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onCreateViewOnlyButton);
+            this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onCreateViewOnlyButton);
+        }
+    }
+    private onDisableViewOnlyButton() {
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onCreateViewOnlyButton);
+        this._viewOnlyButton?.remove();
+    }
+    private onCreateViewOnlyButton = () => {
+        if (!this._viewOnlyButton) {
+            const button = document.createElement("button");
+            this._viewOnlyButton = button;
+            button.classList.add("view-only-button");
+            button.setAttribute("priority", "90");
+            button.onclick = () => {
+                const viewUrl = this.getViewOnlyUrl();
+                if (viewUrl?.length) {
+                    // share
+                    if (navigator.canShare({ url: viewUrl })) {
+                        navigator.share({ url: viewUrl })?.catch(err => {
+                            console.warn(err);
+                        });
+                    }
+                    else {
+                        navigator.clipboard.writeText(viewUrl);
+                        showBalloonMessage("View only URL copied to clipboard");
+                    }
+                }
+                else {
+                    showBalloonWarning("Could not create view only URL");
+                }
+            };
+            button.title = "Copy the view only URL: A page accessed by the view only URL can not be modified by visiting users.";
+            button.textContent = "Share View URL";
+            button.prepend(getIconElement("visibility"));
+        }
+        this.context.menu.appendChild(this._viewOnlyButton);
+    }
 }