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

最新推荐文章于 2023-07-04 17:39:07 发布

EverCraft

最新推荐文章于 2023-07-04 17:39:07 发布

阅读量3.2k

点赞数 2

文章标签： Web3D 在线3D 网页三维

原文链接：https://www.jianshu.com/p/c07da6736aac

版权

安装 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 ，显示成功

EverCraft

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
如何10分钟零基础实现Web3D（在线3D模型可视化）

安装 http-server第一步:点击链接https://nodejs.org/dist/latest-v10.x/node-v10.17.0-x86.msi下载 nodejs 并安装第二步:打开终端( 即命令提示符，在开始菜单搜索框中输入 cmd，并打开)，输入 node -v，如显示版本号，代表安装成功;第三步:npm 默认是国外源，修改为淘宝源，在终端输入下述...
复制链接

扫一扫