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.

Teapot Heater Tutorial

Home Forums General Questions Teapot Heater Tutorial

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #11722
    Michael Findley
    Participant

    Teapot Heater says “with different DCC tools to allow for a complete code-less workflow. No single line of code was used to develop this web application!” Where can I find tutorials? I especially need help with combining the blender scene exported as .gltf with some form of a html text file over top to make an assembled app. It seems that nothing will combine the two files. I just have the html text in one file and gltf in another file.

    #11740
    #11757
    Michael Findley
    Participant

    That tutorial does not produce an assembled app. The blend scene, the exported gltf file and the html text available as an overlay are available as separate files in the app manager, but I have not been able to do anything which combines them. Clicking the world button only saves them as separate files.

    #11774

    Verge3D app HTML file is combined with the overlay HTML if the latter contains an iframe element with its src attribute pointing to the Verge3D app HTML file. Have you managed to add the iframe element? What tool did you choose to work with (Google Web Designer, Webflow, text editor)?

    Chief 3D Verger | LinkedIn | Twitter

    #11862
    MCFindley
    Participant

    Hello. I am Mary Findley. My husband Michael and I have both been working to learn the use of Blender + Verge 3D + a web app to in the future create book/video combo projects, but are currently still working with free versions as we learn prior to producing anything. I apologize for the confusion between emails but he said it would be clearer if I respond with my email.

    Below is what I am responding to.

    Yuri Kovelenov wrote:

    Verge3D app HTML file is combined with the overlay HTML if the latter contains an iframe element with its src attribute pointing to the Verge3D app HTML file. Have you managed to add the iframe element? What tool did you choose to work with (Google Web Designer, Webflow, text editor)?

    Post Link: https://www.soft8soft.com/topic/teapot-heater-tutorial/#post-11774

    I was using Google Web designer and following the Teapot Heater tutorial. I got the iframe element in place and expanded and got the first command “Hide” placed but I never got Verge3D to show a new blue icon as it says here :

    “The new .html file immediately starts being displayed as an extra blue icon in the App Manager. You can run it to check if it actually loads the Verge3D app.”

    I believe I followed the steps correctly so not sure what to do now. Thanks for any help.

    Mary Findley

    #11881

    Hi Mary,

    The App Manager shows all html files found in the application folder as blue icons. Try to refresh the App Manager page. Please also check if you exported from GWD to a correct folder: verge3d/applications/your_app_folder.

    Chief 3D Verger | LinkedIn | Twitter

    #11905
    MCFindley
    Participant

    Thank you. I guess my problem arises with the statement referring to the creation of the Google Web Designer part of the project as follows: “Location (use any path, preferably, out of your app folder to avoid confusion with the published version).” But this leaves me not knowing where this SHOULD be located. Just anywhere? And then, I am honestly not sure where the actual “app folder” is or should be. When/where was that created? How will the GWD file that is not supposed to be in the app folder become connected to the app?

    #11910

    I think I understand now. Google Web Designer’s save files are in .html format. These files, however, are not optimized for use in production. So those are recommended to keep out of Verge3D application folder.

    On the other hand, for use in production, GWD offers the export option. Exported files are also in .html format, but this time they are minified/optimized and free from any non-relevant data. These you should place to the Verge3D app folder (or directly export them from GWD to Verge3D app folder).

    Verge3D applications are stored in the verge3d/applications folder. The name of a Verge3D application corresponds to the name of the folder. So if you created “My Awesome App” in the app Manager, it will create a folder called “my_awesome_app” in verge3d/applications. The app folder stores all files related to the app, including the .html and other files that you export from GWD. Hope this makes sense.

    Chief 3D Verger | LinkedIn | Twitter

    #11938

    Just recorded a tutorial on GWD

    Chief 3D Verger | LinkedIn | Twitter

    #17903
    alphakanal
    Participant

    Would be awesome if you can make an tutorial about the whole “teapot heater demo” – it would be very useful to see how the animations ( camera-change, rotating etc. ) are made ( in blender or verge3D ? ) and how they are triggered by the interface/buttons :good:

    #17905

    It’s little bit old and there’s can be found another better ways to do the same app, because we move a lot further in development from that moment. Waht kind of questions do you have about this demo, may be we’ll make more tutorials that expain all this features more commonly. Please make a list of questions you want to know about this demo with more discribtion.

    Co-founder and lead graphics specialist at Soft8Soft.

    #17906
    alphakanal
    Participant

    Hi,
    for example the camera movements by clicking on the 4 windows buttons ( clock, steam gears, gas ) are this 4 cameras placed in blender and the transition-logic is made in verge3D ?
    Or how is the Maincamera and it’s logic to orbit around the teapot and zoom in & out created in general ?
    Sorry for maybe stupid questions – but i just found out about verge3d yesterday :)

    #17909

    In fact all this quastions are basic and not related to the Teapot Heater demo. Have you watched Basic tutorials from our Youtube channel?

    Co-founder and lead graphics specialist at Soft8Soft.

    #17911
    alphakanal
    Participant

    Not yet – but i will, thank you :good:
    Is there a specific tutorial about this topic “camera controls” ?

    #17914

    Is there a specific tutorial about this topic “camera controls” ?

    Yes, this video must help.

    Co-founder and lead graphics specialist at Soft8Soft.

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