How to do Highlighting Effect the way Van.com has done? (Mine retains the value in mesh)

Questions
1

I tried doing it with emissive color of mesh, and I was storing the previous color in mesh UserData so After highlight I can return to original value.

This is How I am doing right now using Gsap.

  private highlightMesh = (mesh) => {
      mesh.userData.emissive = mesh.material.emissive;
      mesh.userData.emissiveIntensity = mesh.material.emissiveIntensity;

      const t1 = gsap.timeline({
        onComplete: () => {},
        onUpdate: () => {},
      });
      t1.to(mesh.material.emissive, {
        r: 1.0,
        g: 0.0,
        b: 0.0,
        duration: 0.1,
      })
        .to(mesh.material, {
          emissiveIntensity: 1.0,
        })
        .to(mesh.material.emissive, {
          r: mesh.userData.emissive.r ? mesh.userData.emissive.r : 0,
          g: mesh.userData.emissive.g ? mesh.userData.emissive.g : 0,
          b: mesh.userData.emissive.b ? mesh.userData.emissive.b : 0,
          duration: 0.1,
        })
        .to(mesh.material, {
          emissiveIntensity: mesh.userData.emissiveIntensity,
        });
  };

The issue is, it works good on PC but on Mobile it retains the highlight color as shown below

original Mesh
image

after selection and performing the highlight
image

It does not happen in this vans shoe website and I don’t think they are even doing with emissive color they are doing most probably the color.

thankyou,
Seeon

1 Like
2

I think you’re right, that they are manipulating the colour rather than using emissive.
Just register the current colour, then do your highlighting and then return to the original colour.

No idea why this work not work equally well on mobile. Do you debug on mobile? Chrome has told for this connecting your phone via USB.

Good luck!

1 Like
3

Its was the issue with my code … so on mobile device we have touchEvent and on PC we use mouseEvent … In my case for mobile and tablet I added both event touch and click so the function was running twice … which resulted in storing the color value in mesh.

also moved from Emissiive color to color props…here is the simple code.

if (mesh) {
      let color = mesh.material.color;
      const t1 = gsap.timeline({
        onComplete: () => {},
      });
      t1.to(mesh.material.color, {
        r: 1.0,
        g: 0.0,
        b: 0.0,
        duration: 0.5,
      })
        .to(mesh.material.color, {
          r: color.r ? color.r : 1,
          g: color.g ? color.g : 1,
          b: color.b ? color.b : 1,
          duration: 0.5,
        });
    }

and Now they are working exactly the way I wanted.