JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
    
    <a-scene>
        <a-entity position="0 1.8 4">
            <a-camera look-controls id="camera" wasd-controls-enabled="false" >
                <a-cursor id="cursor" color="#4CC3D9" position="0 0 -1"></a-cursor>
            </a-camera>
        </a-entity>
        

        <a-box id="orange-cube" position="3 3 3" rotation="30 30 0" width="2" depth="2" height="2" color="#F16745" roughness="4">
        </a-box>

    </a-scene>

JavaScript

// code for responding to clicking

document.querySelector('#orange-cube').addEventListener('click', function() {
            this.setAttribute('color', 'red');
            console.log('I was clicked!');
        });
        
// code for moving the cursor
var mouse = {x: 0, y: 0};
        var camera =  document.querySelector('#camera').components.camera.camera;
        console.log( camera.position);
            function onMouseMove(event) {

                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                
                var vector = new THREE.Vector3(mouse.x, mouse.y, -1);
	            vector.unproject( camera );
                var dir = vector.sub( camera.position ).normalize();
	            var distance = - camera.position.z / dir.z;
                var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
                positionStr = String(pos.x) + " " + String(pos.y) + " " + String(pos.z);
                document.querySelector('#cursor').setAttribute('position', positionStr);
            }

        window.addEventListener('mousemove', onMouseMove, false);