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

[vincentfretin]

Create an example similar to https://8thwall.8thwall.app/navigation-mesh/ using nipple and keyboard controls and respecting the navmesh to move an avatar with a third person view. This is mainly related to the camera here that needs to follow the avatar, and also rotate the avatar model according to the controls used.

I think movement-controls="constrainToNavMesh:true;controls:keyboard,nipple" on the avatar entity should work with an inactive camera as a child (movement-controls needs a camera as one of the child). Another component would take care of rotating the avatar model based on the movement direction, probably something to do in movement-controls component so that applies to any controls.

Any of you implemented something like that already? I'll gather any insights you may have.

Also see those threejs libraries related to camera:

• https://github.com/yomotsu/camera-controls
• https://github.com/yomotsu/meshwalk

[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 https://github.com/3DStreet/3dstreet/issues/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.

[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.