@needle-tools/engine 2.24.0-pre

package/src/engine-components/BasicIKConstraint.ts

@@ -0,0 +1,54 @@
+import { Behaviour, GameObject } from "./Component";
+import * as utils from "./../engine/engine_three_utils";
+import * as THREE from "three"
+
+export class BasicIKConstraint extends Behaviour {
+
+    private from!: GameObject;
+    private to!: GameObject;
+    private hint!: GameObject;
+    private desiredDistance: number = 1;
+
+    onEnable(): void {
+        // console.log(this);
+    }
+
+    update() {
+        if (!this.from || !this.to || !this.hint) return;
+
+        // console.log(this);
+
+        // find center
+        let toPos = utils.getWorldPosition(this.to).clone();
+        let fromPos = utils.getWorldPosition(this.from).clone();
+        let dist = toPos.distanceTo(fromPos);
+
+        let dir0 = toPos.clone();
+        dir0.sub(fromPos);
+        let center = fromPos.clone();
+        center.add(toPos);
+        center.multiplyScalar(0.5);
+        
+        // find direction we should offset in
+        let hintDir = utils.getWorldPosition(this.hint).clone();
+        hintDir.sub(center);
+        
+        let offsetDir = new THREE.Vector3();
+        offsetDir.crossVectors(hintDir, dir0);
+        offsetDir.crossVectors(dir0, offsetDir);
+        offsetDir.normalize();
+
+        let halfDist = dist * 0.5;
+        let stretchDistance = Math.max(this.desiredDistance, halfDist);
+        let offsetLength = Math.sqrt(stretchDistance * stretchDistance - halfDist * halfDist);
+        
+        let resultPos = offsetDir.clone();
+        resultPos.multiplyScalar(offsetLength);
+        resultPos.add(center);
+        utils.setWorldPosition(this.gameObject, resultPos);
+
+        let lookPos = center.clone();
+        lookPos.sub(offsetDir);
+        this.gameObject.lookAt(lookPos);
+    }
+}

package/src/engine-components/BoxCollider.ts

@@ -0,0 +1,2 @@
+import { BoxCollider } from "./Collider";
+export default BoxCollider;

package/src/engine-components/BoxHelperComponent.ts

@@ -0,0 +1,83 @@
+import { Behaviour } from "./Component";
+import * as THREE from "three";
+import { getParam } from "../engine/engine_utils";
+import { CreateWireCube } from "../engine/engine_gizmos";
+import { getWorldPosition, getWorldScale } from "../engine/engine_three_utils";
+
+const gizmos = getParam("gizmos");
+
+export class BoxHelperComponent extends Behaviour {
+
+    private box: THREE.Box3 | null = null;
+    private testBox: THREE.Box3 = new THREE.Box3();
+    private _lastMatrixUpdateFrame: number = -1;
+    private static _position: THREE.Vector3 = new THREE.Vector3();
+    private static _size: THREE.Vector3 = new THREE.Vector3(.01, .01, .01);
+
+    public isInBox(obj: THREE.Object3D): boolean | undefined {
+        if (!obj) return undefined;
+
+        // if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
+        // if (!obj.geometry.boundingBox) return undefined;
+
+        if (!this.box) {
+            this.box = new THREE.Box3();
+        }
+        this.updateBox(false);
+
+        if (obj.type === "Mesh")
+            this.testBox.setFromObject(obj);
+        else {
+            const wp = getWorldPosition(obj, BoxHelperComponent._position);
+            const size = getWorldScale(obj, BoxHelperComponent._size);
+            this.testBox.setFromCenterAndSize(wp, size);
+        }
+
+        // this.tp.copy(obj.geometry.boundingBox);
+        // // this.tp.setFromCenterAndSize(obj.position, obj.scale);
+        // this.tp.applyMatrix4(obj.matrixWorld);
+        // console.log(this.tp);
+        // console.log(this.box?.min, this.box?.max, this.tp.min, this.tp.max);
+        return this.box?.intersectsBox(this.testBox);
+    }
+
+    public intersects(box: THREE.Box3): boolean {
+        if (!box) return false;
+        return this.updateBox(false).intersectsBox(box);
+    }
+
+    public updateBox(force: boolean = false): THREE.Box3 {
+        if (!this.box) {
+            this.box = new THREE.Box3();
+        }
+        if (force || this.context.time.frameCount != this._lastMatrixUpdateFrame) {
+            this._lastMatrixUpdateFrame = this.context.time.frameCount;
+            this.box.setFromCenterAndSize(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1, 1, 1));
+            this.box.applyMatrix4(this.gameObject.matrixWorld);
+        }
+        return this.box;
+    }
+
+
+    private _helper: THREE.LineSegments | null = null;
+    private _color: THREE.Color | null = null;
+
+    awake(): void {
+        this._helper = null;
+        this._color = null;
+        this.box = null;
+    }
+
+    public showHelper(col: THREE.ColorRepresentation | null = null, force: boolean = false) {
+        if (!gizmos && !force) return;
+        if (this._helper) {
+            if (col)
+                this._color?.set(col);
+            this.gameObject.add(this._helper);
+            return;
+        }
+        this._helper = CreateWireCube(col);
+        this.gameObject.add(this._helper);
+    }
+
+}

package/src/engine-components/Camera.ts

@@ -0,0 +1,261 @@
+import { Behaviour, GameObject } from "./Component";
+import * as THREE from "three";
+import { OrbitControls } from "./OrbitControls";
+import { getParam } from "../engine/engine_utils";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { RGBAColor } from "./js-extensions/RGBAColor";
+import { PerspectiveCamera } from "three";
+
+export enum ClearFlags {
+    Skybox = 1,
+    SolidColor = 2,
+    Uninitialized = 4,
+}
+
+const debug = getParam("debugcam");
+
+export class Camera extends Behaviour {
+
+    get aspect() : number { 
+        if(this._cam instanceof PerspectiveCamera) return this._cam.aspect;
+        return (this.context.domWidth / this.context.domHeight);
+    }
+
+    get fieldOfView(): number { return this._fov; }
+    @serializeable()
+    set fieldOfView(val) {
+        const changed = this._fov != val;
+        this._fov = val;
+        if (changed && this._cam) {
+            if (this._cam instanceof THREE.PerspectiveCamera) {
+                this._cam.fov = this._fov;
+                this._cam.updateProjectionMatrix();
+            }
+        }
+    }
+
+    get nearClipPlane(): number { return this._nearClipPlane; }
+    @serializeable()
+    set nearClipPlane(val) {
+        const changed = this._nearClipPlane != val;
+        this._nearClipPlane = val;
+        if (this._cam && changed) {
+            this._cam.near = val;
+            this._cam.updateProjectionMatrix();
+        }
+    }
+
+    get farClipPlane(): number { return this._farClipPlane; }
+    @serializeable()
+    set farClipPlane(val) {
+        const changed = this._farClipPlane != val;
+        this._farClipPlane = val;
+        if (this._cam && changed) {
+            this._cam.far = val;
+            this._cam.updateProjectionMatrix();
+        }
+    }
+
+    @serializeable()
+    public get clearFlags(): ClearFlags {
+        return this._clearFlags;
+    }
+    public set clearFlags(val: ClearFlags) {
+        this._clearFlags = val;
+        this.applyClearFlagsIfIsActiveCamera();
+    }
+    @serializeable()
+    public orthographic: boolean = false;
+    @serializeable()
+    public orthographicSize: number = 5;
+
+    @serializeable()
+    public ARBackgroundAlpha: number = 0;
+
+    private _nearClipPlane: number = 0.1;
+    private _farClipPlane: number = 1000;
+
+    @serializeable(RGBAColor)
+    public get backgroundColor(): RGBAColor | null {
+        return this._backgroundColor ?? null;
+    }
+    public set backgroundColor(val: RGBAColor | null) {
+        if (!val) return;
+        if (!this._backgroundColor) {
+            if (!val.clone) return;
+            this._backgroundColor = val.clone();
+        }
+        else this._backgroundColor.copy(val);
+        this.applyClearFlagsIfIsActiveCamera();
+    }
+
+    private _backgroundColor?: RGBAColor;
+    private _fov: number = 60;
+    private _cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
+    private _clearFlags: ClearFlags = ClearFlags.SolidColor;
+    private _skybox?: CameraSkybox;
+
+
+    public get cam(): THREE.PerspectiveCamera | THREE.OrthographicCamera {
+        if (this.activeAndEnabled)
+            this.buildCamera();
+        return this._cam!;
+    }
+
+    awake() {
+        if (!this.sourceId) {
+            console.warn("Camera has no source - the camera should be exported inside a gltf", this.name);
+        }
+    }
+
+    onEnable(): void {
+        if (debug) console.log(this);
+        this.buildCamera();
+        if (this.tag == "MainCamera") {
+            this.context.setCurrentCamera(this);
+        }
+        this.applyClearFlagsIfIsActiveCamera();
+    }
+
+    buildCamera() {
+        if (this._cam) return;
+
+        const cameraAlreadyCreated = this.gameObject["isCamera"];
+
+        // TODO: when exporting from blender we already have a camera in the children
+        let cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
+        if (cameraAlreadyCreated) {
+            cam = this.gameObject as any;
+        }
+        else
+            cam = this.gameObject.children[0] as THREE.PerspectiveCamera | THREE.OrthographicCamera | null;
+        if (cam && cam.isCamera) {
+            if (cam.type === "PerspectiveCamera") {
+                cam.fov = this._fov;
+                cam.near = this._nearClipPlane;
+                cam.far = this._farClipPlane;
+                cam.updateProjectionMatrix();
+            }
+        }
+        else if (!this.orthographic) {
+            cam = new THREE.PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
+            cam.fov = this.fieldOfView;
+        }
+        else {
+            const factor = this.orthographicSize * 100;
+            cam = new THREE.OrthographicCamera(window.innerWidth / -factor, window.innerWidth / factor, window.innerHeight / factor, window.innerHeight / -factor, this._nearClipPlane, this._farClipPlane);
+        }
+        this._cam = cam;
+
+        // workaround for layers in three affecting visibility by default
+        // we should probably export this info from unity as well
+        if (this.layer === 0) {
+            this._cam.layers.enableAll();
+        }
+        if (this.tag == "MainCamera") {
+            this.context.setCurrentCamera(this);
+        }
+        // if (!cameraAlreadyCreated)
+        //     this.gameObject.add(cam);
+
+        // if (!cameraAlreadyCreated) {
+        //     const notInGltf = this["__notInGltf"];
+        //     if ((notInGltf !== undefined)) {
+        //         this.gameObject.getWorldPosition(cam.position);
+        //         this.gameObject.getWorldQuaternion(cam.quaternion);
+        //         const t = new THREE.Euler();
+        //         t.setFromQuaternion(cam.quaternion);
+        //         t.y += Math.PI;
+        //         t.z *= -1;
+        //         cam.rotation.copy(t);
+        //     }
+        //     else {
+        //         cam.position.copy(this.gameObject.position);
+        //         cam.rotation.copy(this.gameObject.rotation);
+        //     }
+
+        //     // cam.rotateX(Math.PI / -2);
+
+        //     this.gameObject.position.set(0, 0, 0);
+        //     this.gameObject.rotation.set(0, 0, 0);
+        // }
+    }
+
+    applyClearFlagsIfIsActiveCamera() {
+        // TODO: need to differentiate between what kind of XR (set skybox in VR but not in mobile AR for example!?)
+        if (this._cam && this.context.mainCameraComponent === this) {
+            switch (this._clearFlags) {
+                case ClearFlags.Skybox:
+                    if (this.context.isInXR) {
+                        if (!this.ARBackgroundAlpha || this.ARBackgroundAlpha < 0.001) {
+                            this.context.scene.background = null;
+                            this.context.renderer.setClearColor(0x000000, 0);
+                            return;
+                        }
+                    }
+                    this.enableSkybox();
+                    break;
+                case ClearFlags.SolidColor:
+                    if (this.backgroundColor) {
+                        let alpha = this.backgroundColor.alpha;
+                        // when in WebXR use ar background alpha override or set to 0
+                        if (this.context.isInXR) {
+                            alpha = this.ARBackgroundAlpha ?? 0;
+                        }
+                        this.context.scene.background = null;
+                        this.context.renderer.setClearColor(this.backgroundColor, alpha);
+                    }
+                    break;
+                case ClearFlags.Uninitialized:
+                    this.context.scene.background = null
+                    this.context.renderer.setClearColor(0x000000, 0);
+                    break;
+            }
+        }
+    }
+
+    private enableSkybox() {
+        if (!this._skybox)
+            this._skybox = new CameraSkybox(this);
+        this._skybox.enable();
+    }
+}
+
+
+class CameraSkybox {
+
+    private _camera: Camera;
+    private _skybox?: THREE.Texture;
+
+    get context() { return this._camera?.context; }
+
+    constructor(camera: Camera) {
+        this._camera = camera;
+    }
+
+    enable() {
+        this._skybox = this.context.lightmaps.tryGetSkybox(this._camera.sourceId) as THREE.Texture;
+        if (!this._skybox) {
+            console.warn("Failed to load/find skybox texture", this);
+        }
+        else {
+            if (debug)
+                console.log("Set skybox", this._camera, this._skybox);
+            this._skybox.encoding = THREE.sRGBEncoding;
+            this._skybox.mapping = THREE.EquirectangularReflectionMapping;
+            this.context.scene.background = this._skybox;
+        }
+    }
+
+}
+
+export function createCameraWithOrbitControl(scene: THREE.Scene): Camera {
+    const srcId = "created/implictly";
+    const go = new THREE.Object3D();
+    scene.add(go);
+    const cam = GameObject.addNewComponent(go, Camera, false);
+    cam.sourceId = srcId;
+    const orbit = GameObject.addNewComponent(go, OrbitControls, false);
+    orbit.sourceId = srcId;
+    return cam;
+}

package/src/engine-components/Collider.ts

@@ -0,0 +1,72 @@
+import { Behaviour } from "./Component";
+import { Rigidbody } from "./RigidBody";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Vector3 } from "three"
+import { Shape } from "cannon-es";
+
+export class Collider extends Behaviour {
+    @serializeable(Rigidbody)
+    attachedRigidbody: Rigidbody | null = null;
+    @serializeable()
+    isTrigger: boolean = false;
+
+    protected _shape: Shape | null = null;
+
+    awake() {
+        super.awake();
+        this._shape = null;
+    }
+
+    onEnable() {
+        // a rigidbody is not assigned if we export an asset
+        if (!this.attachedRigidbody)
+            this.attachedRigidbody = this.gameObject.getComponentInParent(Rigidbody);
+    }
+
+    onDisable() {
+        if (this._shape) {
+
+        }
+    }
+
+}
+
+
+export class SphereCollider extends Collider {
+
+    @serializeable()
+    radius: number = .5;
+    @serializeable(Vector3)
+    center: THREE.Vector3 = new Vector3(0, 0, 0);
+
+    onEnable() {
+        super.onEnable();
+        if (!this._shape)
+            this._shape = this.context.physics.addSphereCollider(this.gameObject, this.center, this.radius, this.attachedRigidbody);
+    }
+
+    // onDisable() {
+    //     // if (this._shape)
+    //     //     this.context.physics.removeShape(this.gameObject, this._shape);
+    // }
+}
+
+export class BoxCollider extends Collider {
+
+    @serializeable(Vector3)
+    size!: THREE.Vector3;
+    @serializeable(Vector3)
+    center!: THREE.Vector3;
+
+    onEnable() {
+        super.onEnable();
+        if (!this._shape)
+            this._shape = this.context.physics.addBoxCollider(this.gameObject, this.isTrigger, this.center, this.size, this.attachedRigidbody);
+    }
+
+    // onDisable() {
+    //     // if (this._shape) {
+    //     //     this.context.physics.removeShape(this.gameObject, this._shape);
+    //     // }
+    // }
+}