header-menu
menu

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

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

http-server

在浏览器中查看 3D 模型

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

Chrome

FAQ

如何在 macOS 上打开终端?

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

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

任务栏(Windows 10)开始菜单(Windows 7) 的搜索中搜索 cmd命令提示符,即可看到搜索结果。

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

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

$ cd ~/Desktop/demo

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

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

menu

目录

    ×
    img view