How to capture click events on child elements of the element monitored by OrbitControls?

Questions
1

Hi, I have created a sphere using Three.js and also have a carousel component. I want to be able to rotate the sphere along the Y-axis when interacting with the carousel component. So, I set the element monitored by OrbitControls to be the common parent component of both the sphere and the carousel. Unfortunately, this approach prevents me from capturing click events on the carousel. Do you have any good solutions or ideas for this issue?

    document.getElementById('three-container')?.appendChild(renderer.domElement);
    const section = document.getElementById('section')
    const controls = new OrbitControls(camera, section!);

 return (<section id='section' onClick={(e) => {
    console.log(111, e.target.tagName)
    e.stopPropagation()
    e.preventDefault()
    console.log(222, e.target.tagName)
  }} style={{
    width: '100%',
    height: '100vh',
    position: 'relative',
    background: 'black'
  }} className='flex justify-center'>
    <div id='slider'
      onClick={(e) => {
        console.log(111111, e.target.tagName)
      }}
      style={{ width: '80%', position: 'absolute', top: '50%', zIndex: 1, userSelect: 'none' }}>
      <Splide
        ref={sliderRef}
        options={{
          type: 'loop',
          perPage: 3,
          arrows: false,
          pagination: false,
          drag: false,
          waitForTransition: true
        }}>
        <SplideSlide key={1}>
          <div onClick={() => console.log(111112222)}>
            <Image style={{ cursor: 'pointer' }} width={200} src={img1} alt="Image 1" />
          </div>
        </SplideSlide>
        <SplideSlide key={2}>
          <div >
            <Image style={{ cursor: 'pointer' }} width={200} src={img2} alt="Image 2" />
          </div>
        </SplideSlide>
        <SplideSlide key={3}>
          <div >
            <Image style={{ cursor: 'pointer' }} width={200} src={img3} alt="Image 3" />
          </div>
        </SplideSlide >
        <SplideSlide key={4}>
          <div >
            <Image style={{ cursor: 'pointer' }} width={200} src={img4} alt="Image 4" />
          </div>
        </SplideSlide>
      </Splide>
    </div>
    <div className='absolute' id="three-container" style={{ width: '100%', height: '100vh', position: 'absolute', pointerEvents: 'none' }}>
    </div>
  </section>)
2

Is there anyone who can help me out?:sob:

3

Just hit this same problem, did you ever solve this?

4

We found a workaround. The issue was the orbit controller captures the pointer and it doesn’t propagate to the children of the DOM element.

The workaround is to make the controller DOM element a sibling of the buttons instead. You essentially need to add a wrapper around the DOM element so that your buttons can be siblings.

Make an empty container class='cameraControls' with width:100% and height:100% inside the DOM element you were previously passing to the camera controller, and pass it that instead. Then create a sibling to that container class='button-container' with a high z index z-index: 100 and place your buttons in there.

1 Like