我们总有各种场景希望在网页端就可以查看3D模型，比如像下面这样:

或者用手机就可以查看，比如像下面这样:

甚至希望微信直接一点就可以看，比如像下面这样:

在自己的网页产品中实现上面这些功能有多难?

答案是，零基础开始只需要5分钟。

5分钟零基础实现Web 3D可视化

PS:文章标题不是10分钟么?没错，这里只需要5分钟，另外5分钟咱们留给高级配置

安装 http-server

第一步:点击链接

https://nodejs.org/dist/latest-v10.x/node-v10.17.0-x86.msi

下载 nodejs 并安装

第二步:打开终端( 即命令提示符，在开始菜单搜索框中输入 cmd，并打开)，输入 node -v，如显示版本号，代表安装成功;

第三步:npm 默认是国外源，修改为淘宝源，在终端输入下述命令

npm config set registry https://registry.npm.taobao.org/

第四步:终端窗口进行全局安装 http-server，在终端窗口输入下述命令

npm install http-server -g

安装成功后显示如下:

创建 index.html

第一步:在桌面上创建文件夹 demo，然后打开 demo 并新建一个文本文档，windows 可点击右键新建文本文档，需要显示文件扩展名。

第二步:将新建的文件名修改为 index.html

第三步:将 3D 文件拷贝到 demo 目录下:

第四步:使用文本编辑器( 使用记事本即可)打开 index.html ，将下述内容拷贝到文件内，并保存关闭。

请注意!请下述内容中的 Propeller.stl 替换为你放到 demo 目录的 3D 文件名称 + 扩展名

<!doctype html>
<html>
  <head>
    <meta charset='utf8'>
    <script src='https://evercraft.co/lib/everxyz-1.0.8.js'></script>
    <style>
      #hello{
        width: 600px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="hello"></div>
    <script>
      const options = { 
        showProgress: true,
      }  // 配置工具条配置信息，详情可参考功能配置板块
          evercad.render3d('#hello', [{
                path: '/Propeller.stl',  // 该地址为当前html文件的同级目录文件
                name: 'Propeller.stl'
              }], options);
    </script>
  </body>
</html>

启动服务

使用 http-server 搭建一个简单的服务器第一步:在当前目录窗口的地址栏输入 cmd，按回车，然后输入下述命令，按回车，终端进入 demo 目录

第二步:在当前打开的窗口输入以下命令:

http-server -p 9999

出现下述截图代表服务启动成功

显示模型

正式加载文件，在浏览器地址栏中输入 127.0.0.1:9999/index ，显示成功

5分钟高级配置

如果咱们想渲染漂亮点的模型呢，比如下面这样带点纹理?

那么在5分钟快速入门基础上，咱们再加5分钟配置，这里就不再赘述，看如下链接即可:
https://evercraft.co/api/docs/everapi/%E5%9F%BA%E7%A1%80%E6%A8%A1%E5%9D%97.html

这10分钟咱们用到的EverAPI是什么?

EverAPI是基于Web浏览器的3D模型渲染应用程序接口，通过集成EverAPI服务，开发者最少仅需四五条代码即可在自己的网站、web应用实现在线3D的展示渲染和数据解析。

EverAPI基本特征

EverAPI用于实现web浏览器对三维模型的渲染。

主要支持工程类的3D文件格式，如stp、stl、obj、Gcode等;
支持3D渲染的基本交互，如旋转、平移、缩放、旋转;
支持结构树、剖切图、测量等浏览模型用的后处理功能;
支持3D标注、2D标注等辅助标注功能;
输出部分形状参数，如体积、表面积。

EverAPI能用在哪些场景?

EverAPI都可配置哪些功能?

工具条基本样式:工具条为配合三维浏览的功能条。

结构树功能:结构树功能用以列出三维模型的零件组成。

视图切换:默认常用7个视图的选择切换。

渲染模式:切换模型的渲染模式。

测量功能:基本测量功能，可切换尺寸单位。

剖切功能:用于查看模型内部结构。

多点标注功能:用以对模型任意位置标注。

为什么用EverAPI?

EverAPI的作者?

EverAPI是EverXYZ的产品(EverCraft.co)，核心团队来自清华、北大、华中科大、哈工程等高校及航天、网易、新美大等企业。作为一家具有工业基因的互联网科技公司，工之易致力于提供面向3D设计的开源、协作及项目托管服务，为全球3D设计工程师提供设计协作工具、3D开源知识库及版本控制系统，形成以信息驱动为核心的创新协作平台。

EverAPI的部分用户&合作伙伴

怎么申请使用?

访问链接：https://evercraft.co/zh/api申请使用;

使用交流

QQ技术讨论群：653920082

如何10分钟零基础实现Web3D（在线3D模型可视化）