How to prevent camera movement in my title scene

I’m extremely new to Javascript, but I have a basic understanding of code, but not enough to get started on what I’m looking for. I basically have it set up like this.

  1. I have one scene total.
  2. I have two cameras that I toggle between using the keys 1 & 2.
  3. 1 = FP mode where you can walk/look around the scene. 2= The title screen.
  4. The title screen is underneath the level so it can not be seen.

The issue is simple, whenever I move the mouse cursor it moves the FP mode. It of course is fine in the FP mode where you are interacting with the environment. BUT it’s not so great with the title screen since the camera is LOCKED into position but the FP mode is moving regardless.

So if I move my mouse UP during the title screen! the FP mode goes up, even though it should seem like nothing should happen.

Here is a gif to help demonstrate the issue.

My immediate solution feels like making a simple script that disables the mouse movement and attach it to the camera for the title screen. Then adding a script that re-enables it when switching back to the FP mode.

Not sure how your code is structured so this may not apply. I would have attach the mouse event listeners and lock the mouse when you press ‘1’ and remove the event listeners and unlock the mouse when you press ‘2’.

This can be done by sending a global event via the ‘app’ object or if the code where you detect the keypresses has a reference to the camera objects, send an event via the entity object.

If you are using the look-camera.js script, then you can modify it so when it detects the entity is enabled/disabled, it can add/remove the mouse event listeners and lock/unlock the mouse pointer.

If you share the project, I could probably write up some sample code.

I’m working on what you are suggesting now. I’d like to try first, then pass it to you if I can’t figure it out. But thanks for the suggestion! You rock!

Practice makes perfect so let me try I’ll check in once I’ve done something whether I failed or succeeded.

Ok it appears that I’m using the FPS code found on the site, and within it is the ‘app’ code which I think is affecting all cameras as you were talking about. Perhaps I need to have this altered in a way that allows the Look around/move settings stand alone per entity.

thought? Here is my scene to help out. Btw I switched the order to 1 = menu 2 = game.

So I’ve made some changes to the first person script and the camera manager in this fork of the project.

What I’ve done is added an event listener to the first person script that gets called when the entity it is attached to is enabled and disabled. On that callback, I add or remove the mouse event listeners.

Awesome it works! only after I press the numbers 2 then 1. Meaning that the mouse is clearly enabled on start up which is causing my original problem, BUT after I alternate it works perfectly.

The problem I see occurs on my project, but not so much on yours. Yours works exactly how I expected.

Not sure the reason. I’ll dig deeper.

Let me know if you get stuck again as I know what the problem is but is probably better for you to work out where. :wink:

Yea I have no clue! I have in the past just remade everything for certain things to work, but i’d prefer not to do that.

Also I noticed that the mouse is still on, is there a way to hide the mouse entirely, and also is there a way to make it so that as soon as I press 2, i’m in game right away, Meaning, no need to click to engage the game.

Thanks for your help it’s amazing how helpful the forums are on this platform! I’ve already recommended 2 friends about this tool based on how resourceful it has been.

for the record, I published my new build that has your changes introduced.

When an entity is created and is enabled for the first time, it calls the initialise functions on all the scripts that are attached to it.

As the Player camera is enabled at the start of the application, the initialise function gets called on the first person script which adds the mouse event listeners.

So all I did was disable the Player camera in the project.

You can. There’s a standard in place for web browsers to not be able pointer lock unless it is from a user action (key press, mouse click etc) so you must do this in a callback. I’ve updated the project to show you what I mean.

To hide the mouse pointer completely, you can use CSS to hide the pointer when it is over the canvas.

AMAZING! I think I’m good for now! :smiley: I’ll be sure to come back here if I run into more issues. :slight_smile: but for now it’s perfect :smiley: