How to change position of a <a-entitiy> onclick

Question

I'm trying to let a despawn on click if the cursor is ontop of the object and the mouse is clicked and let if respawn at a new position.

i used aframe-event-set-component (https://www.npmjs.com/package/aframe-event-set-component) to realize this but i'm unable to pass a new random generated position.

i hope someone can help me out :)

i tried to pass new position coordinates with stringinterpolation and with databinding without any success.

<a-entity>
<a-gltf-model 
  src="../../assets/models/CoinBlock.gltf" 
  position="1.5 2 -0.5" 
  rotation="15 -50 0" 
  radius="1.25"
  scale="0.002 0.002 0.002"
  event-set__down="_event: mousedown; position: -1 0.5 -0.5; rotation: -45 45 0"
</a-gltf-model>

Answer 1

Use event-set__enter instead of event-set__down and use click in place of mousedown. You can also despawn your entity by adding visible: false after rotation: -45 45 0;

<a-entity>
    <a-gltf-model 
        src="../../assets/models/CoinBlock.gltf" 
        position="1.5 2 -0.5" 
        rotation="15 -50 0" 
        radius="1.25"
        scale="0.002 0.002 0.002"
        event-set__enter="_event: click; position -1 0.5 -0.5; rotation: -45 45 0"
    </a-gltf-model>

Answer 2

Since you are using angular, I'd suggest you manipulate a-frame through its template.

Using Angular template:

<ng-container *ngIf="show">
    <a-gltf-model 
      src="../../assets/models/CoinBlock.gltf" 
      [attr.position]="position" 
      rotation="15 -50 0" 
      radius="1.25"
      scale="0.002 0.002 0.002"
      (click)="despawn()"
    </a-gltf-model>
</ng-container>

To show and hide:

public show: boolean = true;

despawn() {
    this.show = false;
}

To respawn in a new position based on some new click event:

respawn() {
    this.position = '0 0 0'; // your new position
    this.show = true;
}