Nested 3D UI Can't be Clicked

Hi so I have entity that moves with raycasting around the world and it has nested child 3D UI objects that for some reason can’t be clicked on. Here’s the code.

import * as ecs from '@8thwall/ecs'  // This is how you access the ecs library.

const clicked = false

ecs.registerComponent({
  name: 'SingleWorldButton',
  schema: {

    startIcon: ecs.eid,
    mainbutton: ecs.eid,
    // @asset
    checked: ecs.string,
    // @asset
    uncheck: ecs.string,
    Word: ecs.eid,
  },
  // schemaDefaults: {
  // },
  // data: {
  // },
  add: (world, component) => {
    const {startIcon, mainbutton, Word} = component.schema

    world.events.addListener(startIcon, ecs.input.SCREEN_TOUCH_START, () => {
      BaseAppear(world, startIcon, mainbutton)
    })
  },
  tick: (world, component) => {
  },
  // remove: (world, component) => {
  // },
  // stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
  //   ecs.defineState('default').initial()
  // },
})

function BaseAppear(world, startIcon, mainbutton) {
  ecs.Hidden.set(world, startIcon)
  ecs.Hidden.remove(world, mainbutton)
  console.log('this is working')
}

Is there something I’m missing?

Can you land your changes and share the project with the support workspace?

Shared and landed. Hope yall can figure it out.

I’m taking a look at the project now, however given the projects complexity can you give me a little more info about the buttons you’re seeing the issue with?

Sure so I have a cursor that raycast to the surface and it has entities on it. The goal is to have a group of buttons in Worldbuttons I can click on in 3D space. The test button in world buttons, called “firstpart”, is referenced in a component to handle the clicking. The component is on “Spot”. I believe due to the fact the 3D buttons are on empty entities, they aren’t working.

I added a background color to the UI and noticed that the UI is actually blocking the raycaster from hitting the 3D world button. Looks like you need to either remove the entities or change your Hidden components to Disabled.

Oh wow, thanks for this! I set up the parent screen UI making it bigger in code to close to the size of the screen. I was able to hide the parent screen UI and now I can interact with the world objects. Appreciate your help!

1 Like

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.