本周，當(dāng)我觀看2019年Chrome Dev Summit的一些視頻時(shí)，我發(fā)現(xiàn)了有關(guān)Model-Viewer Web組件的信息，這是一種簡單但功能強(qiáng)大的方法，可在網(wǎng)頁上以及可選的AR中渲染3D模型。
不幸的是，由于我的硬件限制，我無法使用它的AR功能，但是我為它的打開可能性感到興奮。
因此，我看完視頻后直接進(jìn)入演示網(wǎng)站親自嘗試該代碼。但是，我不能只復(fù)制并粘貼代碼，下載3D模型，打開HTML文件并具有相同的演示并在本地運(yùn)行。我查看了該項(xiàng)目的GitHub存儲(chǔ)庫上的README ，然后意識(shí)到我必須從服務(wù)器啟動(dòng)文件才能成功運(yùn)行代碼。
因此，我今天的目的是從頭到尾向您展示如何擁有以下頁面
在您的計(jì)算機(jī)上運(yùn)行。
要運(yùn)行演示，包括服務(wù)器，您將需要：
- 在計(jì)算機(jī)上安裝了Node.js（您可以在此處找到安裝程序）；
- 3D模型（您可以在此處從項(xiàng)目的資源庫下載示例模型；在演示中，我們將使用RobotExpressive模型）；
- 編寫HTML和CSS的代碼編輯器（例如Sublime Text或Visual Studio Code）。
現(xiàn)在您已經(jīng)安裝了Node.js（至少我會(huì)假設(shè)這樣），您需要安裝一個(gè)庫來為我們創(chuàng)建服務(wù)器。為此，請(qǐng)打開命令行并輸入：
npm install serve
稍后我們將返回serve圖書館。
現(xiàn)在，讓我們編寫一些代碼。打開您的代碼編輯器并創(chuàng)建一個(gè)新的HTML文件。如果您不熟悉HTML或CSS，請(qǐng)放心，只需復(fù)制并粘貼提供的代碼即可。如果您確實(shí)知道代碼在做什么，請(qǐng)隨時(shí)對(duì)其進(jìn)行改進(jìn)，并讓我知道您的想法。
這是HTML文件所需的代碼：
<!doctype html>
<html>
<head>
<title>3D Test</title>
<link rel="stylesheet" href="model-viewer-demo.css">
</head>
<body>
<div id="holder">
<div id="text">
<h1 class="sample-text">Play around with the model on the right!</h1>
<h1 class="sample-text">Just watch it rotate on its own or do it yourself with the mouse</h1>
<h1 class="sample-text">You can also zoom in the model!</h1>
</div>
<div id="model">
<model-viewer src="RobotExpressive.glb" alt="A 3D model of a robot" auto-rotate="" camera-controls="" background-color="#455A64"></model-viewer>
</div>
</div>
<!-- Loads model-viewer for modern browsers -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<!-- Loads model-viewer for older browsers -->
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
</body>
</html>
如您所見，您甚至不需要編寫自己的JavaScript即可使其工作。只需script在文件末尾加載帶有元素的model-viewer，然后將model-viewer其編寫為標(biāo)準(zhǔn)HTML元素即可（請(qǐng)注意，它與現(xiàn)有元素img和video元素的相似性）。順便說一句，不要忘了href在第6行更改為您創(chuàng)建的CSS文件的名稱，否則HTML不會(huì)知道如何找到您的CSS。
至少，您僅需要指定3D模型的來源（請(qǐng)注意，它僅接受glTF和GLB模型）。但是，在這種情況下，我們添加了auto-rotate使模型自行旋轉(zhuǎn)的功能，camera-controls以便用戶可以與模型進(jìn)行交互。background-color只需更改model-viewer元素的背景顏色。
現(xiàn)在，我們還需要使用以下代碼創(chuàng)建一個(gè)CSS文件來設(shè)置頁面樣式：
/* The page occupies 100% of the screen */
html {
height: 100%;
width: 100%;
}
/* The content occupies the entire space available */
body {
height: 100%;
margin: 0;
background-color: #455A64;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* Transform the page into a 2-column grid */
#holder {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
/* The left grid contains the text and occupies 50% of the available space */
#text {
align-self: center;
justify-self: center;
text-align: center;
margin: 0px 45px;
}
/* The right grid contains the model and occupies 50% of the available space */
model-viewer {
width: 100%;
height: 100%;
outline: none;
}
我認(rèn)為這是相當(dāng)標(biāo)準(zhǔn)的CSS，但是如果您不熟悉CSS網(wǎng)格布局，我確實(shí)在這里寫了一篇簡短的入門文章。
現(xiàn)在我們已經(jīng)編寫了所有代碼，我們只需要啟動(dòng)服務(wù)器并通過服務(wù)器在瀏覽器中打開HTML文件。為此，請(qǐng)打開命令行并導(dǎo)航到具有HTML，CSS和3D模型的文件夾。如果不確定如何執(zhí)行此操作，對(duì)于Windows用戶，最簡單的方法是單擊文件夾的路徑，然后將其復(fù)制：
然后，在命令行上輸入，cd后跟您已復(fù)制的路徑（借助非常有用的Ctrl + v粘貼它）。
最后，輸入serve，它將幾乎立即啟動(dòng)服務(wù)器。您需要做的最后一件事是進(jìn)入瀏覽器并輸入localhost：5000 / <您的HTML文件名>。例如，我的是localhost：5000 / model-demo-viewer。
就是這樣。如果您復(fù)制了我提供的代碼并使用了相同的示例3D模型，則應(yīng)查看此屏幕
就是這樣。如果您想了解有關(guān)模型查看器的更多信息，這些是一些有用的鏈接：
希望您能和Model Viewer一起玩。如果您有支持ARCore的智能手機(jī)，請(qǐng)?jiān)谑謾C(jī)上試用該演示（只需將其添加ar為屬性model-viewer，然后在手機(jī)中打開HTML文件）。
