diff --git a/apps/sandbox/src/app/height-field/height-field-example.component.ts b/apps/sandbox/src/app/height-field/height-field-example.component.ts index 305142bf4..1905141cb 100644 --- a/apps/sandbox/src/app/height-field/height-field-example.component.ts +++ b/apps/sandbox/src/app/height-field/height-field-example.component.ts @@ -67,7 +67,7 @@ function generateHeightmap({ width, height, number, scale }: GenerateHeightmapAr export class HeightFieldExampleComponent { @Input() scale = 10; - heights = generateHeightmap({ + readonly heights = generateHeightmap({ height: 128, number: 10, scale: 1, diff --git a/apps/sandbox/src/app/height-field/height-field.component.ts b/apps/sandbox/src/app/height-field/height-field.component.ts index 8089683f7..0bf30b304 100644 --- a/apps/sandbox/src/app/height-field/height-field.component.ts +++ b/apps/sandbox/src/app/height-field/height-field.component.ts @@ -3,6 +3,7 @@ import { NgtTriple } from '@angular-three/core'; import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; // @ts-ignore import niceColors from 'nice-color-palettes'; +import * as THREE from 'three'; @Component({ selector: 'sandbox-height-field[elementSize][heights][position][rotation]', @@ -18,7 +19,7 @@ export class HeightFieldComponent { readonly color = niceColors[17][4]; - heightFieldRef = this.physicBody.useHeightfield(() => ({ + readonly heightFieldRef = this.physicBody.useHeightfield(() => ({ args: [ this.heights, { diff --git a/apps/sandbox/src/app/height-field/spheres.component.ts b/apps/sandbox/src/app/height-field/spheres.component.ts index 4a68df28e..738db9f00 100644 --- a/apps/sandbox/src/app/height-field/spheres.component.ts +++ b/apps/sandbox/src/app/height-field/spheres.component.ts @@ -22,7 +22,7 @@ export class SpheresComponent extends NgtComponentStore { @Input() spread = 0; - readonly sphereRef = this.physicBody.useSphere((index) => ({ + readonly sphereRef = this.physicBody.useSphere((index) => ({ args: [0.2], mass: 1, position: [ diff --git a/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts b/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts index 6d61c839f..d12719e3f 100644 --- a/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts +++ b/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts @@ -75,7 +75,7 @@ export class Plane { @Input() position?: NgtVector3; @Input() rotation?: NgtEuler; - planeRef = this.physicBody.usePlane(() => ({ + readonly planeRef = this.physicBody.usePlane(() => ({ position: this.position as NgtTriple, rotation: this.rotation as NgtTriple, })); @@ -100,9 +100,9 @@ export class Plane { providers: [NgtPhysicBody], }) export class Box { - boxSize: NgtTriple = [4, 4, 4]; + readonly boxSize: NgtTriple = [4, 4, 4]; - boxRef = this.physicBody.useBox(() => ({ + readonly boxRef = this.physicBody.useBox(() => ({ mass: 1, type: 'Kinematic', args: this.boxSize, @@ -138,7 +138,7 @@ export class InstancedSpheres implements OnInit { colors!: Float32Array; - sphereRef = this.physicBody.useSphere((index) => ({ + readonly sphereRef = this.physicBody.useSphere((index) => ({ args: [1], mass: 1, position: [Math.random() - 0.5, Math.random() - 0.5, index * 2], diff --git a/apps/sandbox/src/app/monday-morning/monday-morning.component.ts b/apps/sandbox/src/app/monday-morning/monday-morning.component.ts index 7e4f1add4..4babb08b4 100644 --- a/apps/sandbox/src/app/monday-morning/monday-morning.component.ts +++ b/apps/sandbox/src/app/monday-morning/monday-morning.component.ts @@ -1,9 +1,9 @@ import { ConeTwistConstraintOpts, NgtPhysicBody, + NgtPhysicBodyReturn, NgtPhysicConstraint, NgtPhysicConstraintReturn, - NgtPhysicsBodyPublicApi, NgtPhysicsModule, } from '@angular-three/cannon'; import { NgtCanvasModule, NgtLoader, NgtObject, NgtRenderState, NgtTriple, NgtVector3, Ref } from '@angular-three/core'; @@ -46,7 +46,7 @@ const { joints, shapes } = createRagdoll(4.8, Math.PI / 16, Math.PI / 16, 0); const double = ([x, y, z]: Readonly): NgtTriple => [x * 2, y * 2, z * 2]; -const cursor = new Ref(); +const cursor = new Ref(); @Component({ selector: 'sandbox-monday-morning', @@ -103,7 +103,7 @@ export class Scene {} providers: [NgtPhysicBody], }) export class Cursor { - sphereRef = this.physicBody.useSphere( + readonly sphereRef = this.physicBody.useSphere( () => ({ args: [0.5], position: [0, 0, 10000], @@ -127,7 +127,7 @@ export class Cursor { providers: [NgtPhysicConstraint], }) export class DragConstraint implements OnInit { - private constraint!: NgtPhysicConstraintReturn<'PointToPoint'>; + private constraint!: NgtPhysicConstraintReturn<'PointToPoint', THREE.Mesh>; constructor( private physicConstraint: NgtPhysicConstraint, @@ -145,11 +145,10 @@ export class DragConstraint implements OnInit { } ngOnInit() { - this.constraint = this.physicConstraint.usePointToPointConstraint( - cursor, - this.object.instance as unknown as Ref, - { pivotA: [0, 0, 0], pivotB: [0, 0, 0] } - ); + this.constraint = this.physicConstraint.usePointToPointConstraint(cursor, this.object.instance, { + pivotA: [0, 0, 0], + pivotB: [0, 0, 0], + }); this.constraint.api.disable(); } } @@ -195,7 +194,7 @@ export class Box implements OnInit { shape!: ShapeConfig; scale!: NgtTriple; - boxRef!: { ref: Ref; api: NgtPhysicsBodyPublicApi }; + boxRef!: NgtPhysicBodyReturn; constructor( @Optional() @@ -208,7 +207,7 @@ export class Box implements OnInit { ngOnInit() { this.shape = shapes[this.name]; this.scale = double(this.shape.args); - this.boxRef = this.physicBody.useBox(() => ({ + this.boxRef = this.physicBody.useBox(() => ({ args: [...this.shape.args], linearDamping: 0.99, mass: this.shape.mass, @@ -326,7 +325,7 @@ export class Ragdoll { providers: [NgtPhysicBody], }) export class Plane { - planeRef = this.physicBody.usePlane(() => ({ + readonly planeRef = this.physicBody.usePlane(() => ({ args: [1000, 1000], position: [0, -5, 0], rotation: [-Math.PI / 2, 0, 0], @@ -380,7 +379,7 @@ export class Plane { providers: [NgtPhysicBody], }) export class Chair { - chairRef = this.physicBody.useCompoundBody(() => ({ + readonly chairRef = this.physicBody.useCompoundBody(() => ({ mass: 1, position: [-6, 0, 0], shapes: [ @@ -447,7 +446,7 @@ export class Chair { providers: [NgtPhysicBody, NgtPhysicConstraint], }) export class Lamp implements OnInit { - fixtureRef = this.physicBody.useSphere( + readonly fixtureRef = this.physicBody.useSphere( () => ({ args: [1], position: [0, 16, 0], @@ -455,7 +454,7 @@ export class Lamp implements OnInit { }), false ); - lampRef = this.physicBody.useBox(() => ({ + readonly lampRef = this.physicBody.useBox(() => ({ angulardamping: 1.99, args: [1, 0, 5], linearDamping: 0.9, @@ -512,27 +511,27 @@ export class Lamp implements OnInit { providers: [NgtPhysicBody], }) export class Table { - seatRef = this.physicBody.useBox(() => ({ + readonly seatRef = this.physicBody.useBox(() => ({ args: [2.5, 0.25, 2.5], position: [9, -0.8, 0], type: 'Static', })); - leg1Ref = this.physicBody.useBox(() => ({ + readonly leg1Ref = this.physicBody.useBox(() => ({ args: [0.25, 2, 0.25], position: [7.2, -3, 1.8], type: 'Static', })); - leg2Ref = this.physicBody.useBox(() => ({ + readonly leg2Ref = this.physicBody.useBox(() => ({ args: [0.25, 2, 0.25], position: [10.8, -3, 1.8], type: 'Static', })); - leg3Ref = this.physicBody.useBox(() => ({ + readonly leg3Ref = this.physicBody.useBox(() => ({ args: [0.25, 2, 0.25], position: [7.2, -3, -1.8], type: 'Static', })); - leg4Ref = this.physicBody.useBox(() => ({ + readonly leg4Ref = this.physicBody.useBox(() => ({ args: [0.25, 2, 0.25], position: [10.8, -3, -1.8], type: 'Static', @@ -580,7 +579,7 @@ interface CupGLTF extends GLTF { export class Mug { cup$ = this.loader.use(GLTFLoader, 'assets/cup.glb') as Observable; - mugRef = this.physicBody.useCylinder(() => ({ + readonly mugRef = this.physicBody.useCylinder(() => ({ args: [0.6, 0.6, 1, 16], mass: 1, position: [9, 0, 0], diff --git a/apps/sandbox/src/app/object-clump/object-clump.component.ts b/apps/sandbox/src/app/object-clump/object-clump.component.ts index 478aa8eea..20bfcf454 100644 --- a/apps/sandbox/src/app/object-clump/object-clump.component.ts +++ b/apps/sandbox/src/app/object-clump/object-clump.component.ts @@ -120,7 +120,7 @@ export class Clump { readonly count = 40; readonly texture$ = this.textureLoader.load('assets/cross.jpg'); - readonly sphereRef = this.physicBody.useSphere(() => ({ + readonly sphereRef = this.physicBody.useSphere(() => ({ args: [1], mass: 1, angularDamping: 0.1, diff --git a/apps/sandbox/src/app/physic-cubes/physic-cubes.component.ts b/apps/sandbox/src/app/physic-cubes/physic-cubes.component.ts index e74437c92..f6adb57e8 100644 --- a/apps/sandbox/src/app/physic-cubes/physic-cubes.component.ts +++ b/apps/sandbox/src/app/physic-cubes/physic-cubes.component.ts @@ -8,6 +8,7 @@ import { NgtMeshModule } from '@angular-three/core/meshes'; import { NgtStatsModule } from '@angular-three/core/stats'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import * as THREE from 'three'; @Component({ selector: 'sandbox-physic-cubes', @@ -54,7 +55,7 @@ export class Floor { @Input() position?: NgtTriple; rotation = [-Math.PI / 2, 0, 0] as NgtTriple; - planeRef = this.physicBody.usePlane(() => ({ + readonly planeRef = this.physicBody.usePlane(() => ({ args: [1000, 1000], rotation: this.rotation, position: this.position, @@ -78,7 +79,7 @@ export class Cube { @Input() position?: NgtTriple; rotation = [0.4, 0.2, 0.5] as NgtTriple; - boxRef = this.physicBody.useBox(() => ({ + readonly boxRef = this.physicBody.useBox(() => ({ mass: 1, position: this.position, rotation: this.rotation,