custom annotation is 'floating'

Home Forums Programming custom annotation is 'floating'

This topic contains 3 replies, has 2 voices, and was last updated by Yuri Kovelenov Yuri Kovelenov 3 weeks, 6 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20169
    Avatar
    nikpetrov
    Newbie

    Hello, please help, I tried everything I could.

    My client asked me to make animated annotations: when a user hover over it, it starts to pulse slightly changing its opacity and size. I tried everything regards the original ADD ANNOTATE puzzle, but after a lot of testing I found that it’s just impossible to change the original puzzles based annotation’s style, it can’t pulse changing opacity when hovered.

    I defined my custom annotation in the index.html with the following code:

    Then I hooked it up on an empty in Blender with help of the BIND puzzle:

    Then I define the annotation style in my mycustom.css file:

    It works good only when the camera is near the object:

    (when the mouse is hovered it start pulsing

    When a user hover mouse over an annotation, index.html calls my custom function from mycustom.js file

    The core of the problem is: when I’m moving the camera around or zooming it, ANNOTATIONS START RANDOMLY FLOATING AROUND, without actually being fixed on the object.
    Please help, it seems that your original “add annotate” get it’s position fixed on the object quite well and don’t “float” in the space. How could I attach my pulsing design and functionality to the original “add annotate” puzzle? Or how could I hard fix my own custom annotation with the empties without that floating? Here is a video with more detailed description of the problem: https://yadi.sk/i/oz0X7ACZV8dqPQ

    Thanks in advance !

    #20273
    Yuri Kovelenov
    Yuri Kovelenov
    Developer

    Hi,

    can you create a simpler example, say, with cubes, and attach it here for us to look into? great app btw :good:

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #20314
    Avatar
    nikpetrov
    Newbie

    Hi Yuri and hi everyone,

    I’m glad to say I found a solution by myself… I added some new css here in index.html,
    it was:

    NOW:

    In other words, I added position: absolute to the annotation div. Hope it helps someone. Cheers – N

    • This reply was modified 3 weeks, 6 days ago by Avatar nikpetrov.
    #20320
    Yuri Kovelenov
    Yuri Kovelenov
    Developer

    great you worked it out and thanks for sharing the solution! :good:

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.