Tagged: annotation, Close Button, Custom Annotation
- This topic has 6 replies, 4 voices, and was last updated 1 year ago by
John Sperry.
-
AuthorPosts
-
2024-03-15 at 2:50 pm #71606
John Sperry
CustomerI Love Verge 3D’s annotation puzzles but they didn’t give me the flexibility I needed for a project, so I developed my own setup. Here is a link to a demo to showcase it.
The setup is divided into (3) parts.
1) The Annotation – The white circle annotation shows up on the cube (3) second after the model loads, this is adjustable, it has a Z-index 10.
2) The Annoation Content – A pop up with content for the annotation appears, Z-index 20.
3) The Close Button – At the same time, a red circle “close button” appears on top of everything, Z-index 30, this button can easily be repositioned by adjusting the margin-left and margin-top values. An SVG icon can be added if you want as the background-image.
This example shows the puzzle pieces needed to create one annotation, but you can create more if you want, just duplicate the puzzles and rename the ID’s appropriately for each new annotation.
Everything is customizeable. I hope this is helpful, it was hard to find a lot of documentation about this.
I’ll attach some reference images. If anyone has questions I can help.
-
This topic was modified 1 year ago by
John Sperry.
-
This topic was modified 1 year ago by
John Sperry.
-
This topic was modified 1 year ago by
John Sperry.
Attachments:
You must be logged in to view attached files.2024-03-15 at 2:58 pm #71612Yuri Kovelenov
Staff2024-03-15 at 3:05 pm #71615John Sperry
CustomerThanks!
The new preloader function you added, where you just have to upload your SVG, is amazing by the way! Saves soooooo much time and effort.
-
This reply was modified 1 year ago by
John Sperry.
2024-03-16 at 9:53 pm #71627kdv
ParticipantWellcome to the world of CSS
Puzzles and JS coding. Fast and expensive.
If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2024-03-16 at 9:54 pm #71628John Sperry
Customer2024-03-19 at 8:15 am #71746visualizer
CustomerTiny but helpful & productive utility.
2024-03-27 at 3:54 am #71950John Sperry
CustomerThanks @visualizer
Here is the real world application for the custom annotations.
I used Verge 3D to create an event map that highlights points of focus for a National Stampede happening this fall.
Attachments:
You must be logged in to view attached files. -
This topic was modified 1 year ago by
-
AuthorPosts
- You must be logged in to reply to this topic.