Currently, I am in the process of developing custom look controls for A-Frame based on their official documentation. This custom component is being written in TypeScript as part of an Angular project that enforces tslint rules restricting the use of this outside a class body.
Although the controls are successfully registered and visible in window.AFRAME.components["touch-controls"], the init function never seems to execute. Below is the code for my custom look controls:
// Code omitted for brevity
class TouchControls {
constructor() {
// Code omitted for brevity
}
init(data?: any): void {
// Code omitted for brevity
}
update(oldData): void {
// Code omitted for brevity
}
tick(time: number, timeDelta: number): void {
// Code omitted for brevity
}
play(): void {
// Code omitted for brevity
}
extendSchema(update: any): void {
// Code omitted for brevity
}
// More methods included...
}
const AFRAME = (window as any).AFRAME;
AFRAME.registerComponent("touch-controls", new TouchControls());
Here is how I register the component in my project:
import { TouchControls } from "../../aframe/touch-controls";
const AFRAME = (window as any).AFRAME;
AFRAME.registerComponent("touch-controls", new TouchControls());
Finally, here is a snippet of the template where the custom component is utilized:
<a-scene>
<a-entity touch-controls>
<a-animation
attribute="rotation"
dur="3000"
fill="forwards"
from="0 00 0"
to="0 10 0"
repeat="0">
</a-animation>
</a-entity>
<a-assets #assetLoader>
<img id="render-asset" crossorigin="anonymous" [src]="renderPath">
</a-assets>
<a-sky src="#render-asset"></a-sky>
</a-scene>