@needle-tools/engine 2.60.1-pre → 2.60.3-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.60.1-pre",
+    "version": "2.60.3-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "dist/needle-engine.js",

package/src/engine/engine_types.ts

@@ -154,7 +154,7 @@ export declare interface ICamera extends IComponent {
     backgroundBlurriness: number | undefined;
     clearFlags: number;
     aspect: number;
-    fieldOfView: number;
+    fieldOfView?: number;
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;
 }
 

package/src/engine-components/Camera.ts

@@ -31,13 +31,22 @@ export class Camera extends Behaviour implements ICamera {
         return (this.context.domWidth / this.context.domHeight);
     }
 
-    get fieldOfView(): number { return this._fov; }
+    get fieldOfView(): number | undefined {
+        if (this._cam instanceof PerspectiveCamera) {
+            return this._cam.fov;
+        }
+        return this._fov;
+    }
     @serializable()
-    set fieldOfView(val) {
+    set fieldOfView(val: number | undefined) {
         const changed = this._fov != val;
         this._fov = val;
         if (changed && this._cam) {
             if (this._cam instanceof PerspectiveCamera) {
+                if (this._fov === undefined) {
+                    console.error("Can not set undefined fov on PerspectiveCamera");
+                    return;
+                }
                 this._cam.fov = this._fov;
                 this._cam.updateProjectionMatrix();
             }
@@ -100,28 +109,28 @@ export class Camera extends Behaviour implements ICamera {
 
     @serializable()
     public set backgroundBlurriness(val: number | undefined) {
-        if(val === this._backgroundBlurriness) return;
+        if (val === this._backgroundBlurriness) return;
         if (val === undefined)
             this._backgroundBlurriness = undefined;
         else
             this._backgroundBlurriness = Math.min(Math.max(val, 0), 1);
         this.applyClearFlagsIfIsActiveCamera();
     }
-    public get backgroundBlurriness() : number | undefined {
+    public get backgroundBlurriness(): number | undefined {
         return this._backgroundBlurriness;
     }
     private _backgroundBlurriness?: number;
 
     @serializable()
     public set backgroundIntensity(val: number | undefined) {
-        if(val === this._backgroundIntensity) return;
+        if (val === this._backgroundIntensity) return;
         if (val === undefined)
             this._backgroundIntensity = undefined;
         else
             this._backgroundIntensity = Math.min(Math.max(val, 0), 10);
         this.applyClearFlagsIfIsActiveCamera();
     }
-    public get backgroundIntensity() : number | undefined {
+    public get backgroundIntensity(): number | undefined {
         return this._backgroundIntensity;
     }
     private _backgroundIntensity?: number;
@@ -143,7 +152,7 @@ export class Camera extends Behaviour implements ICamera {
     }
 
     private _backgroundColor?: RGBAColor;
-    private _fov: number = 60;
+    private _fov?: number;
     private _cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
     private _clearFlags: ClearFlags = ClearFlags.SolidColor;
     private _skybox?: CameraSkybox;
@@ -161,7 +170,7 @@ export class Camera extends Behaviour implements ICamera {
         const origin = Camera._origin;
         origin.set(x, y, -1);
         this.context.input.convertScreenspaceToRaycastSpace(origin);
-        if(debugscreenpointtoray) console.log("screenPointToRay", x.toFixed(2), y.toFixed(2), "now:", origin.x.toFixed(2), origin.y.toFixed(2), "isInXR:" + this.context.isInXR);
+        if (debugscreenpointtoray) console.log("screenPointToRay", x.toFixed(2), y.toFixed(2), "now:", origin.x.toFixed(2), origin.y.toFixed(2), "isInXR:" + this.context.isInXR);
         origin.z = -1;
         origin.unproject(cam);
         const dir = Camera._direction.set(origin.x, origin.y, origin.z);
@@ -182,13 +191,13 @@ export class Camera extends Behaviour implements ICamera {
             console.warn("Camera has no source - the camera should be exported inside a gltf", this.name);
         }
 
-        if(debugscreenpointtoray){
+        if (debugscreenpointtoray) {
             window.addEventListener("pointerdown", evt => {
                 const px = evt.clientX;
                 const py = evt.clientY;
                 console.log("touch", px.toFixed(2), py.toFixed(2))
                 const ray = this.screenPointToRay(px, py);
-                const randomHex = "#" + Math.floor(Math.random()*16777215).toString(16);
+                const randomHex = "#" + Math.floor(Math.random() * 16777215).toString(16);
                 Gizmos.DrawRay(ray.origin, ray.direction, randomHex, 10);
             });
         }
@@ -218,12 +227,15 @@ export class Camera extends Behaviour implements ICamera {
         if (cameraAlreadyCreated) {
             cam = this.gameObject as any;
             cam?.layers.enableAll();
+            if (cam instanceof PerspectiveCamera)
+                this._fov = cam.fov;
         }
         else
             cam = this.gameObject.children[0] as THREE.PerspectiveCamera | THREE.OrthographicCamera | null;
         if (cam && cam.isCamera) {
             if (cam.type === "PerspectiveCamera") {
-                cam.fov = this._fov;
+                if (this._fov)
+                    cam.fov = this._fov;
                 cam.near = this._nearClipPlane;
                 cam.far = this._farClipPlane;
                 cam.updateProjectionMatrix();
@@ -231,7 +243,8 @@ export class Camera extends Behaviour implements ICamera {
         }
         else if (!this.orthographic) {
             cam = new PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
-            cam.fov = this.fieldOfView;
+            if (this.fieldOfView)
+                cam.fov = this.fieldOfView;
             this.gameObject.add(cam);
         }
         else {
@@ -337,7 +350,7 @@ class CameraSkybox {
         if (!this._skybox) {
             console.warn("Failed to load/find skybox texture", this);
         }
-        else if(this.context.scene.background !== this._skybox) {
+        else if (this.context.scene.background !== this._skybox) {
             if (debug)
                 console.log("Set skybox", this._camera, this._skybox);
             this._skybox.encoding = sRGBEncoding;

package/src/engine-components/ParticleSystem.ts

@@ -8,7 +8,7 @@ import { getParam } from "../engine/engine_utils";
 
 import { serializable } from "../engine/engine_serialization";
 import { RGBAColor } from "./js-extensions/RGBAColor";
-import { AxesHelper, BufferGeometry, Color, Material, Matrix4, Mesh, MeshStandardMaterial, Object3D, OneMinusDstAlphaFactor, Quaternion, Sprite, SpriteMaterial, Vector3, Vector4 } from "three";
+import { AxesHelper, BufferGeometry, Color, Material, Matrix4, Mesh, MeshStandardMaterial, Object3D, OneMinusDstAlphaFactor, PlaneGeometry, Quaternion, Sprite, SpriteMaterial, Vector3, Vector4 } from "three";
 import { getWorldPosition, getWorldQuaternion, getWorldScale } from "../engine/engine_three_utils";
 import { assign, deserializeObject } from "../engine/engine_serialization_core";
 import { BatchedParticleRenderer, Behavior, BillBoardSettings, BurstParameters, ColorGenerator, ConstantColor, ConstantValue, EmissionState, EmitSubParticleSystem, EmitterShape, FunctionColorGenerator, FunctionJSON, FunctionValueGenerator, IntervalValue, MeshSettings, Particle, ParticleEmitter, ParticleSystem as _ParticleSystem, ParticleSystemParameters, PointEmitter, RecordState, RenderMode, RotationGenerator, SizeOverLife, TrailBatch, TrailParticle, TrailSettings, ValueGenerator } from "three.quarks";
@@ -86,7 +86,14 @@ export class ParticleSystemRenderer extends Behaviour {
             if (this.particleMesh instanceof Mesh) {
                 geo = this.particleMesh.geometry;
             }
-            if (geo === null) geo = new THREE.BoxGeometry(1, 1, 0);
+            if (geo === null) {
+                geo = new PlaneGeometry(1, 1);
+                // Flip UVs horizontally
+                const uv = geo.attributes.uv;
+                for (let i = 0; i < uv.count; i++) {
+                    uv.setX(i, 1 - uv.getX(i));
+                }
+            }
         }
 
         const res = new Mesh(geo, this.getMaterial());

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

@@ -159,11 +159,13 @@ export class Canvas extends UIRootComponent {
 
                 // console.log(this.shadowComponent)
 
-                const w = Math.tan(Mathf.toRadians(camera.fieldOfView) * pos) * (camera.aspect * 1.333333);
-                const h = w * (this.context.domHeight / this.context.domWidth);
-                canvas.scale.x = -w;
-                canvas.scale.y = h;
+                if (camera.fieldOfView) {
+                    const w = Math.tan(Mathf.toRadians(camera.fieldOfView) * pos) * (camera.aspect * 1.333333);
+                    const h = w * (this.context.domHeight / this.context.domWidth);
+                    canvas.scale.x = -w;
+                    canvas.scale.y = h;
 
+                }
                 // const rects = this.gameObject.getComponentsInChildren(BaseUIComponent);
                 // for (const rect of rects) {
                 //     rect.set({ width: this.context.domWidth * .5, height: 100 })