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