Separated onClick events to each face of geometry.

[nandoolle]

I'm working on a college/portfolio project, shown in the gif below.

At this point, I'm through at the stage of adding redirect links to each face of the cube, and the cube component looks just like this :

const LinkBox = () => {
  const { size, viewport } = useThree();
  const aspect = size.width / viewport.width;
  const [spring, set] = useSpring(() => ({
    scale: [1, 1, 1],
    position: [0, 0, 0],
    rotation: [0, 0, 0],
    config: { friction: 10 },
  }));
  const bind = useGesture({
    onDrag: ({ offset: [x, y] }) =>
      set({
        position: [x / aspect, -y / aspect, 1],
        rotation: [y / aspect, x / aspect, 0],
      }),
    onHover: ({ hovering }) =>
      set({ scale: hovering ? [1.2, 1.2, 1.2] : [1, 1, 1] }),
  });

  const linkedin = useLoader(THREE.TextureLoader, '/linkedinF.png');
  const github = useLoader(THREE.TextureLoader, '/githubF.png');
  const twitter = useLoader(THREE.TextureLoader, '/twitterF.png');

  return (
    <a.mesh {...spring} {...bind()} castShadow>
      <boxBufferGeometry attach='geometry' args={[1, 1, 1]} />
      <meshStandardMaterial map={twitter} attachArray='material' />
      <meshStandardMaterial map={linkedin} attachArray='material' />
      <meshStandardMaterial map={github} attachArray='material' />
      <meshStandardMaterial map={linkedin} attachArray='material' />
      <meshStandardMaterial map={github} attachArray='material' />
      <meshStandardMaterial map={twitter} attachArray='material' />
    </a.mesh>
  );
};

What I'm trying to accomplish would be something in those lines, I guess :

 return (
    <a.mesh {...spring} {...bind()} castShadow>
      <boxBufferGeometry attach='geometry' args={[1, 1, 1]} />
      <meshStandardMaterial
              map={github}
              attachArray='material'
              onDoubleClick={() => {
                window.open('http://github.com', '_blank');
              }}
       />
      <meshStandardMaterial
              map={twitter}
              attachArray='material'
              onDoubleClick={() => {
                window.open('http://twitter.com', '_blank');
              }}
       />
       . . .  

So when the user clicks in the corresponding logo/cube face they get redirected to the corresponding destination.

Is there a way to bind an onDoubleClick to the meshStandardMaterial and have it pass to the a.mesh? Or even another way that I can achieve that same effect?

[drcmda]

materials cannot have event listeners because they do not have any geometry for the raycaster to pierce, but the event data gives you clues as to which face was hit (event.faceIndex). see https://codesandbox.io/s/viewcube-py4db

[nandoolle]

Thank you.