How do I make a mesh rotate with the ArcRotationCamera like a third person game control?

[Mahmlo]

This is my camera setup:

const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 1, 0));
camera.attachControl(canvas, true);
camera.panningSensibility = 0;
camera.lowerRadiusLimit = camera.radius;
camera.upperRadiusLimit = camera.radius;
camera.inertia = 0.7;
camera.parent = player;
camera.setPosition(new BABYLON.Vector3(0, 2.2, -2.5));

This is the rotation code for the player mesh

player.rotation = player.rotationQuaternion.toEulerAngles();
player.rotationQuaternion = null;

(note that ill change it into quaternions if needed)

So how do I make the player rotate on the yaw axis with the camera?

Update: I tried this:
player.rotation.y = -camera.alpha * Math.PI;

But the rotation isn’t enough, the camera rotates a bit more than the mesh

[mawa]

Hi and welcome to the community,
Could you set-up a PG to help us debug. Setting the rotation quartenion to null or setting a new vector3 cancels the rotation quartenion. I suppose that’s what you wanted. Now, the arc rotateCamera likely needs some sort of translation to match the direction of your character, since it’s orbital and from a target.
I’m not the best with maths and I’m also a very ‘visual’ person, so at least for me, the playground would help, if by any means possible?
Meanwhile, again welcome to our Community and have a great day

[Mahmlo]

Thanks
Anyways I dont mind changing it to quaternions, I just but here is the playground

Babylon.js Playground

But theres a problem, the warehouse node is being loaded (i can see it in the inspector) but I cant see it on the screen. also the skybox isnt showing up on the screen
(Everything is loading well outside of the playground tho)

[mawa]

@Mahmlo

theres a problem

Indeed. In fact, the warehouse model is also not loaded. Nothing from external is.
Reason is:

1. To load an external asset in the PG, you need to comply with the rules to load from ‘reliable sources’.
   Please take a look at this section of the doc.
2. The path to the model points to a subfolder of the root (the PG root) which does not exist, obviously. Since the link should be a path to some other server (from the ‘reliable sources’ stated above).

Once this done, let us now and we will see to this camera thingy. If you have other issues loading your scene in the PG, don’t hesitate to ask. Meanwhile, have a great day

[mawa]

@Mahmlo

the skybox isnt showing up on the screen

Likely because it comes after the faulty model load, but as said, we can see to this later, once you have found how to properly load your external assets in the PG.

[Mahmlo]

Have a great day too

So now it works:

Babylon.js Playground

which is nice
also, I changed my mind and ima make it a first person game, so how do I do that? With all the collisions and physics and stuff

and also, for later (after the first person controls) how do I fix the shadows? Especially self shadows for the level itself, so buildings can cast shadows and stuff

also, for later of course, if I have a glb model of animated arms for fps games, how do I attach it to the player in first person in a way that it will look “realistic”?

Note: i looked in the docs for all the stuff above except for the fps arms, and i didnt find much that can help

[mawa]

@Mahmlo

I changed my mind and ima make it a first person game, so how do I do that?

Yes. It’s a fairly wide subject and it would be good to learn a bit around the different cameras and the handling. Collisions, move with collisions and self shadowing (shadowing in general) are all seperate topics you will need to learn one-by-one.

Also, note that you can sure have two (or more) cameras in your game. You could have a first-person view cam and a third-person view cam. Everything’s achievable, though I won’t tell you it’s easy. Nonetheless, lucky you, there are a fair number of examples, playground samples and tutorials for you to learn or simply soak-up the content, twist and tweak and experience.

For a starter, I made a small selection that might be of interest to you…

@Mahmlo

how do I attach it to the player in first person in a way that it will look “realistic”

There’s a nice PG I used myself as a base for this understanding. Below is the link:

Babylon.js Playground

There’s also a simplified version, focusing on the aspect of ‘pointer lock’. When in first person view, you will want to lock the pointer and display your pointer as the ‘target’ for whatever interaction (i.e. shooting). This aspect of pointer locking in browser (with its constraint) and the targeting from the character/camera view is a subject on its own. Again, there’s a number of threads and examples in this very forum, if you search for something like ‘fps’ + ‘pointer’ + ‘target’.

Babylon.js Playground

Here is the link to one of the threads around this subject of mouse move with cam/character and pointer lock:

Camera rotation and mouse direction

Hi, Updated PG (it was definitely not showing the issue properly) https://playground.babylonjs.com/#Y6Z81M#3 Please try the mouse move with the camera.rotation.z = 1.57; uncommented. You will experience what I am talking about. The issue with the pointerlock is that when the camera rotates around an axis, the mouse mouvement becomes inconsistent (you sometimes have to invert your mouse move to get the right movement). Is there a solution to automatically handle this, so that no matter the c…

---

On the side of third-person view and a camera that follows the character, there’s also some good stuff from experienced members willing to share their expertise. In particular, there’s this tutorial with playground examples from @DRLeria I’d like to share with you:

Simple Demo Mini Tutorial for "Newbies" - Player moving (MoveWithCollisions)

Good afternoon Group! Here I leave the download link of a simple project. LIVE DEMO https://www.viseni.com/character_navigation/ SOURCE CODE DOWNLOAD LINK – UPDATED TO GITHUB Basically it is to learn how to use a navigation system of an animated character using the keyboard or virtual joysticks with MoveWithCollisions. The character is designed using AssetForge, for those of you who don’t know it and like the Low Poly world, I definitely recommend this tool. Later I have cleaned the mes…

Mini-Tutorial for "Newbies" 2 - Character walking on Navigation Mesh using "Point To Navigate Method"

Good afternoon Group! This time I want to share another mini-tutorial for “Newbies” including the code about Character walking on Navigation Mesh using “Point To Navigate Method”. LIVE DEMO https://viseni.com/ptn_navigation/ SOURCE CODE https://www.viseni.com/ptn_navigation/ptn_navigation.zip The workflow is similar to my previous post, in this case I have decided to work with Reallusion Character Creator and iClone. As you can see in iClone I’ve only used two animations, one Idle and one…

And there’s of course much more to find in this forum and in the docs. If I recall other links, I will post’em here for you.

Others, like @labris also have a lot to say about character control and camera handling. If you want to go the FPS route, you might want to have a look at Yuka. Though I don’t know what type of game you are planning to create?…

---

About collisions and move with collisions, I suppose a first basic understanding of how this works (with or without a physics engine) can be gathered from the docs. I’d suggest to start by reading this section as well as this small part/workshop around basic collision.

Then, if you plan using a physics engine (recom would be Havok), you’ll also find the section in the doc within the section dedicated to the engine. At this point, I could extend the content of this post writting tons of stuff and sharing dozens of links. As I said, the subject is wide and the specificities in BJS around this subject are numereous. So, I guess I’ll let you discover the above and continue your journey and whenever you have a more specific question, feel free to cc me.

Eventually, also post a new question with a specific title that’s related to just your problem/question. Try to always provide the context and if possible, a playground.

I hope the above will help and meanwhile have a great day

[Mahmlo]

Alright, thank you so much

I’ll go through the links you sent and tell you if I find any problems I cant fix

[Mahmlo]

@mawa I have a lot of errors and mistakes in my code and idk how to fix them, my brain isnt braining idk why

If you dont mind, do you have discord or anything similar to that can you add me so it can be easier to communicate?

[mawa]

I have discord for BJS but to be honest, I’m not regularly online and I have other things I need to attend to May be you could use codepen.io or similar or simply use the PG. May be break it down, so you won’t have as many issues (with one eventually impacting the others).
You can also PM me but know that I’m not a pure dev. I mean when it comes to the most academic piece of code, I sure know my way around BJS, but there are much better devs/ENGs than me in this forum. I’m more of an art and creative dir (just to make this clear).

EDIT: And since you marked this post as a ‘solution’, I would advise you make a new post with a title corresponding to your current issue. You will get more views, faster and more accurate replies from the members or the Team.

[Mahmlo]

Ok I’ll make a new post