freighthopper Posted January 20, 2018 Share Posted January 20, 2018 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! Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 21, 2018 Share Posted January 21, 2018 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. Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 22, 2018 Share Posted January 22, 2018 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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
freighthopper Posted January 22, 2018 Author Share Posted January 22, 2018 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 - maybe some day. Thanks again! Quote Link to comment Share on other sites More sharing options...
freighthopper Posted January 23, 2018 Author Share Posted January 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
freighthopper Posted January 29, 2018 Author Share Posted January 29, 2018 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. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 29, 2018 Share Posted January 29, 2018 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. Quote Link to comment Share on other sites More sharing options...
freighthopper Posted January 30, 2018 Author Share Posted January 30, 2018 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. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 30, 2018 Share Posted January 30, 2018 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. NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
freighthopper Posted January 30, 2018 Author Share Posted January 30, 2018 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 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 30, 2018 Share Posted January 30, 2018 Good testing/telling, FH.... thx. Yep, very interesting. https://www.babylonjs-playground.com/#QWGWQK#2 Lines 100-105... I wait for scene isReady, then wait 3 more seconds, then do the poke (to 'no-drop'). Works... until we move the mouse. Then it instantly returns to arrow, again. Strange! *scratch scratch* Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.