Building HTML-Based User Interfaces for 3D Web Apps

Tagged: Html, webflow

This topic has 16 replies, 8 voices, and was last updated 4 years, 5 months ago by Ivan Lyubovnikov.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
2020-01-15 at 1:41 pm #22848

Alexander Kovelenov
Staff

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:

Soft8Soft Tech Chief
X | FB | LinkedIn

2020-01-15 at 5:29 pm #22860

brian.kumanchik
Customer

Awesome!

2020-01-16 at 6:53 am #22874

Yuri Kovelenov
Staff

thanks! :)

Chief 3D Verger | LinkedIn | Twitter

2020-02-02 at 5:43 am #23169

3dkeshaw
Participant

thanks alot

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

2020-02-13 at 4:29 pm #23539

mashud008
Customer

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.

2020-02-14 at 7:06 am #23556

Yuri Kovelenov
Staff

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

Chief 3D Verger | LinkedIn | Twitter

2020-04-24 at 5:05 pm #26561

huch
Participant

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

2020-04-25 at 10:37 am #26587

Yuri Kovelenov
Staff

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.

Chief 3D Verger | LinkedIn | Twitter

2020-04-25 at 7:31 pm #26615

huch
Participant

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.

2020-04-25 at 8:51 pm #26625

huch
Participant

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!

:)

2020-04-26 at 12:02 pm #26652

Yuri Kovelenov
Staff

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

Chief 3D Verger | LinkedIn | Twitter

2020-04-26 at 1:26 pm #26656

huch
Participant

good idear
thank you!
:)

2020-04-26 at 2:50 pm #26657

huch
Participant

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.

2020-04-26 at 5:19 pm #26664

huch
Participant

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).

2020-04-27 at 9:55 am #26708

Yuri Kovelenov
Staff

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

Digital Agencies and Freelancers using Verge3D

Chief 3D Verger | LinkedIn | Twitter
Author

Posts