nartc / angular-three Goto Github PK

I noticed where wasn't an easy way to move and look around a scene using mouse and keyboard. Code below might be a good candidate for an easy drop-in SOBA component.

import { Component, Input } from '@angular/core';
import { Camera, Vector3 } from 'three';
import { NgtCanvasStore, NgtRender } from '@angular-three/core';

//
// adapted from three.js games fps example https://github.com/mrdoob/three.js/blob/master/examples/games_fps.html
//
@Component({
  selector: 'pointer-lock-controls',
  template: '<ngt-group (ready)="ready()" (animateReady)="animate($event.state)"></ngt-group>'
})
export class PointerLockControlsComponent {
  @Input() container?: HTMLElement;
  @Input() viewerheight = 1.5;
  @Input() movespeed = 1;
  @Input() rotatefactor = 2000;

  private keyStates = new Map<string, boolean>([]);
  private camera!: Camera;

  constructor(private canvasStore: NgtCanvasStore) { }

  ready() {
    const camera = this.canvasStore.get((s) => s.camera);
    camera.rotation.order = 'YXZ';
    this.camera = camera;

    // movement
    document.addEventListener('keydown', (event) => {
      this.keyStates.set(event.code, true);
    });
    document.addEventListener('keyup', (event) => {
      this.keyStates.set(event.code, false);
    });

    if (!this.container) {
      this.container = document.body;
    }

    this.container.addEventListener('mousedown', () => {
      document.body.requestPointerLock();
    });

    // rotation
    document.body.addEventListener('mousemove', (event) => {
      if (document.pointerLockElement === document.body) {
        camera.rotation.y -= event.movementX / this.rotatefactor;
        camera.rotation.x -= event.movementY / this.rotatefactor;
      }
    });
  }

  private getForwardVector(): Vector3 {
    const playerDirection = new Vector3()

    this.camera.getWorldDirection(playerDirection);
    playerDirection.y = 0;
    playerDirection.normalize();

    return playerDirection;
  }

  private getSideVector(): Vector3 {
    const playerDirection = new Vector3()

    this.camera.getWorldDirection(playerDirection);
    playerDirection.y = 0;
    playerDirection.normalize();
    playerDirection.cross(this.camera.up);

    return playerDirection;
  }

  private playerVelocity = new Vector3();

  private updateVelocity(deltaTime: number) {
    const speedDelta = deltaTime * 8;

    if (this.keyStates.get('KeyW')) {
      this.playerVelocity.add(this.getForwardVector().multiplyScalar(speedDelta));
    }

    if (this.keyStates.get('KeyS')) {
      this.playerVelocity.add(this.getForwardVector().multiplyScalar(-speedDelta));
    }

    if (this.keyStates.get('KeyA')) {
      this.playerVelocity.add(this.getSideVector().multiplyScalar(-speedDelta));
    }

    if (this.keyStates.get('KeyD')) {
      this.playerVelocity.add(this.getSideVector().multiplyScalar(speedDelta));
    }
  }

  private moveCamera(deltaTime: number) {
    // slow after mouse up
    let damping = Math.exp(-3 * deltaTime) - 1;

    this.playerVelocity.addScaledVector(this.playerVelocity, damping);

    const deltaPosition = this.playerVelocity.clone().multiplyScalar(deltaTime);
    if (this.camera) {
      this.camera.position.add(deltaPosition);
      this.camera.position.y = this.viewerheight;
    }
  }

  animate({ delta }: NgtRender) {
    this.updateVelocity(delta*this.movespeed);  // check for input
    this.moveCamera(delta); // move player
  }
}

https://github.com/pmndrs/drei#staging

• Center
• Bounds
• CameraShake
• Float
• Stage
• Backdrop
• Environment
• SpotLight
• Shadow
• ContactShadows
• Reflector
• Sky
• Stars
• Cloud
• useMatcapTexture
• useNormalTexture

Using sleepTimeLimit is helpful to limit the number of collision events after an object has stopped moving.

cannon.js sleep example

If the object is hit again, the wakeup event is fired.

Please add the wakeup event to physics props

        // The body wakes up when it gets a new contact
        sphereBody.addEventListener('wakeup', (event) => {
          console.log('The sphere woke up!')
        })

I'm using the following to declare fog settings

  <ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
              [scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">

However, I'm getting the following build error

Argument of type 
'{ color: Color; near: number; far: number; }' is not assignable to parameter of type 
'[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.

Object literal may only specify known properties, and '"color"' does not exist in type '[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.

3               [scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">
                                                                      ~~~~~~~~~~~~~~

For now, I can work-around by declaring a Fog() variable

  <ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
              [scene]="{ background: 'black' | color, fog: fogsettings }">

  fogsettings = new Fog(new Color(), 250, 1400);

I have a simple @angular-three project with VR enabled. I've imported @angular-three/cannon.

As soon as I add element into main component, I start to get these WEBGL warnings in the browser console window

WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback.

WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: Cannot render to a XRWebGLLayer framebuffer outside of an XRSession animation frame callback.

WebGL: too many errors, no more errors will be reported to the console for this context.

Unfortunately, unless you have a VR headset, you won't be able to see these warning.

Example project can be found here with instruction in README on how to enable VR.

Add enable Input to ngt-cannon-debug so that when false, its easy to disable without having to remove from markup. Default is true.

<ngt-cannon-debug [enable]="false" [scale]="1.1" color="black">
...

Using latest 4.0.2 version of @angular/three.
Added cannon as follows
npm i @angular-three/cannon cannon-es
ng serve working fine.

Wrapped ngt-group with ngt-physics as follows

<ngt-group #group="ngtGroup" [name]="'room'">
<ngt-mesh *ngFor="let item of shapes"
[position]="item.position" [rotation]="item.rotation" [scale]="item.scale" [castShadow]="true" [receiveShadow]="true"
#mesh="ngtMesh">
<ngt-mesh-standard-material [parameters]="{ color: item.color, roughness: 0.7, metalness:0.0 }">
<ngt-box-geometry *ngIf="item.shapename=='box'" [args]="[0.2, 0.2, 0.2]">
<ngt-cone-geometry *ngIf="item.shapename=='cone'" [args]="[0.2, 0.2, 64]">
<ngt-cylinder-geometry *ngIf="item.shapename=='cylinder'" [args]="[ 0.2, 0.2, 0.2, 64]">
<ngt-icosahedron-geometry *ngIf="item.shapename=='icosahedron'" [args]="[ 0.2, 8]">
<ngt-torus-geometry *ngIf="item.shapename=='torus'" [args]="[ 0.2, 0.04, 64, 32]">

Browser console shows this error.

ERROR DOMException: Failed to construct 'Worker': Script at 'file:///C:/Users/adria/source/repos/angular-vr/node_modules/@angular-three/cannon/fesm2015/utils/worker.js' cannot be accessed from origin 'http://localhost:4200'.
at new NgtPhysicsStore (http://localhost:4200/vendor.js:20051:15)
at NodeInjectorFactory.NgtPhysicsStore_Factory [as factory] (http://localhost:4200/vendor.js:20280:10)
at getNodeInjectable (http://localhost:4200/vendor.js:42415:44)
at searchTokensOnInjector (http://localhost:4200/vendor.js:42352:16)
at getOrCreateInjectable (http://localhost:4200/vendor.js:42296:38)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:53256:12)
at NodeInjectorFactory.NgtPhysics_Factory [as factory] (http://localhost:4200/vendor.js:20409:95)
at getNodeInjectable (http://localhost:4200/vendor.js:42415:44)
at instantiateAllDirectives (http://localhost:4200/vendor.js:49148:27)
at createDirectivesInstances (http://localhost:4200/vendor.js:48497:5)

Is there something I should be adding to angular.json or tsconfig.json?

Scope

• [ x] core
• cannon
• postprocessing
• soba

Describe the bug
./node_modules/@angular-three/core/fesm2015/angular-three-core.mjs:6:0-92 - Error: Module not found: Error: Package path ./zone-less is not exported from package ./node_modules/@angular-three/core/node_modules/@rx-angular/cdk (see exports field in ./node_modules/@angular-three/core/node_modules/@rx-angular/cdk/package.json)

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Hi Chau !
Is your feature request related to a problem? Please describe.
I don't know if it's a problem or if I'm missing something... When I want to create a component, with its own Module with imports, my object is not displayed on the ThreeJS Scene, with no errors. If I declare this component in the main Module, with its imports then it works.

In order to get more isolated components, I would like to create a Module for each Component for them to be independent and easier usable/reusable, and also lazy loadable.
I plan also to be able to route some angular-three components, the way I dit it in a demo few months ago.

Thank you !

So I created a cube and texture with Blender and used ngt-primitive to render it.

portalModel$ = this._textureLoader.load('assets/baked-cube.jpg').pipe(
        switchMap((texture) => {
            const bakedTexture = texture;
            bakedTexture.flipY = false; // --> not working
            return this._gltfLoader.load('assets/cube.glb').pipe(
                map((gltf) => {
                    const bakedMesh = gltf.scene.children[0];
                    if (bakedMesh) {
                        (bakedMesh as any).material =
                            new THREE.MeshBasicMaterial({
                                map: bakedTexture,
                            });
                    }
                    return gltf;
                })
            );
        })
    );

After reading the code, I think we have to update flipY = false before call the initTexture function.

// texture-loader.ts
tap((textures: THREE.Texture | THREE.Texture[]) => {
                const renderer = this.canvasStore.get((s) => s.renderer);
                if (renderer) {
                    (Array.isArray(textures) ? textures : [textures])
                        .map((texture) => {
                            texture.flipY = false; // update flipY = false here
                            return texture;
                        })
                        .forEach(renderer.initTexture.bind(renderer));
                }
            }),

Do we have any solutions for this issue?

Hi Team,

So we are trying to use angular-three to make some 3D visualization and we are trying to build a simple Skybox. For this purpose we are trying to import ngt-sphere-geometry and for that we are importing the ThreeSphereBufferGeometryModule and we are getting this error:

Code structure as follows:

app.module.ts
import {ThreeSphereBufferGeometryModule} from "@angular-three/core/geometries";

@NgModule({
  declarations: [
    AppComponent,
    ModelViewComponent
  ],
    imports: [
        ...
        ThreeSphereBufferGeometryModule,
    ],
  providers: [],
  bootstrap: [AppComponent]
})

model-view-component.html

<ngt-canvas
  [camera]='{position: [1, 1, 3], fov: 90, near: 0.1, far: 1000}'
  [scene]="{ fog: ['000000', 1, 15000] | fog }"
  (created)='$event.gl.setClearColor("gray")'
  [shadows]="true"
>
  <ngt-mesh>
    <ngt-sphere-geometry [args]="[500, 60,40]" #skybox> </ngt-sphere-geometry>
  </ngt-mesh>
  <ngt-grid-helper o3d></ngt-grid-helper>
</ngt-canvas>

We only get this error when trying to import any buffer geometry into the scene. Thanks for the help in advance!

Scope

• [ x] core
• cannon
• postprocessing
• soba

Describe the bug
ERROR TypeError: THREE.BufferAttribute: array should be a Typed Array.
at new BufferAttribute (three.module.js:8981:10)
at NgtBufferAttribute.init (angular-three-core.mjs:3230:67)
at angular-three-core.mjs:3211:18
at ZoneDelegate.invoke (zone.js:372:1)
at Zone.run (zone.js:134:1)
at NgZone.runOutsideAngular (core.mjs:25371:1)
at NgtBufferAttribute.set attributeArgs [as attributeArgs] (angular-three-core.mjs:3210:21)
at NgtBufferAttribute.set args [as args] (angular-three-core-attributes.mjs:13:9)
at Object.ngOnChangesSetInput [as setInput] (core.mjs:1502:1)
at setInputsForProperty (core.mjs:10959:1)
To Reproduce
Template contains the following
<ngt-line #line="ngtLine" >
<ngt-buffer-geometry>
<ngt-buffer-attribute attach="position" [args]="[[0, 0, 0, 0, 0, - 1], 3]"></ngt-buffer-attribute>
</ngt-buffer-geometry>
<ngt-line-basic-material [parameters]="{ vertexColors: true, blending: blending }"></ngt-line-basic-material>
</ngt-line>
Get above in browser console for ngt-buffer-attribute attach="position"

Expected behavior
Should work without error. Replacing with a variable doesn't work either.

Additional context
Converting https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_cubes.html to @angular/three.
I have the whole example converted to @angular/three, but trying to replace

const geometry = new BufferGeometry();
geometry.setAttribute('position', new Float32BufferAttribute([0, 0, 0, 0, 0, - 1], 3));
geometry.setAttribute('color', new Float32BufferAttribute([0.5, 0.5, 0.5, 0, 0, 0], 3));
const material = new LineBasicMaterial({ vertexColors: true, blending: AdditiveBlending });
return new Line(geometry, material);

Want to make the track-pointer line attached to XR controller be something that can be declared, instead of hard-coded.

Is your feature request related to a problem? Please describe.
I would like to move the camera. I tried several approaches but I didn't find the right way to do it.

Describe the solution you'd like
I tried to update the position value in the [camera] @input of the ngt-canvas without success.
I tried to create a like that :
<ngt-perspective-camera #camera='ngtPerspectiveCamera' [args]='[40]'>

and attach it to ngt-canvas like that :
[camera]='camera.camera'

And trying in my component to translateX(myValue) the camera thanks to @ViewChild reference, but it doesn't work neither.

I tried also to create a 'CameraControllerDirective' to get the camera thanks to NgtCanvasInputsStore. I can retrieve the camera, but the translateX(myValue) doesn't work too.

I'm trying to migrate Cannon Callbacks example using @angular-three/cannon.

I don't see these callbacks on the NgtPhysicsXXX object api method or the NgtPhysics object.

I don't see a way to get at the physics store or state to access the world state.

Any help or guidance is appreciated.

Added cannon to project called ng3-cannon-template

npm i @angular-three/cannon@latest
npm i cannon-es
npm i -DE npx
npm i -DE @angular-three/schematics
npx ng generate @angular-three/schematics:cannon ng3-cannon-template

ng build results in the following error

Error: node_modules/cannon-es/dist/cannon-es.d.ts:359:36 - error TS2304: Cannot find name 'HTMLImageElement'.

359 setHeightsFromImage(image: HTMLImageElement, scale: Vec3): void;

Original project create using these commands
ng new ng3-cannon-template
cd ng3-cannon-template
npm i @angular-three/core@latest
npm install -E [email protected]
npm install -DE @types/three

resulting package.json
{
"name": "ng3-cannon-template",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-three/cannon": "^4.3.0",
"@angular-three/core": "^4.3.0",
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"cannon-es": "^0.19.0",
"rxjs": "~7.5.0",
"three": "0.137.5",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.4",
"@angular-three/schematics": "4.3.0",
"@angular/cli": "~13.2.4",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"@types/three": "0.137.0",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"npx": "10.2.2",
"typescript": "~4.5.2"
}
}

Scope

• core
• cannon
• postprocessing
• [ x] soba

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Import NgtSobaOrbitControlsModule
2. See error Cannot find name 'OffscreenCanvas' ............

Screenshots

Code below might be a good candidate for an easy drop-in SOBA 3D Text component.

    <ngt-mesh-standard-material #mat1="ngtMeshStandardMaterial" 
        [parameters]="{ color:'#b00000' | color }">
    </ngt-mesh-standard-material>
    <ngt-mesh-standard-material #mat2="ngtMeshStandardMaterial" 
        [parameters]="{ color:'#ff8000' | color }">
     </ngt-mesh-standard-material>

    <text3d [text]="'@angular-three'" [size]="10" [height]="5"
            [fonturl]="fonturl"
            [material]="[mat2.material, mat1.material]"></text3d>

import { Component, Input } from '@angular/core';

import { Box3, Euler, Group, Material, Mesh, MeshBasicMaterial } from 'three';

import { NgtTriplet } from '@angular-three/core';

import { Font, FontLoader, TextGeometry } from 'three-stdlib';

//
// adapted from three.js example https://threejs.org/examples/?q=text#webgl_geometry_text
//
@Component({
  selector: 'text3d',
  template: '<ngt-group #text="ngtGroup" (ready)="ready(text.group)" [position]="position" [scale]="scale" [rotation]="rotation"></ngt-group>'
})
export class Text3DComponent {
  private _text = '';
  @Input()
  get text(): string {
    return this._text;
  }
  set text(newvalue: string) {
    this._text = newvalue;
    if (newvalue && this.font) {
      this.refreshtext()
    }
  }

  //
  // see https://threejs.org/docs/index.html?q=mesh#examples/en/loaders/FontLoader for more details
  //
  private _fonturl = '';
  @Input()
  get fonturl(): string {
    return this._fonturl;
  }
  set fonturl(newvalue: string) {
    if (newvalue && newvalue != this._fonturl) {
      this._fonturl = newvalue;
      const loader = new FontLoader();
      loader.load(newvalue,
        (font) => {
          this.font = font;
          this.refreshtext();
        },
        _ => { }, // progress
        (err) => {
          console.error(err);
        });
    }
  }

  @Input() size = 100;
  @Input() height = 50;
  @Input() curveSegments = 12;
  @Input() bevelEnabled = false;
  @Input() bevelThickness = 10;
  @Input() bevelSize = 8;
  @Input() bevelOffset = 0;

  @Input() position = [0, 0, 0] as NgtTriplet;
  @Input() rotation = new Euler();
  @Input() scale = [1, 1, 1] as NgtTriplet;
  @Input() material: Material | Material[] = new MeshBasicMaterial();

  @Input() center = true;

  private font!: Font;
  private group!: Group;
  private lastmesh!: Mesh;

  ready(group: Group) {
    this.group = group;
  }

  private refreshtext() {
    if (this.lastmesh) {
      this.group.remove(this.lastmesh);
    }
    const textGeo = new TextGeometry(this.text, {
      font: this.font,
      size: this.size,
      height: this.height,
      curveSegments: this.curveSegments,
      bevelEnabled: this.bevelEnabled,
      bevelThickness: this.bevelThickness,
      bevelSize: this.bevelSize,
      bevelOffset: this.bevelOffset,
    });

    let centerOffset = 0;
    if (this.center) {
      textGeo.computeBoundingBox();
      const boundingBox = textGeo.boundingBox ?? new Box3();
      centerOffset = - 0.5 * (boundingBox.max.x - boundingBox.min.x);
    }
    const mesh = new Mesh(textGeo, this.material);
    mesh.position.set(this.position[0] + centerOffset, this.position[1], this.position[2]);
    mesh.rotation.copy(this.rotation);
    mesh.scale.set(this.scale[0], this.scale[1], this.scale[2]);

    this.group.add(mesh);
    this.lastmesh = mesh;
  }
}

Is your feature request related to a problem? Please describe.
The consumers of the library probably need some type of Testing harness to test the objects in the 3D scene

Describe the solution you'd like
Provide a module/small testing framework for the consumers to use

Describe alternatives you've considered
Look for a 3rd party one and use as recommendation

Additional context
Testing is important

Application builds and runs without error. However, animateReady event not firing on ngt-group.

Scope

• soba

Describe the bug
The angular-three-soba-abstractions gizmo implementation is currently throwing an exception because it doesn't find the 'scene' store. Instead, consider renaming or using the 'sceneOptions' store because that does appear to exist. Was the sceneOptions renamed recently and this part of the code wasn't updated?

To Reproduce
Steps to reproduce the behavior:

1. Follow the dual-cubes starting guide.
2. Add the code shown below to the ngt-canvas.
3. An exception is thrown in the console.

   <ngt-soba-gizmo-helper [margin]="[80,80]" [alignment]="'top-left'">
      <ngt-soba-gizmo-viewport
        
      ></ngt-soba-gizmo-viewport>
    </ngt-soba-gizmo-helper>

Expected behavior
We expect the viewport gizmo to show up like it does in the story demo on the website. It doesn't.

Screenshots
Below we can see the state of the store and it has a store called 'sceneOptions' but not 'scene' as the code requests.

https://github.com/pmndrs/drei#abstractions

• Image
• Text
• Line
• QuadraticBezierLine
• CubicBezierLine
• PositionalAudio
• Billboard
• GizmoHelper
• Effects
• GradientTexture
• useAnimations

As title said, would be nice to have an ng add schematic to handle initialize an Angular Three project.

After adding cannon physics around an object, the following appears in the browser console.

ERROR Error: NGT_CANNON_BODY_TYPE is required
at new NgtCannonBodyController (angular-three-cannon-bodies.mjs:136:19)
at NodeInjectorFactory.NgtCannonBodyController_Factory [as factory] (angular-three-cannon-bodies.mjs:342:1)
at getNodeInjectable (core.mjs:3565:1)
at instantiateAllDirectives (core.mjs:10298:1)
at createDirectivesInstances (core.mjs:9647:1)
at Module.ɵɵelementStart (core.mjs:14541:1)
at PlaneComponent_Template (storybook-plane.component.ts:7:9)
at executeTemplate (core.mjs:9618:1)
at renderView (core.mjs:9421:1)
at renderComponent$1 (core.mjs:10702:1)

Hi!

When trying to import any module from '@angular-three/soba/controls' I get following compiler errors coming from threejs:

My package.json looks like this:

Any ideas on how I could solve this? Thank you very much in advance!

• Instances
• Merged
• Points
• Segments
• Detailed
• Preload
• BakeShadows
• meshBounds
• AdaptiveDpr
• AdaptiveEvents
• useBVH

Is your feature request related to a problem? Please describe.
It is verbose for the consumers to keep doing this

<ngt-mesh #mesh="ngtMesh"></ngt-mesh>
<ngt-mesh-basic-material #material="ngtMeshBasicMaterial"></ngt-mesh-basic-material>

Describe the solution you'd like
Angular, by default, already exposes the instance of the directives via the implicit template variables

<!-- mesh is the reference to NgtMesh instance -->
<ngt-mesh #mesh></ngt-mesh>
<!-- material is the reference to NgtMeshBasicMaterial instance -->
<ngt-mesh-basic-material #material></ngt-mesh-basic-material>

Describe alternatives you've considered
Keep things as is

https://stackblitz.com/edit/angular-playground-v13-2-k8ksjt?file=src/app/app.module.ts

I have tested the basic soba controls -

from https://angular-three.netlify.app/?path=/docs/introduction-first-scene--page.
Error: Can't find package:worker_threads

Please give me angular starter stackblitz link for soba.. You are doing great work for Angular Developers.. Thanks a lot for your valuable time. Thanks..

This repo does not have any testing yet. At least unit testings would be nice.

Clone https://github.com/IRobot1/ng3-cannon-template

ng build to see the problem

Error: src/app/app.component.html:8:17 - error NG8002: Can't bind to 'getPhysicProps' since it isn't a known property of 'ngt-mesh'.

1. If 'ngt-mesh' is an Angular component and it has 'getPhysicProps' input, then verify that it is part of this module.
2. If 'ngt-mesh' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8 [getPhysicProps]="getCubeProps"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:9:16
9 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Discussed in #58

This isn't supported at the moment.

Is your feature request related to a problem? Please describe.
Too many ngZone.runOutsideAngular as well as redundant ComponentStore code

Describe the solution you'd like
We would like to switch to RxAngular for state management solution instead of ngrx/component-store. ComponentStore, while really nice, is meant to be used within Angular applications where template gets updated states. RxAngular provides the same functionality as well as MORE focused on the performance side of things with Zoneless-first approach.

Describe alternatives you've considered
Stay with ComponentStore

Additional context
Add any other context or screenshots about the feature request here.

Trying to use code from kinetic-cube to understand how to enable physics.
I've re-created the components, but getting the following error

Error: src/app/components/kinetic-box/spheres/app-spheres.component.html:4:21 - error NG8002: Can't bind to 'getPhysicProps' since it isn't a known property of 'ngt-instanced-mesh'.

<ngt-instanced-mesh ngtPhysicSphere
                    [castShadow]="true"
                    [receiveShadow]="true"
                    [getPhysicProps]="getInstancedProps"
                    [args]="[number]">
...
</ngt-instanced-mesh>

What am I missing?

I'm going to try a much simpler example.

Any chance you could document some basic guidance on using @angular-three cannon? It would go a long way to standing up a basic working example.

Scope

• core
• cannon
• postprocessing
• soba

Describe the bug
I have this file need showing in my website:
https://drive.google.com/file/d/1Sqtx97m7hLXjdBndYzR28EO0xbqK0DJn/view?fbclid=IwAR0ZYoeYFxGtiuxoD_MgzMWe_o1kjkOmiTuZW3_iV6O9xhOZ82vSO8klp0I](url)
It's oke when using https://gltf-viewer.donmccurdy.com/ for loading
But I can not showing this file in my website when using NgtGLTFLoaderService
You can see error in file attach

Scope

• core
• cannon
• postprocessing
• soba

Describe the bug
Using an ngt-group throws an exception when trying to add to a parent object.

To Reproduce
Steps to reproduce the behavior:

1. In an ngt-canvas, create any ngt-mesh. Notice that it works as expected.
2. Wrap the mesh in an ngt-group and you get the following exception:

Uncaught TypeError: Cannot read properties of null (reading 'add') at NgtObject3dController._NgtObject3dController_addToParent (:4200/vendor.js:71004) at :4200/vendor.js:70993

It seems like the add method might have been renamed to something else.

Expected behavior
We expect to be able to create a group for a collection of objects, as seen in the youtube video here:
https://youtu.be/RCgdXY9-Ir8?t=2587

The three.js documentation for the group is here:
https://threejs.org/docs/#api/en/objects/Group