简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 如何10分钟零基础实现Web3D（在线3D模型可视化）
Blogger Information
Blog 1
fans 0
comment 0
visits 4130
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
如何10分钟零基础实现Web3D（在线3D模型可视化）
几何@EverCraft.co
Original
4130 people have browsed it

我们总有各种场景希望在网页端就可以查看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 默认是国外源，修改为淘宝源，在终端输入下述命令

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

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

  1. npm install http-server -g

安装成功后显示如下:

创建 index.html

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

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

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

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

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

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset='utf8'>
  5.     <script src='https://evercraft.co/lib/everxyz-1.0.8.js'></script>
  6.     <style>
  7.       #hello{
  8.         width: 600px;
  9.         height: 600px;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div id="hello"></div>
  15.     <script>
  16.       const options = { 
  17.         showProgress: true,
  18.       }  // 配置工具条配置信息，详情可参考功能配置板块
  19.           evercad.render3d('#hello', [{
  20.                 path: '/Propeller.stl',  // 该地址为当前html文件的同级目录文件
  21.                 name: 'Propeller.stl'
  22.               }], options);
  23.     </script>
  24.   </body>
  25. </html>

启动服务

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

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

  1. 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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！