🧵#Hi we are migrating our legacy Three

this.iconButton = new ThreeMeshUI.Block({
      width: this.vrButtonConfig.width,
      height: this.vrButtonConfig.height,
      margin: this.vrButtonConfig.margin,
      padding: this.vrButtonConfig.padding,
      justifyContent: "center",
      alignContent: "center",
      contentDirection: "row",
      backgroundColor: this.vrButtonConfig.color,
      backgroundOpacity: this.vrButtonConfig.opacity,
      borderRadius: this.vrButtonConfig.radius,
      borderWidth: !this.isSelected ? (opts.borderWidth ?? 0) : opts.borderHoverWidth,
      borderColor: !this.isSelected ? (opts.borderColor ?? new THREE.Color(0, 0, 0)) : opts.borderHoverColor,
      borderOpacity: !this.isSelected ? (opts.borderOpacity ?? 0) : opts.borderOpacity,
    });

const buttonComponent = this.iconButton.addComponent(Button, {
      onClick: EventList.from(this.onClick),
    });

    const previousPointerEnter = buttonComponent.onPointerEnter.bind(buttonComponent);
    buttonComponent.onPointerEnter = (x) => {
      const buttonComponent = this as any;
      console.log("Entering", buttonComponent.name, buttonComponent.gameObject, buttonComponent.parent);
      previousPointerEnter(x);

      if (this.isSelected) {
        return;
      }

      (this.iconButton as any).set({
        backgroundColor: this.bgColorHover,
        borderColor: this.vrButtonConfig.borderHoverColor,
        borderOpacity: this.vrButtonConfig.borderHoverOpacity,
        borderWidth: this.vrButtonConfig.borderHoverWidth,
      });
      ThreeMeshUI.update();
    };

    const previousPointerExit = buttonComponent.onPointerExit.bind(buttonComponent);
    buttonComponent.onPointerExit = () => {
      const buttonComponent = this as any;
      console.log("Leaving", buttonComponent.name, buttonComponent.gameObject, buttonComponent.parent);
      previousPointerExit();

      if (this.isSelected) {
        return;
      }

      (this.iconButton as any).set({
        backgroundColor: this.bgColor,
        borderColor: this.vrButtonConfig.borderColor,
        borderOpacity: this.vrButtonConfig.borderOpacity,
        borderWidth: this.vrButtonConfig.borderWidth,
      });
      ThreeMeshUI.update();
    };

const buttonComponent = this.iconButton.addComponent(Button, {
      onClick: EventList.from(this.onClick),
    });

    const previousPointerEnter = buttonComponent.onPointerEnter.bind(buttonComponent);
    buttonComponent.onPointerEnter = (x) => {
      const buttonComponent = this as any;
      console.log("Entering", buttonComponent.name, buttonComponent.gameObject, buttonComponent.parent);
      previousPointerEnter(x);

      if (this.isSelected) {
        return;
      }

      (this.iconButton as any).set({
        backgroundColor: this.bgColorHover,
        borderColor: this.vrButtonConfig.borderHoverColor,
        borderOpacity: this.vrButtonConfig.borderHoverOpacity,
        borderWidth: this.vrButtonConfig.borderHoverWidth,
      });
      ThreeMeshUI.update();
    };

const previousPointerExit = buttonComponent.onPointerExit.bind(buttonComponent); buttonComponent.onPointerExit = () => { const buttonComponent = this as any; console.log("Leaving", buttonComponent.name, buttonComponent.gameObject, buttonComponent.parent); previousPointerExit();

  if (this.isSelected) {
    return;
  }

  (this.iconButton as any).set({
    backgroundColor: this.bgColor,
    borderColor: this.vrButtonConfig.borderColor,
    borderOpacity: this.vrButtonConfig.borderOpacity,
    borderWidth: this.vrButtonConfig.borderWidth,
  });
  ThreeMeshUI.update();
};

Hi, can you check if this also happens if the button is further away or if this is maybe because of proximity?

It is still kinda bad maybe slightly better. The debug button keeps saying that its entering the button. When inspecting in threeJS inspector on desktop the meshes underneath from threejs seem ok.

do you have a link that we can try?

will host one on needle cloud in a second

https://lifeliqetestvrui-z2uhrv419c8aj-z1eoe4r.needle.run/?debuglifeliqeui

It seems like the spatialgrabraycaster is activating and causing issues with the SphereIntersections instead of basic raycasting so there were suddenly 2 raycasters <:hmmge:1156337929417920593>

Yes, looks like it. So the spatial grab raycaster is intended to work for cases where you have e.g. hands and it's hard to aim. Maybe for this case it makes sense to disable spatial grab if the input device is not a hand?

yeah it was enabled by default I have disabled it and it seems to work pretty ok now