我们总有各种场景希望在网页端就可以查看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都可配置哪些功能?
**工具条基本样式:**工具条为配合三维浏览的功能条。
**结构树功能:**结构树功能用以列出三维模型的零件组成。
**视图切换:**默认常用7个视图的选择切换。
**渲染模式:**切换模型的渲染模式。
**测量功能:**基本测量功能，可切换尺寸单位。
**剖切功能:**用于查看模型内部结构。
**多点标注功能:**用以对模型任意位置标注。
怎么申请使用?
**访问链接：**https://evercraft.co/zh/api申请使用;
来源：oschina
链接：https://my.oschina.net/u/4450092/blog/3162453