EverAPI 快速入门

配置环境

安装 Node.js

访问 Node.js 官网，安装 Node.js 环境，外网访问速度缓慢可以访问 Node.js 国内网站

检查 Node.js 是否安装成功

打开终端或 命令提示符，输入以下命令，检查 Node.js 是否安装成功

提示：如何打开终端或 命令提示符 ？请参阅 FAQ

$ node -v

如下图所示成功显示版本号，则表示 Node.js 已安装成功

Node.js Version

设置 NPM 源

打开终端或 命令提示符，输入以下命令，将 NPM 源设置为国内镜像

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

检查是否设置成功

$ npm config get registry

若结果如下图所示，则表示成功将 NPM 源设置为国内镜像

NPM Registry

安装 http-server

打开终端或 命令提示符，输入以下命令，安装 http-server

$ npm install http-server -g

使用方法

创建 index.html 文件

如果正在使用 Windows 操作系统，此步骤请参阅 Windows 条目。如果使用 macOS 或 Linux 操作系统，此步骤请参阅 macOS & Linux 条目

Windows

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

New file

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

Change extension

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

Copy file

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

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

<!doctype html>
<html lang="en">

<head>
  <meta charset='utf8'>
  <title>EverAPI Demo</title>
  <!-- 引入 EverAPI 脚本文件 -->
  <script src="https://evercraft.co/api/everapi.js"></script>
</head>

<body>
  <h1>EverAPI 快速入门</h1>
  <div id="root" style="width: 800px; height: 600px;"></div>
  <script>
    // EverAPI 配置
    const config = {}

    // api 是否已经加载成够的标志位
    let apiLoaded = false

    // 新建 api 实例
    // 构造函数的前两个参数分别是 AppID 和 AppKey，这里的参数可用于本地 localhost:9000 调试
    const api = new EverAPI('<APP_ID>', '<APP_KEY>', config)

    // api 加载成功后调用 loadApi 函数
    window.addEventListener('oneverapiloaded', () => {
      // 此处放需要渲染的文件
      const files = [{ filename: 'Propeller.stl', url: './Propeller.stl' }]
      loadApi(files)
    })

    // 此函数中调用 api 的 render 方法，在网页中加载出 api 窗口
    function loadApi (files) {
      // 此方法的第一个参数为放置 dom 元素的 id，第二个参数为需要在 api 中显示的模型的数组
      api.render('root', files)
      apiLoaded = true
    }
  </script>
</body>

</html>

macOS & Linux

第一步：打开终端，输入以下命令在桌面创建 demo 文件夹，并在此文件夹下创建 index.html

$ cd ~/Desktop
$ mkdir demo && cd demo
$ touch index.html

第二步：将 3D 文件拷贝到 demo 文件夹下

第三步：检查目录下的文件，输入 ls 命令，显示应如下图

List file

第四步：使用文本编辑器打开 index.html，将下述内容拷贝到文件内，并保存关闭

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

<!doctype html>
<html lang="en">

<head>
  <meta charset='utf8'>
  <title>EverAPI Demo</title>
  <!-- 引入 EverAPI 脚本文件 -->
  <script src="https://evercraft.co/api/everapi.js"></script>
</head>

<body>
  <h1>EverAPI 2.0 快速入门</h1>
  <div id="root"></div>
  <script>
    // EverAPI 配置
    const config = {}

    // api 是否已经加载成够的标志位
    let apiLoaded = false

    // 新建 api 实例
    // 构造函数的前两个参数分别是 AppID 和 AppKey，这里的参数可用于本地 localhost:9000 调试
    const api = new EverAPI('<APP_ID>', '<APP_KEY>', config)

    // api 加载成功后调用 loadApi 函数
    window.addEventListener('oneverapiloaded', () => {
      // 此处放需要渲染的文件
      const files = [{ filename: 'Propeller.stl', url: './Propeller.stl' }]
      loadApi(files)
    })

    // 此函数中调用 api 的 render 方法，在网页中加载出 api 窗口
    function loadApi (files) {
      // 此方法的第一个参数为放置 dom 元素的 id，第二个参数为需要在 api 中显示的模型的数组
      api.render('root', files)
      apiLoaded = true
    }
  </script>
</body>

</html>

启动 http-server 服务

在终端或 命令提示符 中，切换到上文创建的 demo 目录，执行以下命令，启动 http-server 服务

提示：如何在终端或 命令提示符 中打开指定的目录？请参阅 FAQ

$ http-server -p 9000

若显示如下图，则表示服务启动成功

在浏览器中查看 3D 模型

打开浏览器，在地址栏中输入 http://localhost:9000，就可以显示出 3D 模型了

Chrome

FAQ

如何在 macOS 上打开终端？

在 Dock 中打开应用程序 启动台，输入终端即可看到搜索结果。

如何在 Windows 上打开命令提示符？

在 任务栏（Windows 10） 或 开始菜单（Windows 7） 的搜索中搜索 cmd 或 命令提示符，即可看到搜索结果。

如何在 macOS 的终端中切换到指定目录？

输入以下命令，即可切换到桌面的 demo 目录中

$ cd ~/Desktop/demo

如何将 Windows 中的文件夹在命令提示符中打开？

首先在 我的电脑 / 计算机 / 资源管理器 中导航到目标目录，然后在地址栏中输入 cmd，就可以将目标目录在命令提示符中打开了。