@needle-tools/engine 3.5.12-beta → 3.5.13-beta

package/src/engine-components/OrbitControls.ts

@@ -1,12 +1,12 @@
 import { Behaviour, GameObject } from "./Component";
 import { Camera } from "./Camera";
 import { LookAtConstraint } from "./LookAtConstraint";
-import { getWorldPosition, slerp } from "../engine/engine_three_utils";
+import { getWorldPosition, getWorldRotation, setWorldPosition, setWorldRotation, slerp } from "../engine/engine_three_utils";
 import { RaycastOptions } from "../engine/engine_physics";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { getParam, isMobileDevice } from "../engine/engine_utils";
 
-import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3, Box3Helper } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { AfterHandleInputEvent, EventSystem, EventSystemEvents } from "./ui/EventSystem";
 import { ICameraController } from "../engine/engine_types";
@@ -14,6 +14,7 @@ import { setCameraController } from "../engine/engine_camera";
 import { SyncedTransform } from "./SyncedTransform";
 
 const freeCam = getParam("freecam");
+const debugCameraFit = getParam("debugcamerafit");
 
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
 let defaultKeys: any = undefined;
@@ -351,7 +352,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
     // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
-    fitCameraToObjects(objects: Array<Object3D>, fitOffset: number = 1.5) {
+    fitCameraToObjects(objects: Array<Object3D>, fitOffset: number = 1.1) {
         const camera = this._cameraObject as PerspectiveCamera;
         const controls = this._controls as ThreeOrbitControls | null;
 
@@ -361,20 +362,43 @@ export class OrbitControls extends Behaviour implements ICameraController {
         const center = new Vector3();
         const box = new Box3();
 
+        // TODO would be much better to calculate the bounds in camera space instead of world space - 
+        // we would get proper view-dependant fit.
+        // Right now it's independent from where the camera is actually looking from,
+        // and thus we're just getting some maximum that will work for sure.
+        
         box.makeEmpty();
-        for (const object of objects)
-            box.expandByObject(object);
+        for (const object of objects) {
+            // ignore Box3Helpers
+            if (object instanceof Box3Helper) continue;
+            box.expandByObject(object, true);
+        }
+
+        camera.updateMatrixWorld();
+        camera.updateProjectionMatrix();
 
-        box.getSize(size);
         box.getCenter(center);
 
-        const maxSize = Math.max(size.x, size.y, size.z);
-        const fitHeightDistance = maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
-        const fitWidthDistance = fitHeightDistance / camera.aspect;
-        const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance);
+        // project this box into camera space
+        box.applyMatrix4(camera.matrixWorldInverse);
+
+        box.getSize(size);
+        box.setFromCenterAndSize(center, size);
+
+        const verticalFov = camera.fov;
+        const horizontalFov = 2 * Math.atan(Math.tan(verticalFov * Math.PI / 360 / 2) * camera.aspect) / Math.PI * 360;
+        const fitHeightDistance = size.y / (2 * Math.atan(Math.PI * verticalFov / 360));
+        const fitWidthDistance = size.x / (2 * Math.atan(Math.PI * horizontalFov / 360));
+
+        const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance) + size.z / 2;
 
+        if (debugCameraFit) {
+            console.log("Fit camera to objects", fitHeightDistance, fitWidthDistance, "distance", distance);
+        }
+
+        const cameraWp = getWorldPosition(camera);
         const direction = controls.target.clone()
-            .sub(camera.position)
+            .sub(cameraWp)
             .normalize()
             .multiplyScalar(distance);
 
@@ -384,13 +408,32 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
         camera.near = distance / 100;
         camera.far = distance * 100;
+
+        camera.updateMatrixWorld();
         camera.updateProjectionMatrix();
 
-        camera.position.copy(controls.target).sub(direction);
+        setWorldPosition(camera, controls.target.clone().sub(direction));
+
+        if (debugCameraFit) {
+            const helper = new Box3Helper(box);
+            this.context.scene.add(helper);
+            setWorldRotation(helper, getWorldRotation(camera));
+
+            if (!this._haveAttachedKeyboardEvents) {
+                this._haveAttachedKeyboardEvents = true;
+                document.body.addEventListener("keydown", (e) => {
+                    if (e.code === "KeyF") {
+                        this.fitCameraToObjects(objects);
+                    }
+                });
+            }
+        }
 
         controls.update();
     }
 
+    private _haveAttachedKeyboardEvents: boolean = false;
+
     // private onPositionDrag(){
 
     // }

package/src/engine-components/Skybox.ts

@@ -5,10 +5,34 @@ import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
 import { EquirectangularRefractionMapping, sRGBEncoding, Texture, TextureLoader } from "three"
 import { syncField } from "../engine/engine_networking_auto";
 import { Camera } from "./Camera";
-import { getParam, resolveUrl } from "../engine/engine_utils";
+import { getParam } from "../engine/engine_utils";
+import { ContextRegistry } from "../engine/engine_context_registry";
 
 const debug = getParam("debugskybox");
 
+ContextRegistry.addContextCreatedCallback((args) => {
+    const context = args.context;
+    const skyboxImage = context.domElement.getAttribute("skybox-image");
+    const environmentImage = context.domElement.getAttribute("environment-image");
+    if (skyboxImage) {
+        if (debug) console.log("Creating remote skybox to load " + skyboxImage);
+        const remote = new RemoteSkybox();
+        remote.url = skyboxImage;
+        remote.allowDrop = false;
+        remote.environment = false;
+        remote.background = true;
+        GameObject.addComponent(context.scene, remote);
+    }
+    if (environmentImage) {
+        const remote = new RemoteSkybox();
+        remote.url = environmentImage;
+        remote.allowDrop = false;
+        remote.environment = true;
+        remote.background = false;
+        GameObject.addComponent(context.scene, remote);
+    }
+});
+
 export class RemoteSkybox extends Behaviour {
 
     @syncField("setSkybox")
@@ -53,7 +77,7 @@ export class RemoteSkybox extends Behaviour {
             console.warn("Potentially invalid skybox url", this.url, "on", this.name);
         }
 
-        if(debug) console.log("Remote skybox url?: " + url);
+        if (debug) console.log("Remote skybox url?: " + url);
 
         if (this._prevUrl === url && this._prevLoadedEnvironment) {
             this.applySkybox();
@@ -81,7 +105,7 @@ export class RemoteSkybox extends Behaviour {
                 this._loader = new TextureLoader();
         }
 
-        if(debug) console.log("Loading skybox: " + url);
+        if (debug) console.log("Loading skybox: " + url);
         const envMap = await this._loader.loadAsync(url);
         if (!envMap) return;
         // Check if we're still enabled
@@ -110,7 +134,7 @@ export class RemoteSkybox extends Behaviour {
         if (this.context.scene.environment !== envMap)
             this._prevEnvironment = this.context.scene.environment;
 
-        if(debug) console.log("Set remote skybox", this.url);
+        if (debug) console.log("Set remote skybox", this.url);
         if (this.environment)
             this.context.scene.environment = envMap;
         if (this.background && !Camera.backgroundShouldBeTransparent(this.context))
@@ -147,12 +171,12 @@ export class RemoteSkybox extends Behaviour {
             for (const type of e.dataTransfer.types) {
                 if (type === "text/uri-list") {
                     const url = e.dataTransfer.getData(type);
-                    if(debug) console.log(type, url);
+                    if (debug) console.log(type, url);
                     let name = new RegExp(/polyhaven.com\/asset_img\/.+?\/(?<name>.+)\.png/).exec(url)?.groups?.name;
                     if (!name) {
                         name = new RegExp(/polyhaven\.com\/a\/(?<name>.+)/).exec(url)?.groups?.name;
                     }
-                    if(debug) console.log(name);
+                    if (debug) console.log(name);
                     if (name) {
                         const envurl = "https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/" + name + "_1k.exr";
                         this.setSkybox(envurl);