rina

How to change camera position on button click

Recommended Posts

Thank you for your reply

I have html button when i click on button i want to chanage position of camera with rotation effect.

Like Microsoft xbox example in 3D view.See below video link for what i want

https://xboxdesignlab.xbox.com/en-us/customize

https://www.screencast.com/t/LbWGVijQA7

And also i have created playground http://www.babylonjs-playground.com/#38KBQB 

I want to do same xbox effect in my design.but it not working properly,see below video link.Rotate Sphere multiple time and after that click on Sphere.

https://www.screencast.com/t/w4vsIPGNgaJl

Share this post


Link to post
Share on other sites

hi,

     i think this is okay for you 

 scene.registerBeforeRender(function (){
         var view = window.localStorage.getItem("view");        
        if(scene.isReady()){
                  if(view == "left"){

                           you will set camera position and rotation 

                  }else if(view == "right"){

                            you will set camera position and rotation

                  }else if(view == "top"){

                             you will set camera position and rotation

                   }else if(view == "bottom"){

                                you will set camera position and rotation

                   }else if(view == "front"){

                             you will fix camera position and rotation

                   }else if(view == "back"){

                                you will fix camera position and rotation

                   }

        }

});

Share this post


Link to post
Share on other sites

Hi Wingnut
I have viewed your demo and it not helpful for me.because i want to change camera position with rotation effect.

 I can explain you in detail with your example,When you rotate your box and after that click on "setDefault"  button it jump on default position without any effect,see below video link.

https://www.screencast.com/t/isH74uUiu1f

I want to use same rotation effect like in Microsoft Xbox.When you rotate Xbox remote multiple times and after that click on back button then it change camera position with proper rotation.

See below video link

https://www.screencast.com/t/sHJ0BgqYN23

Share this post


Link to post
Share on other sites

Hi Rina.  I'm working on animation.

https://www.babylonjs-playground.com/#3U658N#4

ONLY working-on setLateralLeft button, so far.

Animation working ok... done in lines 195-203.  But see lines 192 and 193?  I want to use THOSE instead, and disable 195-203.

The two important functions are in lines 164-180.  But I have problems:

https://www.babylonjs-playground.com/#3U658N#5

Line 193... the camera mover (not the camera target mover)... is failing.

Something is wrong with the actual animator line... line 178.

I cannot yet find my mistake.  I will keep trying, and maybe others will help me find the problem.

After we get animateCameraTargetToPosition() and animateCameraToPosition() working properly, then I will change the other 6 camera-mover functions... to use those new functions... for animating the camera position and orientation.  Stay tuned.  Help me see my mistake, if you can.  Line 202 works... so why not line 178?  hmm.  *scratch scratch*.

Share this post


Link to post
Share on other sites

Whelp... https://www.babylonjs-playground.com/#3U658N#6

I couldn't get my two cool functions to work... so I did it the long way.

Line 282 is failing.  'setDefault' button is failing (until some other button is pressed first)

The other 6 camera position funcs are working ok.  Animations seem to work.

Something to play-with and do experiments-on, anyway.  Sorry for the messy PG code. 

I hope I've been helpful. 

update:  PG #7, slightly slimmer.  Same issues.  Swap lines 270/271, symptoms change.  setCamLateralLeft() WILL run at sceneReady.  setCamDefault() won't.  Weird.  SetDefault button works... sometimes:D

Share this post


Link to post
Share on other sites

https://www.babylonjs-playground.com/#3U658N#7

I wish I could determine WHY line 270 is failing (and why setDefault button doesn't work, initially).

The view that you see at PG run-up... is NOT "default view".  It is simply some initial camera settings.  setCamDefault() at line 205... is failing to animate.

NOP 270, OP 271, and we see setCamLateralLeft() func works perfectly, at run-time.

After it finishes, setDefault button works fine, again.  Go fig.  *scratch scratch*

I think... after I figure out WHY this is happening, then I can also re-activate animateCameraTargetToPosition() and animateCameraToPosition() again... some streamlining tools.

Share this post


Link to post
Share on other sites

Hiya Arte!  Nice find!  It works... almost.

https://www.babylonjs-playground.com/#3U658N#9

Good setDefault run at 273.  But, click setSuperior/setInferior buttons for awhile, and suddenly we get a canvas blue-screen-of-death.  :)  (I do, anyway).

Your cool fix has some side effects, it seems.

I think I know why.  I think it is the "Polar Epsilon"... messing with rebuildAnglesAndRadius().  When cam beta values get near polar... rebuildAnglesAndRadius() does a divide by zero instead of a divide by epsilon (epsilon - a micro value used to avoid divide-by-zero errors, I think).

Share this post


Link to post
Share on other sites

https://www.babylonjs-playground.com/#3U658N#10

Yep, I was right, or sort-of.

Lines 256 and 263.  Instead of using 0 in the X and Z params, I changed to .001.  Get those darned zeroes out of our way.

Hey, thx for the fix, Arte!

https://www.babylonjs-playground.com/#3U658N#13

(uses the animateCameraTargetToPosition() and animateCameraToPosition() funcs... so... tighter and cleaner.  alright!)

Share this post


Link to post
Share on other sites
On 3/23/2018 at 4:29 PM, Wingnut said:

Whelp... https://www.babylonjs-playground.com/#3U658N#6

I couldn't get my two cool functions to work... so I did it the long way.

Line 282 is failing.  'setDefault' button is failing (until some other button is pressed first)

The other 6 camera position funcs are working ok.  Animations seem to work.

Something to play-with and do experiments-on, anyway.  Sorry for the messy PG code. 

I hope I've been helpful. 

update:  PG #7, slightly slimmer.  Same issues.  Swap lines 270/271, symptoms change.  setCamLateralLeft() WILL run at sceneReady.  setCamDefault() won't.  Weird.  SetDefault button works... sometimes:D

its sounds cool but if you have a webverfrecamera ? how can you change the position of camera 

Share this post


Link to post
Share on other sites

Hi @razieh, welcome to the forum.

Likely, you will need to convert the HTML menu panel... into Babylon GUI stack panel.

Camera-moving funcs won't need to change.  Just change the type of buttons... from HTML... into Babylon GUI.

10 minute job.  :)    Ok, maybe 30 minutes. 

http://doc.babylonjs.com/search/?bjsq=gui

StackPanel's aren't the only way to arrange buttons/controls in Babylon GUI 2D.  There is also "grid".  Here is a SWEET grid example:

https://www.babylonjs-playground.com/#WZZDNR#7

Good luck.  Keep us posted.

Share this post


Link to post
Share on other sites

now im working with unity and babylonjs .... but there isnt a good tutorial to get into it ...

with unity i can design .... but now i dont know how can write my script ...

i found just two video

https://www.youtube.com/watch?v=Hq-p9EqhaWE

https://www.babylontoolkit.com/videos/GettingStarted.mp4

it was helpfull but i want more event like clicking gazing teleport to some where

im writing script for gear vive ...

i saw some option to check it and use the webvr but the event i dont know about it :(((((

 

 

room.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.