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.

Dora 是一個網頁製作平臺，讓你無需編碼就能製作網站，是以它與 Webflow 或 Framers 等其他網頁製作工具非常相似，但它與眾不同的地方在於，它有一些非常酷的功能，比如 3D 功能，可以讓你直接將任何 3D 動畫模型導入到網站中，還有一個很酷的功能是，你可以只使用關鍵幀和時間線就能將網站中的所有內容製作成動畫，所以我覺得這些功能非常有趣。

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.

好了，現在我們來到了 Dora 的主界面，可以看到整體佈局非常標準，與 Figma 等許多常用工具相似，是以你會有賓至如歸的感覺。

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.

在左側面板上，我們有頁面和組件，在頂部，他們為你提供了幾個工具，你可以在這裡創建容器、文本或三維模型，這裡有一個菜單，可以切換到不同的畫布尺寸，如 MacBook Pro 14 16，所以我選擇 16，因為這是我現在使用的尺寸。這裡是保存指示器，可確保您的進度已被保存。這裡是預覽按鈕，您應點擊此處預覽進度，無論您在主項目文件上做了什麼更改，都可以重新啟動刷新。

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.

是以，要導入 3D 動畫模型，讓我們點擊這裡，然後在這裡創建 3D 部件。

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.

我們這裡有一個 3D widgets，是以你可以進入該菜單，然後選擇填充空間，它就會自動填充水準空間，是以在響應式設計時非常方便，因為無論你的螢幕有多寬，它都會填充空間。com，然後搜索一個模型，所以我要搜索一條魚，然後打開可下載和動畫，然後我就在這裡找到了這條很酷的魚，讓我們一起來看看吧。

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.

這真的很不錯，讓我們購買這條魚吧，實際上我已經購買了，所以我只是要購買，然後從這裡我可以下載文件，所以他們給了你很多不同的選擇，但我們要下載的是 GLTF 格式，所以這是你下載並解壓文件後的結果，所以我們這裡有很多文件，一個 GLTF 和一個 BIN 文件，問題是你不能將這個文件導入到 3D widgets 中，因為什麼都不會發生。

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.

是以，我們需要做的就是將所有這些文件打包成一個單一的 GLB 格式，所以你要做的就是訪問這個網站，我在說明下放了一個鏈接，然後將所有文件拖到這個方格中，它的作用就是將所有文件打包，並下載這個 GLB 文件。

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.

是以，只需打開撥動開關，就能看到動畫正在播放。

So it's looking pretty good.

所以看起來還不錯。

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.

好的，我們在這裡添加了一段文字，我希望這段文字始終位於頁面的中心，無論螢幕有多大，都是如此，所以超級簡單，只需轉到這個約束，然後點擊這裡將其居中，現在它就會始終居中，與畫布對齊，無論你移動到哪裡都是如此。

It's always be in the center.

它總是在中間。

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 we need a button.

是以，我們需要一個按鈕。

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.

是以，只需點擊這裡創建一個容器，然後點擊這裡將顏色更改為白色，再將半徑更改為 70，這樣我們就可以像這樣剝離並將其移動到周圍的某個地方，然後添加一些文字。

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.

是以，我們可以將這個頁面擴展得更長，一旦我們將這個頁面擴展得更長，你就會看到這裡的 Dash 燈訓示視口。

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.

是以，我希望這個頁眉和 3D 部件一樣，都能保持在頂部，而且響應速度要快，所以我們要做的就是選中徽標，然後單擊這個點，將其拖動到視口頂部，就會顯示這個菜單。

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.

讓我們把它連接到視口的左邊，我們對這個也這樣做，把這個連接到視口，這個也保持在視口頂部，還有這裡，對於 CTA，我要把這個連接到這個，頂部也保持與視口粘連 好了，現在試試看 好了，現在當我們滾動時，它會保持粘連，讓我在真實網站上演示一下，看看它是如何響應的，所以現在當你改變瀏覽器的大小時，它會完美地響應。

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

是以，現在我們將對 3D 部件做同樣的處理。

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.

是以，讓我們解鎖它，然後將其拖動到視口，選擇視口頂部，現在 3D 部件將始終保持在螢幕上。

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?

是以，當你滾動時，它看起來相當不錯，所以我想在這裡做的是，在滾動時，讓這些數字與車頭燈相比有一點視差，從而讓它看起來更刺激一些。是以，我們需要做的是回到這裡，然後選擇這三個數字，然後將其分組到一個容器中，讓我們將其重命名為數字，然後讓我們確保這個容器位於 3D widgets 下方，因為我想讓它位於魚的後面、時間軸的工作原理是，如果你移動指針，就能看到視口在移動，對嗎？

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.

所以，進入容器內部，然後相應地移動每個數字，這樣你就可以看到這裡，以確保數字是正確的，同時將數字 2 向下移動一點，對數字 1 做同樣的操作，這就是你要看到的效果，讓我們來預覽一下，現在效果非常好，這就是如何使用時間線創建視差效果。

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

我剛注意到這裡有一個 3D 女巫的剪輯。

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

今天的教程到此結束，希望對你有所幫助，我們下期再見。