Outline Stroke and Fill Hotspots

hvaughan-2540
hvaughan-2540 Community Member Posts: 155 ✶ Headliner ✶
Does anyone have any tips on how to create outlined object hotspots. I want to copy the style used in 'The Busy Timber Yard' CenarioVR example, their fork lift trucks have clickable outlined hotspots: https://cenariovr.com/app/#/view/3u8

I have Adobe Photoshop so can use the paths tool to draw an outline of each item and then add as hotspots with opaque hover states but what is the exact process, I can't seem to get the angles / sizes right?

 

Comments

  • t_johnb
    t_johnb [email protected] Community Member Posts: 295 ☆ Roadie ☆
    I can't comment on the process, but it looks like the outline itself is baked into the video scene, and the "yellow blur" over the forklift is a semi transparent PNG hotspot.

    Seems like it would have been easier to put the outline as a part of the PNG, but perhaps it was easier to line it up?
  • hvaughan-2540
    hvaughan-2540 Community Member Posts: 155 ✶ Headliner ✶
    I've had mixed results. I open the 360 image and trace the scene object using a new path. I make a new layer and make a selection of the path and create a stroke. I create another new layer and apply a fill with opacity of 40%. I crop the image and save as a transparent PNG, one for the stroke and one for the fill. I import into CenarioVR (as hotspot and image) and scale and line up.

    Even though I did a prefect trace in Photoshop, in CenarioVR its not quite right, I'm having to adjust the path which although looks wrong in Photoshop, displays almost correctly in CenarioVR.
  • t_johnb
    t_johnb [email protected] Community Member Posts: 295 ☆ Roadie ☆
    I would think you would need to start with the equirectangular image already spherical, so if you put the 360 image in CVR, center the object in the field of view, then screen shot it in CVR, then do your outlining, I would think it would give you a better result.

     

    The equirectangular image is quite stretched away from the center point.
  • hvaughan-2540
    hvaughan-2540 Community Member Posts: 155 ✶ Headliner ✶
    Thanks John, I think you've cracked it. Quick tip, after taking the screenshot of the CenarioVR scene object, don't move the scene, that way when you import the outline image its in the exact right place.