For days I’ve been trying to create already a third person player controller for react-three-fiber and @react-three/rapier such as in experiences like https://summer-afternoon.vlucendo.com and https://coastalworld.com/ Both of them seem to have the same implementation which works with keyboard and a joystick, but I cannot seem to figure out how this is clearly implemented.
Would anyone have an idea on how these actually work, and how can I create one?
I’ve tried two methods, but every time I failed, despite trying each in different ways.
Things I’ve tried so far:
1.- Creating a pivot for the camera
2.- Rotating the camera AND the player
My observations:
1.- Camera follows (?) the player
2.- Camera rotates on Y axis when player goes left or right
3.- Rigidbody handles its own rotation
I might be confused, but maybe the camera is the controller and the player just aesthetics?
I’d be extremely grateful for someone to explain me how these third person controllers work, and it would be even of greater help to see some example.
I’m sorry to hear this is such an issue… you can use regular old orbit controls and just apply them to your character…slap WSAD controls onto a finite state machine and your done…
Recommend watching videos gone by SimonDev on YouTube for more info
I am afraid to say that it’s a bit more complicated than that. The user, when goes to the right or left, he goes in a circle, it seems. That’s the tricky part for me. I simply cannot understand how that is done, but I assume it has a relationship with the camera. I believe there are a lot of things going on in the code, but that’s what I’m trying to figure out.
As for the OrbitControls, I thought that they were mostly used to control the camera, and the documentation from three.js says The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.
Yea…your right about that…I don’t know how mine works…but I’m working on mine right now, so when I get a working example I will send you the most basic form to create what you need
Hi I hope this helps, try Threeverse projects, it supports, first person, third person and orbit camera that follows around the player’s avatar, or try directly Threeverse demo.
Yup. Still, what mostly concerns me is how the player goes in a circle when going right or left in the projects i quoted. I dont know how can i implement that
Yep, but I also believe the camera heavily influences the movement for some reason. I believe there is some sort of desiredDirection type of reference which might be calculated based on diatance from the camera.
Basically, having an object in front of the camera, and making the player follow that point (not sure if im explaining it correctly).
Imagine it as a circle, in the center there is a pivot, camera is up by Y, reference in front by Z, and the reference is where should the player be (?)
I had a quick look at the navigation in “Summer afternoon”. If you do not come up with a solution, I will try tomorrow to see whether such navigation is easy or hard to do. I appears to be not so hard – the character moves towards the pointer and the camera moves towards the character – like a person going after a cat, that goes after a laser pointer controlled by the person.
Thats actually a clever way of looking at it, but im not so sure.
Lets not forget they also got keyboard controls and the behavior is the same.
I assume the keyboards and joystick are somehow connected to one another. I somehow achieved to integrate the keyboard with the joystick, but my implementation was not pretty at all.
I believe their mouse movement is just a dynamic joystick.
Here you go → a cat and a tail, because a cat needs a tail. Click in the canvas and then use the keyboard (only the arrow keys). It is not absolutely the same as in Summer Afternoon, but at least it shows smooth third person navigation.
