<html>
<head>
    <title>Interactions - 12 - Laser manipulation</title>
    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-laser-manipulation@0.3.0/dist/laser-manipulation.min.js"></script>
</head>

<body>
    <a-scene>


        <a-sky color="lightblue"></a-sky>


        <a-box movable color="yellow" position="-1 1.7 -1" scale="0.1 0.1 0.1"> </a-box>        
        <a-box movable color="yellow" position="0 1.7 -1" scale="0.1 0.1 0.1"> </a-box>
        <a-box movable color="yellow" position="1 1.7 -1" scale="0.1 0.1 0.1"> </a-box>

        <a-entity position="0 0 0">
            <a-camera></a-camera>
            <a-entity id="rhand" 
                        laser-controls="hand: right" 
                        raycaster="objects: [movable]" 
                        laser-manipulation
                        thumbstick-states__right="controller:#rhand;
                                    tBindings:moving-in,moving-out,rotating-y-plus,rotating-y-minus;
                                    tgBindings:rotating-x-plus,rotating-x-minus,rotating-y-plus,rotating-y-minus">
            </a-entity>

    </a-scene>
</body>

</html>