Wrong constructor, container undefined

[doczoidberg]

I try to get it run within my angular application. In afterviewinit (DOM element exists):

    const viewportGizmoElement = document.getElementById('viewportGizmo') as any;
    this.viewportGizmo = new ViewportGizmo(this.renderer, this.camera, container);

but on construction i get:

Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'offsetHeight') TypeError: Cannot read properties of undefined (reading 'offsetHeight') at Et.update (three-viewport-gizmo.js:279:1)

[Fennec-hub]

There was an error on the README page; it should actually be:

this.viewportGizmo = new ViewportGizmo(this.camera, this.renderer, container);

I've updated the library but somehow forgot about the examples in the README page.

You can live test it here: https://jsfiddle.net/eovL86hy/1/

My apologies for the confusion.

[doczoidberg]

thanks for your answer, but already changed the constructor parameters. everything works but the rendering is invisible. unfortunately i can't reproduce with that fiddle

[doczoidberg]

hmm i don't use setAnimationLoop.

https://jsfiddle.net/yg78x5na/

so i need it?

[Fennec-hub]

Hi,

I've looked into it and added a new demo with a static renderer.

Demo - Source.

There was also a problem with the "change" event, which has been fixed. So, you'll need to reinstall the package with the new version "0.1.4". (You may also need to clear the npm cache.)

If you want to try with jsFiddle, you'll also need to update the importmap with the new version:

"three-viewport-gizmo": "https://unpkg.com/three-viewport-gizmo@0.1.4/dist/three-viewport-gizmo.js"

Please give it a try, and let me know your feedback.

[doczoidberg]

thanks for your help, but nothing changed with new package. my animation code is btw:

 animate(time) {
      window.requestAnimationFrame(() => {
        var delta = this.clock.getDelta();
        this.scene.traverse(function (node) {
          //if (node instanceof THREE.GLTF) {
          if (node?.userData != {})
            if (node?.userData?.mixer)
              node.userData.mixer.update(delta);
          // }
        });

    if (!this.iscreating) {

      this.controls.update(delta);
      this.viewportGizmo?.render();
      this.renderer.render(this.scene, this.camera);
      this.viewportGizmo?.update();

    }
    this.animate(time);
  }
  );

}

the strange thing is, that the scene seems to be there. i can click the objects but nothing is shown

[Fennec-hub]

I'm suspecting one last thing, updated to version "0.1.5". please reinstall and try again.

I've also put together a new jsfiddle, with the new version and a static renderer. here is the live demo . Use it with your code, I'll look into it.

[doczoidberg]

thanks, but also didn't helped. I try to make a minimal example with angular.

[Fennec-hub]

I'll close this at the moment. Feel free to reopen and share the example.

[doczoidberg]

thanks. i use a weird splitter container and hacked your sources to fit your great gizmo component into my app