Outline Stroke and Fill Hotspots
August 3, 2020 12:00 AM
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?
undefined
Discussion (4)
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.
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?
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.
undefined
The equirectangular image is quite stretched away from the center point.
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.
Discussions have been disabled for this post