AFRAME mouse auto following - aframe

Question

Is it possible to make AFRAME cursor to automatically follow the movement?
I readed trough documentation but still didn't find any ideas.
I found this package but this is out-of-date: https://www.npmjs.com/package/aframe-no-click-look-controls
Expected result should be same: https://alexrkass.github.io/aframe-thetarestricted-example/

Answer 1

To "lock" the mouse and move like in an FPS game, you can use the look-controls pointerLockEnabled property:
look-controls="pointerLockEnabled: true"
Check it out in this glitch
If you want to customize it a bit (like that website with angle limiters), I'd try creating a custom component like this one:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// register component
AFRAME.registerComponent("foo", {
init: function() {
const max_y_angle = 45; // max left right angle
const max_x_angle = 15; // max up down angle
document.body.addEventListener("mousemove", evt => {
// get the mouse position normalized to <-1,1>
const x = -(evt.clientY / window.innerHeight) * 2 + 1;
const y = -(evt.clientX / window.innerWidth) * 2 + 1;
// set the camera entity rotation values
this.el.camera.el.setAttribute("rotation", {
x: max_x_angle * x,
y: max_y_angle * y,
z: 0
})
})
}
})
</script>
<a-scene foo>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity camera position="0 1.6 0"></a-entity>
</a-scene>
Here's a glitch with a react example.

Answer 2

I got also stuck with react. Can't get it working with react.
The error im getting is: The component foo has been already registered. Check that you are not loading two versions of the same component or two different components of the same name.
import React from "react";
import { graphql, Link } from "gatsby";
import 'swiper/css';
import Layout from "../components/layout";
import "../assets/css/main.css";
import Img from "gatsby-image";
import { Scene } from "aframe-react";
import "aframe";
const IndexPage = ({data}) => {
var AFRAME = require('aframe');
AFRAME.registerComponent('foo', {
init: function() {
const max_y_angle = 45; // max left right angle
const max_x_angle = 15; // max up down angle
document.body.addEventListener("mousemove", evt => {
// get the mouse position normalized to <-1,1>
const x = -(evt.clientY / window.innerHeight) * 2 + 1;
const y = -(evt.clientX / window.innerWidth) * 2 + 1;
this.el.camera.el.setAttribute("rotation", {
x: max_x_angle * x,
y: max_y_angle * y,
z: 0
})
})
}
});
return (
<Layout seo={data.strapiHomepage.seo}>
<div className="full-width loader-view">
<div className="content-before-start">
<Img className="logo-image" fluid={data.logo.childImageSharp.fluid} />
<h1>{data.strapiHomepage.loading_title_homepage}</h1>
<p>{data.strapiHomepage.loading_description_homepage}</p>
<div className="button"><Link to="/main">{data.strapiHomepage.start_vr_homepage}</Link></div>
</div>
<div className="three-six-zero-image">
<Scene foo>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity camera position="0 1.6 0" ></a-entity>
</Scene>
</div>
</div>
<div>
</div>
</Layout>
);
};