EASILY EXTEND YOUR 3D TO THE WEB WITH BLENDER!😍

hey what's up guys and welcome back to ask enki today we're looking at an amazing piece of software and this is veg 3d 3.4 the most recent installment from the guys at soft8soft and it is a powerful and intuitive toolkit that allows maya blender and 3d studio max artist to create some very impressive and lovely web-based experiences so in case you want to take your portfolio you want to engage some audience and you want to create some very nice explainer or e-learning content for the internet and you want to just simply create this without any technical skills or probably without any coding skills then you can get things up and running we're going to take a look at how you can get started all of the issues you may probably fall into and how you can fix that and of course if you're very excited to learn something pretty cool today then simply go over to the link in the description and get a free copy so that we can get started so first things first we're going to dive directly into blender and see how we can get started with this with blender simply open right here what you need to do is once you download this tool you need to go over to edit go over to preference go over to your add-ons and install that now once that is done you will notice you have two buttons here a sneak peek and an app manager let's talk about the app manager so with the app manager you can literally manage your apps right there so there are a couple of things that you'll notice these are projects that we already have within the app manager and you notice that we have a couple of buttons here this is for you to preview what you have online so you can run the app directly from there you can preview your scene you can open the blender file you can go over to puzzles open the folder that you have your project saved in upload this to the web so in case you want to preview this you want to share this with your audience or you want to simply get this going this is going to be uploaded to the veg 3d network right here is where you're going to update and finally you can delete that project from there so with this set if we jump over to blender we can start seeing how some of these things come together so directly here in blender if you simply select any of this and click on sneak peek you will be able to preview these automatically online so this is basically what it does once you click on sneak peek you can preview these you have nothing to do you know there is no setup nothing whatsoever but then if you like to get this to work as an app of course you need to go over to your app manager and within your app manager you can click on create new app you type in the name keep everything the way they are click on ok and then you're good to go now once that is done we are going to simply file blender one more time and what we're going to do is create the scene that we want and once we're done creating that beautiful scene which comprises of some crates and also you know some pretty cool cylinders we're also going to drip some clothes around just to get something going within our scene and once that is done we're changing the lights and getting everything that we want we can now simply go over to file and export this as gltf and of course if you're wondering how do you know where things are saved how you can know where things are saved is right now since we have our project set to verge 3d test if we simply click on the browser button right here which opens the folder you will now notice that we have a folder right here so this is where you get to save your file the blender file that you're going to be working with needs to be saved right here now if you're exporting your files or maybe you just don't want to save the blender file you want to export them you can export as jltf or you can export as glb so you probably be asking what would happen if you don't save the file there if you don't save the file you know within the project container what happens is once you click here to run the app within your app manager what happens is only the default veg cube is going to be visible so what i would suggest is what you can do is you can save the file within that directory and at the same time export the gltf now once this is completely exported what you can do right now is you can come back here and then once you press the preview or run app it is going to refresh and load up our scene from blender right here so now you can see it's pretty easy for you to get this one right over here okay so there are various stuff that you may want to do with this and it's just very interesting to see that you can get started with this one all right so with this here we're going to take a look at something else now at this point we have a brand new scene which we already have set up and what we want to do is to play with the puzzles now i'll go in and talk about some things that you need to know some things you need to keep in mind and also some issues that might arise here and there while you're working with these two so we have this pretty cool scene right here and this has to do with the chair and then we have a couple of buttons now what we want to do with these buttons is at any point in time we click on them we would want the floor to change or maybe we can simply do it that any time we click on them we get this particular object which is the top of the chair to change so depending on what we want to create and yes if you want to change your hdr you want to get a new look you want to change the feeling yes you can so whatever hdr you give actually what you see in ev in most cases is what you're going to get from the tool something else also keep in mind is this tool is supported for both ar and vr so in case you want to create some compelling looking visuals and you want to see them in vr yes you can if you want to do that for ar as well there's an example for that i'm going to link that in the description so you can check it out so i'm just simply going to save this the way it is and then what we need to do is to export this file out just like we did in previous one export this file out and then we're going to go through and test it first off let's calibrate our camera and make sure it's looking properly so this is where our camera is so let's simply make sure that we have things going the way we would like them to be i'm also going to go over and press view lock this camera and from this point i will want our camera to look at our objects from a position like so this here next in which we need to do is to make sure that we have things working now in most cases once you export your file you may actually see that you have backface calling and what you need to do is you need to go over to the material section scroll all the way down to where you get to find the verge 3d setting now within the veg 3d setting you can now choose to make sure that you have double sided turned on if only the front or the back is turned on you may be faced with the back face color something else also keep in mind is that all lights directly from blender are supported but area lights are not the only way you can get the area light to work is if you bake the area light to the mesh this is because it's very very expensive for you to actually use the area lights directly with verge while working in real time so with this set what we can now do is simply select the camera which we're going to be working with go over to the section where we have the verge 3d so if i simply fire this up so let's do a quick sneak peek so that you guys can see what we're doing you'll notice that we have our camera moving everywhere and anyway okay so the camera is moving at random it doesn't have any bounds it can simply move everywhere but we would like to lock this in a given position and maybe just limit how much movements that we can get so for that if we go back to blender and we simply go all the way right here you would notice that we have a vert 3d setting we may only want some sort of beating to happen so we're going to leave this one as a beat and then we don't want the panning feature we're going to turn this one off now if you want to limit the amount of rotation that you have yes you can make all of that changes like right here we can choose to set the distance to maybe 90 for example and we can also switch this other one to make some changes to about 90 and probably 90 as well now with this done you can also click on updates view and this is going to update the view of your camera so once you have all of these settings done also make sure you select your target by using the eyedropper right here and selecting your target so once that is done you can save this and you can click on sneak peek to preview these on the web so right now you can see what we have and you can notice that we can only move about something like so so we have some sort of boundaries going on right here and you can also notice that we cannot pan we can pan left we can pan right we can only move about 90 degrees back and forth and 90 degrees up and down so this is pretty cool very very nice so with the basic things that we need to get going set up all we need to do now is to go over to file and then go over to export export these as a gltf and also save these to replace the previous file within our project now if there's any setting you're looking for the rendering you can go over to the rendering section and down here you would notice that verge has a couple of them that you may want to take a look at if you want to bake your modifiers you can make them directly here if you want to bake some amateurs and several stuff you can take a look at them if you're also looking for stuff within the material section or within the object properties there are certain things right here that has to do with the verge settings that may influence how your object behaves so you can take a look at them link to the documentation is also going to be in the description so you can check that one out so once we are done with what we need to do we need to go ahead and play with the puzzle now this is where it actually comes in very handy for those who don't know how to script and those who actually sucks at programming so once we're done saving everything we can now hit on application manager to launch the application manager right here automatically once we click on this button of course it's going to load our scene right here so that we can start seeing what we've already created and of course you can see what we have going on for us so within this part is where we can start making some adjustments but before we get to do that let's go back to the application manager and now you'll notice that we have this tiny button here which is for the puzzles now if we click right here we can start editing the puzzles now one of the things to keep in mind is within this puzzle there are sets of puzzles and this has to do with different events different call-out actions and also different processes that you may want to get going but for this example we're going to simply add an event because we want once we click on something that something else should happen and in this case we would like to click on any of the space and once we do that we'll like an action to a call and for that once we select this and drop that right there we can also go over to the selectors and select something like this so i'm just going to select that right there and we're going to start off with blue for example and the next thing which would like to do is to assign this material so we need to go over to the material section and click on assign material and bring that out and plug that right in as simple as that so because what we want to get is once we click on this object we will like a particular material to be assigned to a particular object so go back to the selector drag the material we want out so let's select this and select blue for example and of course we now have blue right here now the object which we want to assign this to is also something we can select within the selectors i'm also going to drag this one right over here and because this is called the chair top we'll find chair top right over there so once we click on blue the chat up should automatically change but this is not happening because we haven't saved whatever we've done which is the logic and we haven't run the logic yet so now once you're done doing these two things you can actually get this thing working for you so at this point if i click on this button right now you'll notice our chat up automatically changes and now you'll also notice we have that back face calling that we were talking about and this is a potential issue that most people would get so what you need to do is you need to go back over to blender as it is and then you need to scroll all the way down for individual materials and down here where you have your verge settings you need to make sure they're all set to double-sided so this is also something very important that you need to keep in mind just like we talked about earlier in the video so once you have that going what you need to do is to close this one more time and we are going to fire this up and because we previously saved what we've done everything that we have still remains the way we left them before so if we click on this button right now you notice we have that so in case you're looking for ways to play with the logic there is a huge set of logic systems right here which you can work with and they range from you know animation controls to camera controls to ways that you may want to style your entire scene and get pretty stuff happening for you so what we're going to do next is just make some duplicate copies of this particular one so instead of having this to be blue we're going to make this black and select this and change it to black and we're going to do the same for all of the other ones as well so once this is done simply save your file and run the whole action one more time so you can see how easy it is for you to just simply create a configurator send it over to someone and then the person can easily start working with this so if you want to get a black you can get the black you want to get red you can get that green and also blue so pretty easy you can create all of these things by yourself and if you simply come back to your app manager and you want to upload these so that anyone who wants to preview this can preview it you can click on the publish to web using verge 3d network and this is going to publish this to the web so at this point if you want to share the link with anyone and you want them to simply preview stuff of course you can get that one going for you and yes if you want to purchase this you can simply go over the link in the description and get it to me i think this is an amazing app especially the fact that you can create so many interactive things and you don't even need to code a single line or you know you don't need to you know type a single line of code and this is something i guess a lot of people would kind of connect to and if you're into creating web-based content or maybe you're just into creating stuff that has to do with interactivity and you want to try this link to the trial version is also there so you can check it out and it's very interesting to know that this is supported for both maya blender and also 3d studio max link to a couple of tutorials that has to do with them on their page is also going to be in the description so if you feel excited about this you can check all the links in the description and have a wonderful day so tell me what you guys think about this in the comment section and of course if you like this video or you learn something from this you can go ahead and give a like and don't forget to share with a friend and if you're new here it's going to be amazing for you to hit the subscribe button and also turn on notifications so that you don't miss the next video or the next update and i'm like see you guys again with the tutorial update free friday tutorial tuesday tips and tricks things like this peace

Channel: askNK

Views: 75,776

Keywords: 3d modeling, augmented reality, 3d modeling software, three.js tutorial, 3d modeling blender, 3d modeling tutorial, verge 3d, puzzle scripting, blender animations, blender 2.9, blender addon, webgl, web3d, eevee, interactive website design, interactive website, 3d tutorial, web tutorial

Id: c25mJL6Wy00

Length: 14min 20sec (860 seconds)

Published: Fri Sep 25 2020