Highlighting elements

Can anyone point me in the right direction on what scripts I could use to highlight an object?

I’m working on a gallery scene, to which I would like to add a search option. So basically, we would start with an orbit scene, I would search for a person’s name and if it exists on the list and the user selects it, the booth of the artist would be highlighted. If clicked, that would take us to a view in front of the booth.

I’m thinking I could have an array with all the detailed views, and I could easily do an ajax function to search this array, but I’m not sure how to trigger a highlighted effect of the booth if there is a result.

1 Like

Materials, not objects, are responsible for all visual effects. I imagine your booth is composed of many different objects having many materials, so to highlight you would need to modify all these materials and make sure the materials are unique to each booth (so only one booth is highlighed).

How about the following approach:

  • Enclose each booth withing some artificial object.
  • Cover these artificial objects with materials unique to each booth (say Booth1Material, Booth2Material, etc).
  • By default make booth materials fully transparent.
  • In the Objects tab, disable the collisions for these artificial objects so it is possible to walk through them.
  • To highlight the booth, find its material using the findMaterial function (see: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.). Increase the opacity property to say 0.7, so the enclosing object becomes visible and then gradually decrease it back to 0.0.
1 Like

Excellent approach @jan , but how to link the action to a list?

@jorgearq my understanding is that @jonalex has a custom UI that allows to search for names and is able to detect when a user chooses one of the names.

I haven’t fully step into that part of my project yet, but the high level approach is to:

  • while still working in my 3D editor, I’m planning on creating a material that is composed as {booth owner's name}-highlight, for each booth. This material will be attached to a mesh that will be at the floor of the actual booth and styled to help highlight the booth.
  • After import into Shapespark, I’ll make sure that material is transparent for all booths.
  • on my index.html, I plan to generate an array of names that corresponds to all the names on the booths.
  • I will also create an input field that will be linked to a jQuery script that will listen to this field and search anything that’s put in it against our array. Once the user selects a result, my function highlightBooth(string) will be called.
  • highlight Booth(str) receives a string and does a findMaterial(str + '-highlight') where it concats those values to find the material.
  • once we can select the material, my plan is just to play with its opacity.

This is just a visual cue. If a user taps on the booth, I’ll already have standard Shapespark logic to change to that view.

I might also have to add a function that listens to viewChange in order to change all those materials back to their transparent state.

2 Likes