Enabling VR mode

[Gregory-Bach]

First: Amazing work! Thanks.

I'm discovering NGT and I'm trying to enabled the vr mode in the purpose of using NGT in the Quest Browser.

I did set ngt canvas [vr]=true but nothing appened.
I looked in react fiber docs to find a way and nothing helped me.
I looked in ThreeJS doc and tried to instanciate a renderer from ngt canvas with this:

    import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
    ...
    this.renderer = this.canvas.rendererCanvas;
    document.body.appendChild(VRButton.createButton(this.renderer));

and it failed (of course...).
My renderer is empty (NgtCanvas.rendererCanvas: ElementRef)

HELP!

[nartc]

@Gregory-Bach Thank you. I know nothing about VR unfortunately. Is there a way for me to get started on even with vanilla THREE.js example?

[nartc]

I tried the following:

<ngt-canvas
  vr
  [shadows]="true"
  [camera]="{ position: [-5, 5, 5], fov: 75 }"
  [scene]="{ background: 'black' | color }"
  (created)="onCreated($event)"
>
  <ngt-ambient-light [intensity]="0.8"></ngt-ambient-light>
  <ngt-point-light [intensity]="1" [position]="[0, 6, 0]"></ngt-point-light>

  <ngt-soba-box>
    <ngt-mesh-basic-material
      [parameters]="{ wireframe: true }"
    ></ngt-mesh-basic-material>
  </ngt-soba-box>

  <ngt-soba-orbit-controls></ngt-soba-orbit-controls>

  <ngt-stats></ngt-stats>
</ngt-canvas>

onCreated($event: NgtCreatedState) {
  document.body.appendChild(VRButton.createButton($event.renderer));
}

This is the result. Give that a try?

[Gregory-Bach]

It works!
You are a genius!
I built the app and opened it in the Quest browser and magic happened!
The event is the good way to get the the renderer.
Thank you!
And again, it's a great job you are doing.
Let's go for a coffee.

[nartc]

Haha thanks! I'd love to :D