Welcome to VR Me Up developer log number 6. I’ve added a new Third Person camera view to the desktop and mobile experiences. When you load VR Me Up for the first time you’ll be automatically taken into the Third Person view. You can switch between the new Third Person view and the old First Person view by just clicking the menu at the bottom of the screen. Moving around is the same as in the first person view, by using ‘W’, ‘A’, ‘S’ and ‘D’ and using the Left Mouse Button to change where the player is looking.
While in Third Person view, dragging the right Mouse button will allow you to have a nice look at your avatar. I added this feature because I spent a lot of time in the last release adding VRM avatars to the world, but you never really got to see your own Avatar in the first person view. You now get to enjoy your avatar just as much as everyone else in the world.
Adding a third person view wasn’t as hard as I thought it would be, because of the way I structured the Three.js application code into controllers. I already had a First Person controller tha left the camera where it was, at the player’s head, and then changed the rotation based on dragging the left mouse button. The Third Person controller finds the position of the head and then moves the camera backwards a little, while checking for walls, based on the player forward facing direction. Then if points the camera back at the head location. For the right mouse “look around” feature I use the Three.js Spherical class to calculate the camera offset, from the head, based on the right mouse position.
I have put together some example code for how my Third Person camera is implemented as a JSFiddle here if you would like to see how the controller works and use it in your own projects.
I hope you’ve enjoyed this update and I hope you enjoy the new Third Person camera feature. Remember you can try the VR Me Up right now from your browser or using a VR headset that supports WebXR.
I hope to see you in the Metaverse!
VR Me Up!