本周，当我观看2019年Chrome Dev Summit的一些视频时，我发现了有关Model-Viewer Web组件的信息，这是一种简单但功能强大的方法，可在网页上以及可选的AR中渲染3D模型。
不幸的是，由于我的硬件限制，我无法使用它的AR功能，但是我为它的打开可能性感到兴奋。
因此，我看完视频后直接进入演示网站亲自尝试该代码。但是，我不能只复制并粘贴代码，下载3D模型，打开HTML文件并具有相同的演示并在本地运行。我查看了该项目的GitHub存储库上的README ，然后意识到我必须从服务器启动文件才能成功运行代码。
因此，我今天的目的是从头到尾向您展示如何拥有以下页面
在您的计算机上运行。
要运行演示，包括服务器，您将需要：
- 在计算机上安装了Node.js（您可以在此处找到安装程序）；
- 3D模型（您可以在此处从项目的资源库下载示例模型；在演示中，我们将使用RobotExpressive模型）；
- 编写HTML和CSS的代码编辑器（例如Sublime Text或Visual Studio Code）。
现在您已经安装了Node.js（至少我会假设这样），您需要安装一个库来为我们创建服务器。为此，请打开命令行并输入：
npm install serve
稍后我们将返回serve图书馆。
现在，让我们编写一些代码。打开您的代码编辑器并创建一个新的HTML文件。如果您不熟悉HTML或CSS，请放心，只需复制并粘贴提供的代码即可。如果您确实知道代码在做什么，请随时对其进行改进，并让我知道您的想法。
这是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其编写为标准HTML元素即可（请注意，它与现有元素img和video元素的相似性）。顺便说一句，不要忘了href在第6行更改为您创建的CSS文件的名称，否则HTML不会知道如何找到您的CSS。
至少，您仅需要指定3D模型的来源（请注意，它仅接受glTF和GLB模型）。但是，在这种情况下，我们添加了auto-rotate使模型自行旋转的功能，camera-controls以便用户可以与模型进行交互。background-color只需更改model-viewer元素的背景颜色。
现在，我们还需要使用以下代码创建一个CSS文件来设置页面样式：
/* 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;
}
我认为这是相当标准的CSS，但是如果您不熟悉CSS网格布局，我确实在这里写了一篇简短的入门文章。
现在我们已经编写了所有代码，我们只需要启动服务器并通过服务器在浏览器中打开HTML文件。为此，请打开命令行并导航到具有HTML，CSS和3D模型的文件夹。如果不确定如何执行此操作，对于Windows用户，最简单的方法是单击文件夹的路径，然后将其复制：
然后，在命令行上输入，cd后跟您已复制的路径（借助非常有用的Ctrl + v粘贴它）。
最后，输入serve，它将几乎立即启动服务器。您需要做的最后一件事是进入浏览器并输入localhost：5000 / <您的HTML文件名>。例如，我的是localhost：5000 / model-demo-viewer。
就是这样。如果您复制了我提供的代码并使用了相同的示例3D模型，则应查看此屏幕
就是这样。如果您想了解有关模型查看器的更多信息，这些是一些有用的链接：
- GitHub存储库
- 官方演示网站
- Google关于模型查看器的代码实验室
希望您能和Model Viewer一起玩。如果您有支持ARCore的智能手机，请在手机上试用该演示（只需将其添加ar为属性model-viewer，然后在手机中打开HTML文件）。
翻译自：https://medium.com/@soulsinporto/how-to-render-your-3d-models-on-the-web-with-model-viewer-1c389a513855
本文暂时没有评论，来添加一个吧(●'◡'●)