- This topic has 6 replies, 4 voices, and was last updated 1 year, 5 months ago by
.
-
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.
Attachments:
Wellcome 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.
Thanks @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 reply to this topic.