Thomas Dupont
Thomas Dupont

Reputation: 427

a-frame: camera+look-controls && keyboard-control

For an Hackaton, we have to use movement with keyboard and camera management. I didn't find on the doc, the possibility to use both.

To solve the problem (for the demo only) I catch the key event myself like this:

<!--html-->
   <a-entity camera id="camera"  look-controls position="0 1.764 0">
        <a-entity id="cursor" cursor="fuse: false; fuseTimeout: 500" position="0 0 -1"

                   geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02;" material="color: #CCC; shader: flat;">

        </a-entity>
   </a-entity>


//javascript
    priv.bindEvent = function(evt) {
            var el = document.getElementById('camera').getAttribute('position');
            var element = document.getElementById('camera');
            switch(evt.key) {
                case "z":
                    el.z -= 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "q":
                    el.x -= 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "d":
                    el.x += 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                case "s":
                    el.z += 0.2;
                    element.setAttribute('position', el.x+" "+el.y+" "+el.z);
                    break;
                default:
                    break;

            }
        };

We are discovering this awesome library and I ask if there are on other way to use this feature.

thanks in advance

Upvotes: 0

Views: 2482

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11970

The default way to do this is to use look-controls as you are already doing, along with wasd-controls for the keyboard.

Example:

<a-entity camera look-controls wasd-controls></a-entity>

You can also examine the source code for wasd-controls if you need to fork it and make changes for a different layout.

Upvotes: 2

Related Questions