手机如何打开html文件（手机下载的html文件怎么打开）

本周，当我观看2019年Chrome Dev Summit的一些视频时，我发现了有关Model-Viewer Web组件的信息，这是一种简单但功能强大的方法，可在网页上以及可选的AR中渲染3D模型。

不幸的是，由于我的硬件限制，我无法使用它的AR功能，但是我为它的打开可能性感到兴奋。

因此，我看完视频后直接进入演示网站亲自尝试该代码。但是，我不能只复制并粘贴代码，下载3D模型，打开html文件并具有相同的演示并在本地运行。我查看了该项目的GitHub存储库上的README ，然后意识到我必须从服务器启动文件才能成功运行代码。

因此，我今天的目的是从头到尾向您展示如何拥有以下页面

手机如何打开html文件,手机下载的html文件怎么打开(1)

在您的计算机上运行。

要运行演示，包括服务器，您将需要：

在计算机上安装了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>  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>  <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用户，最简单的方法是单击文件夹的路径，然后将其复制：

手机如何打开html文件,手机下载的html文件怎么打开(2)