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>)
