serene haven
Hope it's okay to post a r3f question here as well! I wanted to understand and modify this webpage: https://github.com/thedevelobear/react-three-fibear.
I created multiple <Logo> files and wanted to combine them as a scrollable menu in r3f. All the effects work perfectly but I really don't know how to make the list of Logos scrollable while still letting them be clickable :-/. If anyone can help me figure out the js and css part for the scrollarea I would really appreciate it.
I load them like this in the app part:
```<Suspense fallback={null}>
<Logo />
</Suspense>
<Suspense ...>
<Logo2/>
...```
and the Logo part:
const geometry = useRef();
const material = useRef();
const logo = useLoader(THREE.TextureLoader, process.env.NODE_ENV === "/logo.png");
const scaleX = 0.1 * size;
const scaleY = 0.04 * size;
const scaleZ = 0.1;
const state = { mouse: [0, 0] }
const [spring, setSpring] = useSpring(() => ({
scale: [scaleX, scaleY, scaleZ],
config: { mass: 3, friction: 40, tension: 800 }
}));
const bindHover = useHover(
({ hovering }) =>
setSpring({ scale: hovering ? [1.2 * scaleX, 1.2 * scaleY, 1.2 * scaleZ] : [scaleX, scaleY, scaleZ] }),
{
pointerEvents: true
}
);
return (
<a.group className="link" {...props} scale={[0.1 * size, 0.04 * size, 0.1]} {...spring} {...bindHover()} onClick={() => window.location.href = 'https://thedevelobear.com'}>
<group ref={group}>
<mesh
args={[geometry, material]}
position={[0, 0, -20]}
receiveShadow
castShadow
>
<planeGeometry ref={geometry} attach="geometry" />
<meshPhongMaterial
transparent
ref={material}
attach="material"
map={logo}
/>
</mesh>
</group>
</a.group>
);
};```
main yew
