Set Range ffrom camera

[Arktius]

Hey guys,

the canvas is a small part of my website.

<canvas id="canvas" style="position: absolute; width: 80%; height: 80%; touch-action:none; "></canvas>

 

How can I set the range from my joystick camera? It recognize the camera in the whole website.

[OMAR]

Hmm, perhaps if I were you I would go for setting tabindex value to an integer like 1, then basically the user has to click on the canvas element to enable pointer lock and thus make it start listening for user events.

But I'm not 100% sure about this and currently I am on my phone so no way of testing that. If someone can that would be great 

[Wingnut]

Hi Omar and Arktius.  This is an issue with the size of a virtual joystick canvas. It is likely that the cyan-colored joystick (left)... is landing on the HTML part of Ark's web page.  Our virtual joystick canvas (a special canvas added to the document.body when VRjoysticks go active)... is not designed for partial-screen scenes.

This system uses window.innerHeight/innerWidth as the size for VJcanvas.  There might be better options, not sure.    Plus, I can't seem to find a way to get a reference to the VRJoystick... FROM the VJ-cam.  VJcam seems to be a shell of its former self.  

http://www.babylonjs-playground.com/#1GEYSB#10  Lines 44-54... just a mess.  It is not easy to get a ref to the VJCanvas.  Line 48:

var vjcanvas = document.getElementsByTagName("canvas")[2];

For non-playground scenes, the '2' will likely be '1'.  Anyway, line 49, I dump the found canvas to console.

<canvas width="1920" height="673" style="width: 100%; height: 100%; position: absolute; background-color: transparent; top: 0px; left: 0px; z-index: 5;" touch-action="none">

You'll KNOW you have the "special" VJcanvas when you see THAT.  It has no class, no id, is not stored in a property on the VJcam, and so... it's a miserable hag to get a ref-to.

Note: In my PG demo, I turn ON the VJcam just for a moment, (which creates the VRjoystick's vjcanvas)... then I find the canvas, log it to console, and quickly change back to normal camera.  This is so I don't get "stuck" in VJcam/VRjoysticks mode (which makes the playground editor un-usable).

After you DO finally get a ref to it, have fun trying to change it's size to match the render canvas, and have fun trying to position it directly atop a non-full-screen render canvas.  Yikes! 

You'll need to change vjcanvas.width and vjcanvas.height (to match render canvas width and height), and also change vjcanvas.style (to adjust top and left values).  With enough screwing around, it SHOULD be do-able.  When all is right, the cyan joystick should land on the left side of the render canvas, and yellow joystick on the right side.

*sigh*  In my opinion, VRjoystick needs a re-factor/re-code... or at least some serious mods.  I'll keep working on this playground for a while longer... see if I can get the VRjoysticks to operate ONLY over the render canvas of the playground.  But it is SO easy to get stuck in virtual joystick mode... that the playground might be a poor place to work/test.

I'll be back in a few hours... if this doesn't kill me. 

[Wingnut]

Hi again.

Off-playground test:  http://urbanproductions.com/wingy/babylon/arktius_vrjoy/arktius_vrjoy02.html  (arktius_vrjoy02.zip too).  Simpler scene.

I absolutely sized and positioned renderCanvas [canvas], then I tried to make vjcanvas (in red dashed border) match it... and overlay it perfectly.  

See console.  I print both elements.  VJcanvas style.top and style.left are perfect, same as render canvas.  But... the style.width and style.height [both @ 100%] for vjcanvas, are troublesome.  I have failed to adjust those, so far.  As we can see, the dash-red vjcanvas is still too big. 

Maybe I need a vjcanvas.reflowME() function. *shrug*

hmm, back to work.    Grab a zip, go hacking with me.  See ya there.

update:  http://urbanproductions.com/wingy/babylon/arktius_vrjoy/arktius_vrjoy03.html   Working sort-of ok.  Not sure if rings are aligned with touch points. More tests ahead.

I really wanted to "derive" the size/pos of vjcanvas... by measuring current render canvas.  But that didn't work, so I forced values.    Maybe vjcanvas should be created with rendercanvas.clone().  Does that old DOM command still exist?

But anyway, we found the workaround for Arktius.  He (she?) can put his canvas anywhere on the page, and force the vjcanvas to perfectly overlay it.  He has the power!  (yay!).