Want to ask about how to add interactivity to object

[spiritbroski]

so basically i try using this experiment by mr Robert Long https://github.com/mozilla/hubs/blob/a98d7a62516aa19f11e38f32d2d6683d09643a9a/doc/creating-networked-interactables.md

and it work best and my problem basically arise when i try to add interaction to it this is my code :

this is for hub.html i add this to be added later in the scene

  <template id="interactable-iframe-media">
                <a-entity
                    class="interactable"
                    is-remote-hover-target
                    hoverable-visuals
                    tags="isHandCollisionTarget: true;  offersHandConstraint: true; offersRemoteConstraint: true; inspectable: true;"
                    body-helper="type: dynamic; mass: 1; collisionFilterGroup: 1; collisionFilterMask: 31;"
                    matrix-auto-update
                    shape-helper="type: box"
                    set-unowned-body-kinematic
                    floaty-object="modifyGravityOnRelease: true; autoLockOnLoad: true; gravitySpeedLimit: 0; reduceAngularFloat: true;"
                    set-yxz-order
                    destroy-at-extreme-distances
                    matrix-auto-update
                    loader="loadedEvent: page-thumbnail-loaded"
                 
                >
                
               
            </a-entity>
            </template>

then this is my aframe component i named it page-thumbnail.js

import { resolveUrl, createImageTexture } from "../utils/media-utils";
import { proxiedUrlFor } from "../utils/media-url-utils";

AFRAME.registerComponent("page-thumbnail", {
  schema: {
    src: { type: "string" }
  },

  init: function() {
    this.updateThumbnail = this.updateThumbnail.bind(this);
    this.onClick = () => {
      console.log("dsadas")
    };
   console.log(this.el.object3D)
    
  },

  update(prevData) {
    if (this.data.src !== prevData.src) {
      this.updateThumbnail();
    }
  },

  updateThumbnail: async function updateThumbnail() {
    // if (this.el.object3DMap.mesh) {
    //   this.el.removeObject3D("mesh");
    // }

    const src = this.data.src;

    const result = await resolveUrl(src);

    const thumbnailUrl = result?.meta?.thumbnail;

    if (!thumbnailUrl) {
      throw Error("No thumbnail found");
    }

    const corsProxiedThumbnailUrl = proxiedUrlFor(thumbnailUrl);

    const texture = await createImageTexture(corsProxiedThumbnailUrl);

    const geometry = new THREE.PlaneBufferGeometry(1.6, 0.9, 1, 1, texture.flipY);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    this.el.setObject3D("mesh", mesh);

    this.el.emit("page-thumbnail-loaded");
  },
  play() {
    this.el.addEventListener("interact", this.onClick);
  },

  pause() {
    this.el.object3D.removeEventListener("interact", this.onClick);
  },

});

as you can see i added this.el.addEventListener("interact", this.onClick); but it doesn't work i try to add it to other component like button and it works, does anybody know what i'm doing wrong here? appreciate the answer

[johnshaughnessy]

@spiritbro1 Does it work if you add singleActionButton: true to your tags and change this.el.addEventListener("interact", this.onClick) to this.el.object3D.addEventListener("interact", this.onClick) ?

You should be able to add console logging to the CursorTargettingSystem, interaction system and SingleActionButtonSystem to trace through whether your object is available for raycasting, whether it's being hit by the raycaster, whether it's hovered and finally whether the interact event will fire on its object3D.

Unmark this response as the answer if you are still running into problems you need help with.

[spiritbroski]

thank you, yeah it works now, i want to ask another question, so basically my use case is creating a browser inside mozilla hubs i'm using the robert long tutorial for that and it works, using iframe, but i have changed it so much so that it can interact with the headless browser that i spawn on the background, the click is working now, the other thing i want to ask is, is there a way to add more event like keypress,keyup, and keydown, do you have any reference? i saw on the internet there is this.object3D.addEventListener("keypress") but it doesn't fire is there a way to do that on hubs?