Name: How to make a 3D website with no coding | Dora tutorial
Uploaded: 2024-07-06T09:26:33.000Z
Duration: 14 min 10 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

To-infinitive

Hey everyone, in this video, I'm going to show you how to make this real-time 3D website with no coding And we're going to use Dora, a very cool web builder platform that I've just found out recently.

Modal verbs - A2

So let's get into it So Dora is a web builder platform that gives you the ability to build websites with no coding So it's quite similar to other web builder tools like Webflow or Framers But what makes it different is that they have some really cool features like the 3D features that can let you import any Animated 3D models directly to your website And another cool thing is that you can animate everything in your website using just keyframes and timelines So I find those are pretty interesting.

Future simple

So now I'm going to give it a try So to get started you need to sign up and then you will get access to the platform So here's what you see.

So this is a project panel where all of my projects are here So now I'm going to create a new project.

So I'm going to call it 3D fish All right, so here we are in the main Dora interface so as you can see that the Overall layout is pretty standard and similar to a lot of common tools nowadays like Figma So you can feel right at home.

So on the left panel We have the pages and the components and at the top here they offer you a couple of tools where you can create a container or text or 3Ds and Here is a menu to switch to different Canvas size like MacBook Pro 14 16 So I'm going to go with 16 because this is where what I'm using right now And here is the timeline toggle where you can turn on and turn off the timeline panels And this is the save indicator to make sure that your progress has been saved and here is the preview button so you should click here to preview your progress and you can always restart to Refresh when whatever you change what you're doing on the main Project file and here is a publish button.

So when you turn this on it will give you a Dora domain where you can just demo your website and preview it as a real website and the right panel is the contextual menus where it will be contextual depends on what you are selecting and In the middle is a main canvas where we will work on so by default this one can be the home page So the first thing I want to do is just to show you Right into how to import the 3d because that's the fun part.

So to import a animated 3d models Let's click here and create a 3d widgets here.

We have a 3d widgets here so you can go to this menu and Select fill space and it will automatically fill up the horizontal space So it will be really handy when it comes to responsive because it doesn't matter how wide your screen is It will always fill up the space and then we can click here to import the 3d models So currently there are only available for GLTF and GLB format So the perfect place to find those formats is to go to sketchfab.com and then search for a model so I'm going to search for a fish and I'm going to turn on downloadable and animated and then I found this really cool fish right here So, let's check it out.

So as you can see this fish is super cool.

This is really good so let's purchase this fish and actually I already purchased it, so I'm just going to purchase and Then from here I can download the file so they give you a bunch of different options But we're going to download the GLTF format So this is what we have after you download and unzip the file So we have a lot of files here and one GLTF and one BIN file so the thing is that you cannot import this file into the 3d widgets because nothing's gonna happen.

The reason is that they need to work with these other files as well So what we need to do is to pack all of these files into one single GLB format So all you have to do is just go to this website I put a link under the description and then drag everything into this square right here and what it does is it will pack everything and Download this GLB file.

So now we have this file here scene file.

So let's just rename it as Mr. Fish and Now let's go back to Dora and then import Mr. Fish to our scene All right, here we go we have the fish here so it's looking pretty good so to see it better, let me just change the Background colors into blue just for now so we can see the fish a little bit better So the thing is that if you notice that the fish is not moving so to fix that super easy just click on Mr. Fish Dot GLB and then there's a toggle here.

So just turn on the toggles and then you see that is Animating right now.

And in this 3d scene, you can select the 3d models and move it around and you can use the left mouse to rotate and use the right mouse to pan the camera and Use the scroll to zoom in and zoom out So you can control how it look what angle is gonna be and you can also add keyframe to it Next thing I wanted to do is to create some text layout.

So let's just click here to add some text All right, so we have a text here and I want this to be always in the centers of the page doesn't matter how Big the screen is so super simple just go to this constraint and then click here to center it so now it's always being centered aligned to To the canvas so it doesn't matter where you move.

So that is pretty cool So now I'm going to add the rest of the text for a hero banners and with this text I would do the same To a light center and then I want this text to always follow the big ones To make sure that the spacing is always the same So all I have to do is to click here and then connect it to the bottom of the big text So now when you move the big text it will always follow So next I'm going to work on the headers.

So just click here to create a container and we can click here to change the color to white and change the radius to maybe give it 70 so we can have a peel like this and move it somewhere around here and then add some text and Then I wanted this button to be responsive as well.

So what we do is to Connect these dots together All of these dots to connect together so now when you Transform the button the text will always be in the center So you can also use a container to create a simple icon like the hamburger menu So now let's import the Dora logo so I have a SVG here just simply drag it into the canvas and Then we have the logo shows up here.

So let's move it to the right position Alright, so we have the headlines and the header here So I wanted to extend this canvas to be longer so it will be scrollable.

So all we need to do is to select this Handle right here and then just drag it down.

So we can extend this longer and Once we extend this page longer, you see that this Dash light over here that indicate the viewport.

So I'm going to preview it and give it a try So You see that when you scroll everything it just goes up So I want this Header to stay sticky at the top and also be responsive as well as the 3D widgets so what we need to do is to select the logo and Then click on this point and then drag it to the viewport top and it will show you this menu so let's just select viewport top and Also here on the left.

Let's connect it to the left of the viewport and we'll do the same for this Connect this to the viewport and this also stay at viewport top and also here And for the CTA, I'm going to Connect this to this and also the top also stay sticky to the viewport Alright, so now give it a try Okay, so now when we scroll it will stay sticky and Let me just demonstrate it on the real website To see how it's responsive So now when you change the size of the the browser, it will just be Perfectly responsive.

So now we will do the same for the 3D widgets.

So let's unlock it and then just drag it to the viewport and Select viewport top now the 3D widgets will always stay on the screen Okay.

So what we're gonna do next is to finish the rest of the text layout All right.

So after I finish the layout, this is what we got So we have the full page here and this is how it look like on the preview.

So when you scroll it's looking pretty good so what what I wanted to do here is to Spy it up a little bit by having this numbers being a little bit parallax Comparing to the headlights while scrolling so what we need to do is to go back here and then select these three numbers and then group it into one containers and Let's rename it to numbers and then let's make sure that this Container is under the 3D widgets because I want it to be behind the fish So to make it parallax, we need to turn on this timeline Panel and The way that this timelines work is that if you move this Pointer right here so you can see the viewport is moving, right?

So it's indicate that the page is scrolling so what we need to do is just go back to zero and then select the the numbers container here and then set a keyframe as zero and then move the pointers and You can see how it's Reflecting you can zoom out here to see a bigger to see a bigger pictures and Move it way down until this frame where the number just out of the top of the viewport And maybe set a keyframe here And with this keyframe, I'm going to move everything up a little bit so when you So when you move the pointer you see this kind of parallax is going on So it will be much clearer to see it in preview.

So let's take a look So now you see that the number is being parallax, but the position is not correct So once you go back and then go inside the containers Let's lock it so we don't mess with this.

So go inside containers and then move every individual numbers accordingly so You can see here to make sure that is correct And also move the number two down a little bit and do the same for the number one So this is what you're gonna see So let's give it a preview So now it's working perfectly So that's how you can create a parallax effect using the timeline So let's just unlock this 3D witches.

So I just noticed there's a cut of the 3D witches here.

So let me just Scale it down to fill up the whole viewport space Okay.

So last thing I want to do is give it a nice animated background.

So super easy I already have this loop animated background in this so all we need to do is to drag it into canvas And Then we have the video here and let's move it way down the bottom of the list here.

So it will be Underneath everything and then let's click here to center it and then change this to fill space and Move it to the top like this So we need to create a keyframe for the video as well So for the zero, let's set this video to be at the top position and then just move the whole Pointer down right at when it's reached the end of the page and then move it to The bottom so now it will create this kind of animations To make sure that there's no empty space showing up So this is how the end result look like.

So overall, I think everything's looking really good The 3D and parallax is really cool So that's how I create a 3D website with Dora in just a few simple steps So if you're interested in learning more about Dora, just follow the link under my description To learn about more in-depth tutorial as well to join the community.

 So this is the end of my tutorial today So I hope you find this helpful and I'll see you in the next one