Jump to content

Noob inquiry about alternate camera controls


freighthopper
 Share

Recommended Posts

Hello!

 I'm trying to re-create a flying camera movement system that I once used in DarkBasic.  Basically, the mouse pointer is visible and the user looks around by just moving the mouse (cam rotation about x and y axes).  The user does not drag the scene with the mouse.  He just moves the mouse.  Forward movement is by pressing and holding the left mouse button, reverse with the right mouse button. Very natural. Very intuitive.

I have looked for days at Babylon examples and documentation but cannot cobble together a solution.  I see keyboard control options but none for mouse (pointer).  If the action manager could register a "leftPointerDown" maybe I could get there.  Any and all suggestions would be appreciated. Simple is good.

I have copied a vaguely relevant playground to http://www.babylonjs-playground.com/#QWGWQK if it helps.  Thanks for reading! 

Link to comment
Share on other sites

Hiya FH, welcome to the forum.  I like your idea.  I started goofing around with a scene.actionManager with an onEveryFrame trigger...

http://playground.babylonjs.com/#1X4ODI#6

I put a little dead zone in the middle of the screen.  This seems to work pretty well.

http://doc.babylonjs.com/how_to/how_to_use_actions

After reading the tiny little section on scene.actionManagers (just above Available Actions section)... I see that there are no pointer up/down triggers allowed on scene.actionManagers.  Only mesh.actionManagers.  So, I MIGHT have told you some wrong things in my recent PM to you.  (Me saying wrong things is pretty common - I'm old).  :)

SO... I guess we'll still need to determine what's the coolest, newest, most-rad way of listening for left/right held-button events... when only hovering background  (for moving cam forward/backward).

Or, perhaps we could install a skybox to act as our background, and listen for right/left clicks with an actionManager installed on IT.  At least I THINK a skybox is a mesh, as far as actionManagers are concerned.

Anyway, we got a little better starter playground, now.  I'll let you and others take a look... and we'll see what good ideas happen.  My way of left/right auto-pan is perhaps not the best.

Talk soon.  Stay tuned.  Comment at will.  Party on!

update:  Here's another, where single left/right clicks are moving camera along worldSpace Z axis.  Movement should actually be along camera.forward direction.  AND, it needs to honor HELD-DOWN left and right mouse buttons.  I'm not sure how to do that.  SO, this PG still needs some help.  Tested in Firefox only.

Link to comment
Share on other sites

You can always request mouse lock when going to full screen mode to get similar functionality - https://playground.babylonjs.com/#JWBTU9 ( every click on the canvas will trigger full screen on and off). Similary, you can simply "hack" it without full screen mode if you change the pointer lock flag in the engine - https://playground.babylonjs.com/#JWBTU9#1 (again, click on the canvas triggers the behavior)

If you want to implement something yourself, you can always extend the mouse input (https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.freeCameraMouseInput.ts), register it as input, and do whatever you want with it :) 

 

Link to comment
Share on other sites

Thank you both for the demos and suggestions.  This is encouraging!

@Wingnut your idea certainly has promise and I will definitely play with.  I should clarify that the DarkBasic model was a bit different in that the mouse pointer never moved from the center of the screen. It was recentered after each camera angle change in the update loop.  Or, to put it another way, it was like sighting down a paintball gun - the world moves but not the sight.  I am at work now, but will post some of the old DB code later.

@RW I now see that scene does have a onPointerMove method.  I will play with this.  Extending mouse input is probably a bit beyond my noobile skills at present:unsure: - maybe some day.

Thanks again!

Link to comment
Share on other sites

Here is the old DarkBasic code, executed once per game loop:

`resets mouse at center of screen (need this equivalent)
     POSITION MOUSE gHalfhorzRes, gHalfvertRes

     `cax# is a float for camera angle x
     cax#=WRAPVALUE(Camera Angle X() + 0.2*MOUSEMOVEY())
     cay#=WRAPVALUE(Camera Angle Y() + 0.2*MOUSEMOVEX())

     `only have to consider rotations about x and y axes
     ROTATE CAMERA cax#,cay#,0.0

     `Simple forward/backward movement (left and right mouse buttons)
     `MOVE CAMERA (provided function) moves in camera pointing direction, camspeed is a sensitivity setting
     if MOUSECLICK()=1 then MOVE CAMERA camspeed * 0.1
     if MOUSECLICK()=2 then MOVE CAMERA -camspeed * 0.1

     `Strafing movements
     if LEFTKEY()
          cpxAfterArrow#=NEWXVALUE(CAMERA POSITION X(),WRAPVALUE(CAMERA ANGLE Y()-90.0),camspeed * 0.1)
          cpzAfterArrow#=NEWZVALUE(CAMERA POSITION Z(),WRAPVALUE(CAMERA ANGLE Y()-90.0),camspeed * 0.1)
          POSITION CAMERA cpxAfterArrow#, CAMERA POSITION Y(), cpzAfterArrow#
     endif
     if RIGHTKEY()
          cpxAfterArrow#=NEWXVALUE(CAMERA POSITION X(),WRAPVALUE(CAMERA ANGLE Y()+90.0),camspeed * 0.1)
          cpzAfterArrow#=NEWZVALUE(CAMERA POSITION Z(),WRAPVALUE(CAMERA ANGLE Y()+90.0),camspeed * 0.1)
          POSITION CAMERA cpxAfterArrow#, CAMERA POSITION Y(), cpzAfterArrow#
     endif

     `up and down movements
     if UPKEY() then POSITION CAMERA CAMERA POSITION X(),CAMERA POSITION Y() + camspeed * 0.1,CAMERA POSITION Z()
     if DOWNKEY() then POSITION CAMERA CAMERA POSITION X(),CAMERA POSITION Y() - camspeed * 0.1,CAMERA POSITION Z()

Should have commented on the supplied NEWXVALUE function: 

Return Float=NEWXVALUE(Current X Value, Angle Value, Step Value)

This command is used in conjunction with NEWYVALUE and NEWZVALUE commands to move from one point in space to another point in space based on a specified angle. Rather than using COS/SIN maths, these commands simplify the task of moving coordinates within 3D space. The step value specifies how far in the specified direction you would like to calculate. The parameters should be specified using real numbers. 


And cpxAfterArrow# meant camera position X after the left arrow was pressed

No dead spot needed. Right now searching for bjs equivalent to the second line of the first code box.  Perhaps this behavior conversion will require more that I first thought.  But it really is a fluid and intuitive way to travel thru 3D space.  I promise.

Link to comment
Share on other sites

I've been looking at literally hundreds of playground examples, but have not found what I need to crack this nut, though I have seen some solutions to other, less desirable, arrangements.  Before I pursue some of these, I have a couple of questions to focus my search....

1) This may be an easy one, but I can't find it!   Is there a way to turn pointer visibility on and off?

2) In the current Babylon version, is there any way to "take over" the mouse cursor and force/reset it to center screen?

Any suggestions appreciated.

Link to comment
Share on other sites

Hiya FH.  Sorry to hear that there are troubles.

canvas.style.cursor = "none"... that should kill your arrow.

Think about THIS possibility.  Let's say we want a cross-hairs reticle at center-screen, but they are NOT the pointer.  The canvas pointer stays set to 'none'."

You can STILL monitor scene.pointerX/Y... to determine if user wants to pan left/right/up/down, and all beta limits still work fine.

Picking often shoots the ray directly from center of camera... so... picking anything under the cross-hairs.... should be possible.

Generally speaking, most of the world is opposed-to EVER locking the user's arrow.  That keeps them from escaping/exiting things.  That's why there's a big message about HOW TO ESCAPE when we put our pointer into pointerLock mode.

Anyway, think about the center-of-screen cross-hairs... NOT being the real arrow pointer, but instead, a piece of gui, or a textured plane parented to camera, or a sprite, etc.

*shrug*  Different thinking, maybe.  There's 70 returns for playground search for "style.cursor".  There might be some ideas in that pile...  not sure.

Others will surely comment soon.  Be well, stay tuned.

Link to comment
Share on other sites

Thank you so much, Wingnut.  Your suggestion may produce a similar feel.  I could hide the cursor, get its x and y displacements every frame or so and translate those into camera rotations, while having a gunsight locked in the center of the screen.  I will try to work something up.

In the meantime, I would still like to know if anyone can answer whether question 2 is possible or not.  I get that some people are nervous about yielding control of the mouse but it worked great in DBPro with an escape key exit always available.

Also, what exactly is pointer lock for?  What does it do?  Just looking for a simple explanation.

Link to comment
Share on other sites

Hi again.  My pleasure.

Did you do a web search and docs search for pointerLock?  

Docs search eventually leads to an offsite tutorial at @Temechon's informative site:  http://www.pixelcodr.com/tutos/shooter/shooter.html

Scroll down to pointerLock area... read... grab some code... have some fun.

It actually looks pretty good.... for your needs, maybe.  hmm.  Sorry that I don't know much about it... from memory.

You have some leads to info, now.  Perhaps we need some on-site documentation about it, huh?

Teach us what you discover... if you wish. 

Link to comment
Share on other sites

Thanks Wingnut for your responses.  I'd be a baby sea turtle on Crab Island without them!

I did a search on pointerlock before I asked but remain mystified about what it is accomplishing.  I will get to Temechon's in time.

But right now I am more interested in hiding the cursor.  As can be seen in my updated example at http://www.babylonjs-playground.com/#QWGWQK#1 I did manage to get it working. However, I was surprised that the canvas.style.cursor expression (line 11) did not work.  Any idea why?

Line 12 was another variant I saw, but gives an error.

Line 13 works, as do the onPointerObservable techniques below.  If we can get line 11 to work, which of these is the most efficient/reliable to use?  I may be using this a lot. I'd like to get it right.

Thanks again!, FH

 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...