如何使用Model-Viewer在Web上渲染3D模型

本周，当我观看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文件所需的代码：

    
    



    

        

            
Play around with the model on the right!
            
Just watch it rotate on its own or do it yourself with the mouse
            
You can also zoom in the model!
        
        

            
        
    

    
    
    
    

如您所见，您甚至不需要编写自己的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