Basic Scene : Cannot read property 'change$' of null

[plvbroker]

Hi!

Thanks a lot for this library 👍

I have an error while compiling a very basic scene

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'change$' of null
TypeError: Cannot read property 'change$' of null

<ngt-canvas>
    <ngt-mesh>
        <ngt-box-geometry></ngt-box-geometry>
        <ngt-mesh-basic-material></ngt-mesh-basic-material>
    </ngt-mesh>
  </ngt-canvas>

Does anyone have an idea?

Here's my package.json

  "dependencies": {
    "@angular-three/core": "^1.0.0-beta.32",
    "@angular/animations": "~12.0.0",
    "@angular/cdk": "^12.0.2",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/material": "^12.0.2",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@ngrx/component-store": "^12.1.0",
    "gsap": "file:gsap-bonus.tgz",
    "lottie-web": "^5.7.11",
    "ngx-lottie": "^7.0.1",
    "rxjs": "~6.6.0",
    "three": "^0.129.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "~12.0.0",
    "@angular/compiler-cli": "~12.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@types/three": "0.129.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }

[nartc]

Hi, thanks for the kind words. Check out this breaking change: https://github.com/nartc/angular-three/blob/main/CHANGELOG.md#100-beta30-2021-05-31

[plvbroker]

Thank you. My bad 🤗

[plvbroker]

Sorry for being a noob, but is there a place to find different examples of using packages like OrbitControls or PostProcessing ?

[nartc]

I'm planning to complete the docs site with more examples but time has been a luxury. As of this moment, not really. I've been converting ThreeJs examples from their site and you can find them in projects/demo. Other than that, if you have a demo in ThreeJs you want to see code example in Angular Three, leave the link here, I might concert it or I might make record a speed code video for it like this one: https://youtu.be/h93jxwlBmfQ

[plvbroker]

Thanks again for replying so quickly and your amazing work

And wait:, you have a fantastic demo app in your project folder which is exactly what I was searching for. 👍
Let me check it

[nartc]

Thanks again for your kind words. I could have done a better job with the demo project but right now, you’d have to like comment/uncomment the code to see each example 🤦‍♂️

[plvbroker]

Would it be possible to show me a simple gltf loader implementation?

I've tried analyzing your Bird and BirdsComponent but when I load one of my GLTF instead (exported from Blender), it doesn't work.

With a HDRI environment maybe?!

This example would be great :
https://threejs.org/examples/?q=gltf#webgl_loader_gltf