Tagged: annotation, Close Button, Custom Annotation
- This topic has 6 replies, 4 voices, and was last updated 6 months, 2 weeks ago by John Sperry.
-
AuthorPosts
-
2024-03-15 at 2:50 pm #71606John SperryCustomer
I 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 6 months, 3 weeks ago by John Sperry.
- This topic was modified 6 months, 3 weeks ago by John Sperry.
- This topic was modified 6 months, 3 weeks ago by John Sperry.
Attachments:
You must be logged in to view attached files.2024-03-15 at 2:58 pm #71612Yuri KovelenovStaff2024-03-15 at 3:05 pm #71615John SperryCustomerThanks!
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 6 months, 3 weeks ago by John Sperry.
2024-03-16 at 9:53 pm #71627kdvParticipantWellcome 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 SperryCustomer2024-03-19 at 8:15 am #71746visualizerCustomerTiny but helpful & productive utility.
2024-03-27 at 3:54 am #71950John SperryCustomerThanks @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. -
AuthorPosts
- You must be logged in to reply to this topic.