We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Customizable Annotations with Close Button

Home Forums Tutorials Customizable Annotations with Close Button

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #71606
    John Sperry
    Customer

    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.

    CLICK HERE

    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 9 months, 1 week ago by John Sperry.
    • This topic was modified 9 months, 1 week ago by John Sperry.
    • This topic was modified 9 months, 1 week ago by John Sperry.
    Attachments:
    You must be logged in to view attached files.
    #71612

    looks good! :good:

    Chief 3D Verger | LinkedIn | Twitter

    #71615
    John Sperry
    Customer

    Thanks!

    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 9 months, 1 week ago by John Sperry.
    #71627
    kdv
    Participant

    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.

    #71628
    John Sperry
    Customer

    :good:

    #71746
    visualizer
    Customer

    Tiny but helpful & productive utility.

    #71950
    John Sperry
    Customer

    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.

    CLICK HERE

    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:5c61f8a294/RECC%20Stampede%20Preloader%20Fix%2003-20-2024/RECC%20Stampede.html

    Attachments:
    You must be logged in to view attached files.
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.