[third-person-camera] Using existing controls to move an avatar

[vincentfretin]

[third-person-camera] Using existing controls to move an avatar

[vincentfretin]

I started to play a bit creating a camera-controls component that I created from this meshwalk example
https://yomotsu.github.io/meshwalk/examples/5_terrain.html that is using threejs camera-controls (MW.TPSCameraControls extends CameraControls), MW.KeyInputControl, MW.CharacterController, and an octree for the collision to the navmesh.
Now I understand a bit better the different parts, I think it should be possible to use a modified version of movement-controls with it, also using aframe-extras nav-mesh or simple-navmesh-constraint instead of the octree for collision.

The important bit is that the camera entity shouldn't be inside rig, and no position should be set on it (it's actually similar to the orbit-controls component):

<a-entity id="camera" camera></a-entity>
<a-entity id="rig" networked="template:#avatar-template;attachTemplateToLocal:false" player-info camera-controls>
  <a-sphere position="0 0.75 0" radius="0.75"></a-sphere>
</a-entity>

The camera position that can change is on the PerspectiveCamera, so the child of the camera entity, I get the camera with document.querySelector('#camera').getObject3D('camera') in my camera-controls component.

With movement-controls, keyboard-controls moves the rig, gamepad-controls moves the rig and rotate the rig, so we should be able to use it. nipple-controls moves the rig but rotate the camera via look-controls that is a child the rig, so this one should be modified to rotate the PerspectiveCamera directly. Someone gave me a PS5 controller, I need to test it with gamepad-controls, I think this controls is compatible with that and not just Quest joysticks.

[vincentfretin]

Some demo by SéamusBoy shared on supermedium discord https://discord.com/channels/479784974917042186/479787777949433900/1147381168350703738

https://glitch.com/edit/#!/aframe-joystick-third-person
and
https://glitch.com/edit/#!/reliable-universal-hardware
The models are from Synty Studios.
NOTE: The models are from the Free Synty Starter Pack: https://syntystore.com/products/polygon-starter-pack

@kfarr also have some notes here 3DStreet/3dstreet#338

[kfarr]

Did some related work on a third person driving concept:
https://glitch.com/edit/#!/aframe-throttle-accelerator?path=chase-camera.js%3A1%3A0

The chase-camera.js implementation was based on an interesting idea of a "selfy stick" approach applied on a new copy of the look controls component.