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.

Building HTML-Based User Interfaces for 3D Web Apps

Home Forums Tutorials Building HTML-Based User Interfaces for 3D Web Apps

Tagged: ,

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #22848

    Two new tutorials on creating HTML layouts for Verge3D applications have been released. The first deals with the general principles of creating an interface using HTML / CSS. The second describes the practical use of the Webflow editor in real-world applications.

    Watch both videos on our YouTube channel:

    Co-founder and CTO at Soft8Soft
    FB | Twitter | VK

    #22860

    Awesome! :good:

    #22874
    Yuri KovelenovYuri Kovelenov
    Developer

    thanks! :)

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

    #23169
    3dkeshaw3dkeshaw
    Newbie

    thanks alot

    DESIGNER / Sr. 3D ARTIST / Houdini Fx TD
    www.3dkeshaw.com
    Skype - k4keshaw
    India - +919993182033

    #23539
    Avatarmashud008
    Licensee

    How to show or hide another button? As example, When I click the Show button then the material Button (slot) slide or show/hide in Html page interface.

    #23556
    Yuri KovelenovYuri Kovelenov
    Developer

    An HTML element can be hidden with the set style puzzle:
    visibility > hidden

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

    #26561
    Avatarhuch
    Newbie

    add annotation node


    @yuri

    thanks for that wonderfull tool!

    i browsed through the faq´s but couldn´t find an answer to my problem (sorry i am a newbie to this)

    i want to use the “add annotation” node in puzzles to pin the annotation of a user thread (for example the user thread of an user account with a specific comment like:
    https://www.soft8soft.com/topic/building-html-based-user-interfaces-for-3d-web-apps/)

    to the geometrie as in input to be stored at this annotation note,

    example
    http://3ddesign.ddns.net/verge3d/Test/Test.html

    how do i go about to conect the “add annotation” in a way that the linked user input shos up in the text box “Info or thread text input of user”

    thanks for anny advice in advance!

    kind regards

    huch

    • This reply was modified 2 months, 1 week ago by Avatarhuch.
    #26587
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    you could use an iframe element which is referring to your forum thread. Then just put the html code for this iframe element as annotation description. You can even show youtube videos inside an annotation this way.

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

    #26615
    Avatarhuch
    Newbie

    wow!
    thanks for the quick answer!

    i tried to recreate what i understood from youre description.

    “it sort of worked” allthough i am not sure if i did it right because first of all it only worked lokally (http://localhost:8668/applications/Test/index.html) wenn clicked the index file in the Verge3D App Manager (as the first picture attached below shows). With the exception that the link was not click able.

    How ever wenn I copied the folder onto my server and accessed the file there
    it showed the former version (as the second picture attached below shows).
    I deleted older versions on the server and also did so lokaly. i closed blender. i restarded the Verge3D App Manager. it did not have anny effect. it still did not change the results.

    • This reply was modified 2 months, 1 week ago by Avatarhuch.
    Attachments:
    You must be logged in to view attached files.
    #26625
    Avatarhuch
    Newbie

    Thanks for the quick answer!

    sorry might have posted the same reply twice (cause it didn´t show until now)

    how ever now it “sort of” worked (what did not as described in the reply before which did not show up in the thread here … how ever)

    http://3ddesign.ddns.net/verge3d/test_02/index.html
    i guess the reason for this was that i created a new App folder with a new name in the Verge3D App Manager.
    i pasted the link in the annotation node which is not exactly what was described i guess, so that might be the reason why its not clicable.

    i have to get a better understandig on how one does iframes an how to trigger them with puzzles.

    but how ever my final goal would be to end up with an interface wich allows a user to click any where on to a geometrie an leave a annotation which then permanently would be stored there.

    anny idears are welcome.

    thanks so far for all!

    :)

    • This reply was modified 2 months, 1 week ago by Avatarhuch.
    #26652
    Yuri KovelenovYuri Kovelenov
    Developer

    see some usage info here
    https://www.w3schools.com/tags/tag_iframe.asp

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

    #26656
    Avatarhuch
    Newbie

    good idear
    thank you!
    :)

    #26657
    Avatarhuch
    Newbie

    here is my result ;)
    http://3ddesign.ddns.net/verge3d/test_iframe/index.html

    some how the cube “hangs” now if turned (temporariy performense glitch? or bad coding on my behalf?)

    iss there a way in puzzles or some how else to conect user input to a
    individual spot of an geometry.

    for example it would be nice if the user could click anywhere onto the geometrie (maybe by “raycast detection” or what ever position dedection of the mouse) and the user content (iframe_content) input would be available when the mouse is hovered over the “users geometrie input position”.

    thanks for youré quick replys!

    kind regards
    h.

    • This reply was modified 2 months, 1 week ago by Avatarhuch.
    #26664
    Avatarhuch
    Newbie

    webgl user text input

    in found some thing which claims to do the job concernig the part of inputting
    user data into a text field
    https://github.com/azerion/phaser-input
    but due to total lack of experience i am not able to judge if its worth while trying
    to wrap my head arround learning how this would be put in use (and then it is a plugin maintained by a third party).

    :unsure:

    #26708
    Yuri KovelenovYuri Kovelenov
    Developer

    if you have difficulties with web development, you could consider asking some Verge3D gurus for help

    Digital Agencies and Freelancers using Verge3D

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.