-
|
What is shown in the gif is a small cube mesh ( that we can interact with ) under an "HTML" carousel. I need to put the cube over the carousel to maintain the cube's behavior. I've tried tweaking the position and um zIndexRange attributes on both the carousel and the cube, but I wasn't successful in placing the cube over the carousel. So, is there a way to achieve this result? Below you find the code for the Canvas with those two components. function App() {
return (
<>
<Canvas shadowMap camera={{ position: [0, 0, 5] }}>
<ambientLight intensity={0.5} />
<spotLight
intensity={0.5}
position={[20, 10, 10]}
angle={0.2}
penumbra={1}
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
castShadow
/>
<mesh receiveShadow>
<planeBufferGeometry args={[100, 100]} />
<meshPhongMaterial color='#121214' />
</mesh>
<Suspense fallback={null}>
<LinkBox position={[0, 0, 999]} zIndexRange={[1000, 101]} />
</Suspense>
<Html fullscreen position={[0, 0, 0]} zIndexRange={[100, 0]}>
<Carousel position={[0, 0, 0]} zIndexRange={[100, 0]} />
</Html>
</Canvas>
</>
);
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
you can prepend html, but generally i don't understand why you're using |
Beta Was this translation helpful? Give feedback.
-
|
By placing the carousel under the canvas I get this effect :
When the cube is interactable but the carousel isn't. So what I'm trying to achieve is the carousel between ( in the middle of ) the canvas and the cube. Because I want to be able to interact with both at the same time. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe I should be thinking about this problem more like: I need the carousel Inside de canvas with the cube below the cube (?) 🤔 |
Beta Was this translation helpful? Give feedback.
you can prepend html, but generally i don't understand why you're using
<Html>here. you can render html before/underneath the canvas.