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

首页 > 技术 > 作者:YD1662023-02-17 21:02:54

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

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

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

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

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

在您的计算机上运行。

要运行演示,包括服务器,您将需要:

现在您已经安装了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用户,最简单的方法是单击文件夹的路径,然后将其复制:

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

然后,在命令行上输入,cd后跟您已复制的路径(借助非常有用的Ctrl v粘贴它)。

最后,输入serve,它将几乎立即启动服务器。您需要做的最后一件事是进入浏览器并输入localhost:5000 / <您的HTML文件名>。例如,我的是localhost:5000 / model-demo-viewer。

就是这样。如果您复制了我提供的代码并使用了相同的示例3D模型,则应查看此屏幕

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

就是这样。如果您想了解有关模型查看器的更多信息,这些是一些有用的链接:

希望您能和Model Viewer一起玩。如果您有支持ARCore的智能手机,请在手机上试用该演示(只需将其添加ar为属性model-viewer,然后在手机中打开HTML文件)。

翻译自:https://medium.com/@soulsinporto/how-to-render-your-3d-models-on-the-web-with-model-viewer-1c389a513855

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.