Teapot Heater Tutorial

This topic has 15 replies, 6 voices, and was last updated 1 month, 4 weeks ago by seewhatyouthink.

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

1 2 →

Author

Posts
2019-02-23 at 11:14 pm #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.

2019-02-24 at 9:23 am #11740

Yuri Kovelenov
Staff

Hi,

Please take a look at this tutorial: https://www.soft8soft.com/docs/manual/en/introduction/HTML-based-user-interfaces.html#Quick_Overview_Teapot_Heater

Chief 3D Verger | LinkedIn | Twitter

2019-02-24 at 2:38 pm #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.

2019-02-25 at 7:57 am #11774

Yuri Kovelenov
Staff

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

2019-02-26 at 11:43 pm #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

2019-02-27 at 2:02 pm #11881

Yuri Kovelenov
Staff

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

2019-02-27 at 10:38 pm #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?

2019-02-28 at 8:01 am #11910

Yuri Kovelenov
Staff

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

2019-02-28 at 1:39 pm #11938

Yuri Kovelenov
Staff

Just recorded a tutorial on GWD

Chief 3D Verger | LinkedIn | Twitter

2019-08-16 at 10:47 am #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

2019-08-16 at 11:13 am #17905

Mikhail Luzyanin
Staff

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.

2019-08-16 at 11:30 am #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 :)

2019-08-16 at 11:35 am #17909

Mikhail Luzyanin
Staff

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.

2019-08-16 at 11:43 am #17911

alphakanal
Participant

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

2019-08-16 at 12:26 pm #17914

Mikhail Luzyanin
Staff

alphakanal wrote:

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

Yes, this video must help.

Co-founder and lead graphics specialist at Soft8Soft.
Author

Posts