I've been trying to understand the code from this sandbox and give it some features of my own.
My goal is to create a link to a different website in the hidden <Geo> element. However, I can't figure out how to embed the link like the other <Text> elements so that it only appears and scales after the overlayed image disappears.
Here is the code for the <Geo> part:
export default function Model(props) {
const group = useRef()
const shadow = useRef()
const { nodes } = useGLTF('/geo.min.glb', true)
useFrame(({ clock }) => {
const t = (1 + Math.sin(clock.getElapsedTime() * 1.5)) / 2
group.current.position.y = t / 3
shadow.current.scale.y = shadow.current.scale.z = 1 + t
shadow.current.scale.x = (1 + t) * 1.25
group.current.rotation.x = group.current.rotation.z += 0.005
group.current.position.x = THREE.MathUtils.lerp(group.current.position.x, state.mouse[0] / 2, 0.05)
group.current.position.z = THREE.MathUtils.lerp(group.current.position.z, state.mouse[1] / 4, 0.03)
})
return (
<group {...props} dispose={null}>
<group ref={group}>
<mesh geometry={nodes.geo.geometry} castShadow receiveShadow>
<MeshDistortMaterial color="#ffffff" flatShading roughness={1} metalness={0.5} factor={15} speed={5} />
</mesh>
<mesh geometry={nodes.geo.geometry}>
<meshBasicMaterial wireframe />
</mesh>
</group>
<group position={[1.25, -0.5, 0]}>
<Text position={[0, 0, 0]} fontSize={0.07} lineHeight={1} letterSpacing={-0.05}>
03
<meshBasicMaterial color="#cccccc" toneMapped={false} />
</Text>
<Text bold position={[-0.01, -0.1, 0]} fontSize={0.1} lineHeight={1} letterSpacing={-0.05} color="black">
{`Poimandres,\nThe vision of Hermes`}
</Text>
</group>
<group position={[1.0, -1, 0]}>
<Text bold position={[0, 0.5, 0]} fontSize={0.15} lineHeight={1} letterSpacing={-0.05} color="white">
Links
<meshBasicMaterial color="#cccccc" toneMapped={false} />
</Text>
<Html>
<a href="https://www.youtube.com/">YouTube</a>
</Html>
</group>
<Shadow ref={shadow} opacity={0.3} rotation-x={-Math.PI / 2} position={[0, -1.51, 0]} />
</group>
)
}