本周，当我观看2019年Chrome Dev Summit的一些视频时，我发现了有关Model-Viewer Web组件的信息，这是一种简单但强大的方法，可以在网页和可选的AR上渲染3D模型。
遗憾的是，由于我的硬件限制，我无法使用它的AR功能，但我对它的开放可能性感到兴奋。
所以看完视频后，我直接去了演示网站自己试代码。然而，我不能只是复制和粘贴代码，下载3D模型，打开html文件，进行相同的演示并在本地运行。我查看了这个项目的GitHub仓库上的自述文件，然后意识到我必须从服务器启动该文件才能成功运行代码。
因此，我今天的目的是从头到尾向你展示如何拥有以下网页
在您的计算机上运行。
要运行演示，包括服务器，您需要：
Node.js安装在你的电脑上(你可以在这里找到安装程序)；3D模型(您可以在此处从项目资源库下载示例模型；在演示中，我们将使用RobotExpressive模型)；为HTML和css编写代码编辑器(比如Sublime Text或者Visual Studio代码)。现在您已经安装了Node.js(至少我会这样假设)，您需要安装一个库来为我们创建一个服务器。为此，请打开命令行并输入：
npm安装服务
我们稍后将返回服务图书馆。
现在，让我们写一些代码。打开代码编辑器，创建一个新的HTML文件。如果你不熟悉HTML或者CSS，放心，复制粘贴提供的代码即可。如果您确实知道代码在做什么，请随时改进它，并让我知道您的想法。
这是HTML文件所需的代码：
！doctype html \ nhtml \ n \ n head \ n title 3d Test/title \ n link rel=' style sheet ' href=' model-viewer-demo . CSS ' \ n/head \ n body \ n div id=' holder ' \ n div id=' text ' \ n h1 class=' sample-text '摆弄右边的模型！/h1 h1 class='sample-text '只需观察它自己的旋转或用鼠标自己操作/h1 h1 class='sample-text '您还可以放大模型！/h1 \ n/div \ n div id=' model ' \ n model-viewer src=' robot expressive . glb ' alt='机器人的3D模型' auto-rotate=' ' camera-controls=' ' background-color=' # 455 a64 '/model-viewer \ n/div \ n/div \ n！-为现代浏览器加载模型查看器-\ n script type=' module ' src=' https://UNP kg . com/@ Google/model-viewer/dist/model-viewer . js '/script \ n！-为较旧的浏览器加载模型查看器-\ n script no module src=' 3359unpkg.com/@ Google/model-viewer/dist/model-viewer-legacy . js '/script \ n \ n/body \ n \ n/html \如您所见，只需脚本加载模型查看器并在文件末尾添加元素，然后将模型查看器编写为标准HTML元素(请注意它与现有元素img和video的相似性)。顺便说一下，不要忘记将href更改为您在第6行创建的CSS文件的名称，否则HTML将不知道如何找到您的CSS。
至少，你只需要指定3D模型的来源(请注意，它只接受glTF和GLB模型)。然而，在这种情况下，我们添加了自动旋转功能，使模型自己旋转，相机控制，以便用户可以与模型互动。只需改变模型查看器元素的背景颜色。
现在，我们还需要用下面的代码创建一个CSS文件来设置页面样式：
/*页面占据屏幕的100% */\ nhtml { \ n height:100%； width='360px 'height='auto' /
我认为这是相当标准的CSS，但如果你不熟悉CSS网格布局，我确实在这里写了一篇简短的介绍性文章。
现在我们已经写好了所有的代码，只需要启动服务器，通过服务器在浏览器中打开HTML文件。为此，请打开命令行并导航到包含HTML、CSS和3D模型的文件夹。如果您不确定如何操作，Windows用户最简单的方法是单击文件夹的路径并复制它：
然后，在命令行上输入cd，后跟您复制的路径(在非常有用的Ctrl v的帮助下粘贴)。
最后，输入serve，它几乎会立即启动服务器。您需要做的最后一件事是进入浏览器并输入localhost:5000/您的HTML文件名。比如我的是localhost:5000/model-demo-viewer。
就是这样。如果您复制了我提供的代码并使用了相同的示例3D模型，您应该检查这个屏幕。
就是这样。如果您想了解有关模型查看器的更多信息，以下是一些有用的链接：
Google在model viewer上的代码实验室，GitHub repository的官方演示站点，希望你可以玩玩Model Viewer。如果您有支持arCore的智能手机，请在手机上尝试演示(只需将AR添加为属性模型查看器，然后在手机中打开HTML文件)。
翻译自：3359medium.com/@苏尔辛波尔托/如何用模型浏览器在网上渲染你的3d模型-1C389A513855
3d模型渲染不出来
三维可视化软件是自主研发的三维引擎开发的三维可视化软件，采用HTML5和web GL技术，可支持多层次、大规模、复杂的三维可视化场景开发。
在此基础上开发出适用于各行业的软件产品，具有良好的三维模型显示能力，可以用各种图形组件完美的显示和分析数据。
随着5G和物联网浪潮的席卷，数据可视化的概念逐渐升温。万物互联时代，可视化会带来新的管理和运营方式。
简而言之，就是数据可视化，将数据以可视化图表的形式展现出来，直观地挖掘数据的深层价值，帮助企业进行智能化管理和运营，提高企业运营的效率。
三维可视化是基于数据可视化的真实场景的三维虚拟仿真。它以更丰富的格式显示更直观的数据，并以更清晰、更灵活的方式显示数据的价值。
