How To Create 3D Interactive Web Experiences in Blender 2.80 & Verge3D

Learn the process of creating an interactive 3d scene using Blender 2.80 (beta) and Verge 3D.
Text version: www.cgbookcase.com/learn/how-...
Get Verge 3D 5% off: www.soft8soft.com/get-verge3d... (use code 'dorianzgraggen' at checkout)
CONTENT:
0:58 Modeling
-- 1:10 Floor, walls, ceiling
-- 2:05 Windows, door
-- 2:25 Furniture
-- 4:39 Kitchen
6:29 Lighting and baking
-- 6:48 UV Unwrapping
-- 7:42 Baking
-- 9:33 Denoising
10:21 Setting up a Verge 3D project
-- 10:47 Installing Verge 3D
-- 11:22 Creating a Verge 3D project
-- 12:39 Appending the scene
12: 47 Creating the materials
-- 13:08 Import the baked lighting
-- 14:14 Adding colour to a material
-- 14:43 Adding a texture to the material
17:02 Making it interactive
-- 17:23 Introduction to the Puzzles editor
-- 18:34 Outline effect when hovering over an object
-- 20:15 Making the camera fly to an object when it is clicked
21:28 User interface & Making it interactive II
-- 22:14 HTML elements and CSS styling
-- 23:27 Showing only the corresponding HTML elements when clicking a 3d object
-- 24:34 Making the buttons to switch materials work
-- 27:19 Colour adjustments
Free Textures / HDRIs:
cgbookcase.com (my site)
cc0textures.com
hdrihaven.com
Social Media:
/ dorianzgraggen
/ dorianzgraggen

[@activemotionpictures]

Marvelous details! Thank you so much!

[@luckyhappy65]

Oh my god! Your tutorial is so great and I have read your documentary which is very detailed and professional. Thank you so much for your great effort!

[@kwynintelligence435]

Great tutorial, covers lot's of stuff in short time ... and ... some very good hints on technic

[@rorymayne2190]

So great! Thanks for sharing your knowledge.

[@carolineito9312]

Maaaaan I wasn’t expecting to learn so many good tips like the .3ds importing/optimizing one! This is great, thank you thank you!!!!

[@TopperDillon]

Thanks a lot for sharing your knowledge mate! Awesome tutorial, very concise and super helpful!

[@jurgenvantomme]

Thank you for this tutorial Dorian. You made a really good tutorial.

[@arthdano5039]

Nice tutorial. I just discovered your free textures website, thank you!

[@3DGraphicsFun]

Very nice tutorial. Thank You.

[@dorianzgraggen]

Thanks :D I'm glad you like it.

[@buttibu]

very good tutorial, thanks

[@learnwithindra2037]

Beautiful!!!!! Many Thanks

[@brennt502]

Great work! :)

[@oalfernandes]

Wow! You are the best! Thanks from Brasil!

[@user-mk2ey5pg9u]

That's such a great tutorial!

[@dorianzgraggen]

thanks :)

[@alegronontropo]

Well done. Thank you. Great tutorial

[@alexkowel]

Indeed!

[@nirubansatchithanandakumar3266]

thank you so much! i was watching this back and forth, scrubbing through and stopping at really important places. I was trying to do a similiar operation and I realised using evee just didn't have that oomph, and obviously photorealism is not something i could have achieved with evee out of the box.. till now that is :)

[@dorianzgraggen]

Glad you like it :)

[@englishgroup2973]

shout out from indonesia, big thanks

[@ganapathym3664]

Thank you genious

[@svgsprite4942]

Hi, Dorian. I just found your website. It's amazing!

[@dorianzgraggen]

thanks :)

[@huatv2348]

good job

[@hstd]

Thank you!

[@smile7335]

COOL~!THANKS

[@bobz637]

Hi there. Is it possible to have this level of interaction with some elements and also have like a 360 panorama when click and drag with the mouse? I'm understanding that this example can only jump from one position (item) to other with no freedom in the camera. This tutorial is super nice, thanks for your effort, keep going.

[@asterion2499]

I just did a project for my homework that's optimized for Cycles but found out it needs to be interactable, the deadline is tomorrow & this saved my ass.

[@anniesnowy]

Is it possible to set Verge3D events/actions on the faces (I guess I found only 'object' option)?

[@archcast5550]

hi dorian recatngular light is now enabled... im tired of baking..... nice tutorials.i hope screen space reflections is implemented soon.

[@jonathanhutchinson5649]

The one thing so far that is confusing with Verge3D, is the purpose of the blender scene. You re - export the gltf, but does it matter if the blender scene is not also saved? Can the scene in fact be deleted? Are they dependent?

[@Soft8Soft]

Great job! Could the HTML puzzles be used to manipulate the UI?

[@dorianzgraggen]

Yes, I think you're right. I could have used the 'event of ...' block and the 'set style...' block for that. Thanks for pointing it out :)

[@JBetbe]

Yeah, you've done a really good job!!! It's the best tutorial ever I've seen from Verge3D. Thanks!

[@dorianzgraggen]

@@JBetbe Thanks!

[@ubilrodriguezarrascue]

Excuse me, how can I export my project to verge3D, because the drawing is incomplete?

[@buttibu]

I have a question. You made your shadow texture from all objects together. How do you implement that textures to particular materials and objects after that?

[@dorianzgraggen]

After baking, I separated the objects. Since that doesn't change the UVs, you can just add the baked image like you normally would.

[@rana-3d]

Can my client ask for work? Which file should I send to the client? How to publish this WebGL file on any other website

[@craighallway5964]

How did you create the side canvas?

[@FrogFraction]

I've tried making something similar in unreal engine and it sort of worked but i was worried about the size and performance of the project being too much for a browser. I'll give this a shot. Do you think there is money to be made doing these kind of projects for companies?

[@dorianzgraggen]

I don't think companies are interested in a scene like the one in the video, but I think product configurators and product demos could be a thing.

[@GeoffCoope]

Is this uploaded anywhere so we can look at it running and examine all the CSS etc? Thanks.

[@dorianzgraggen]

It now is linked on the post in the info section: www.cgbookcase.com/tutorials/how-to-create-3d-interactive-web-experiences-in-blender-verge-3d

[@JeffLu-garden]

Hi, I just downloaded Verge3d for Blender to follow along but there seems to be missing some options in the UI.

[@dorianzgraggen]

Which options are you missing?

[@pagarralam9219]

Can u show me to creat room scane like Google street view on blender...please.

[@ubilrodriguezarrascue]

verge3D can be programmed with the python language? or is it just javascript?

[@alexkowel]

It's both actually. Python is used to convert Blender assets to glTF, while JavaScript is to run 3D rendering in the browser.

[@vivektrivedi8086]

how to enable outline in 3ds max

[@rana-3d]

I'm facing a problem , please can you help me

[@redabeg]

There is no link for downloading the project.

[@dorianzgraggen]

Now there is one on the post on cgbookcase.com. Forgot to link it :)

[@bradsolarge3491]

What the best way to connect with you. I need to hire you for a job asap. Thanks.

[@dorianzgraggen]

via email: [e-mail]

[@eliut6855]

Hello, have you ever tried blend4web? Nice tutorial, thanks

[@eliut6855]

Or unity?

[@dorianzgraggen]

​@@eliut6855 Thanks :) No, I haven't, but I'm learning three.js.

[@CstfanTube]

​@@dorianzgraggen First at all, thank you very much for this tutorial. Otherwise, I'm learning BabylonJS, before I use Blend4Web, but it's dead now because the developers are getting out to create Verge 3D :-(

[@sansdomicileconnu]

@@CstfanTube blend4web is finished?

[@CstfanTube]

@@sansdomicileconnu May be not: www.blend4web.com/en/community/article/416/

[@renzviana6591]

can i publish the site is it possible

[@Soft8Soft]

You can publish Verge3D apps on your own website, as they are self-hosted. Still, if you don't have a website, you can publish your apps on Verge3D Network.

[@rana-3d]

This video is too small, please explain more

[@ivanpergasi2]

Oh boy you lost me at 23 spare minutes... damn it I almost got it.... However it's january 2021 I hope there is an easier way to do it... because the functionality is very promising but all the process of obtaining it is definitely NOT time cost affordable.... I'm talking about a commercial use of it in a website with multiple color assignment and multiple object changing... Your way is a way but definitely the results don't pay the effort....sorry man just being honest and productivity oriented

[@RicardoPerez-gt1vh]

my client need that when select all different material can get a price, you can do that, how can I, contract you

[@alexkowel]

If Dorian is not available, you might seek for help on the Verge3D forums.