Online3Dviewer示例：在网页中显示3D模型

Online3Dviewer示例：在网页中显示3D模型

(说明，由于某些技术原因图片上传总是失败，可在此处下载word文档：【免费】Online3DViewer示例：在网页中显示3D模型资源-CSDN文库)

1. 介绍

Online3DViewer是一个免费的开源3D web解决方案，支持多种3D文件格式（2023年已支持18种）。

官方网站：Online 3D Viewer

Github：GitHub - kovacsv/Online3DViewer: A solution to visualize and explore 3D models in your browser.

官网是这样的（安装后的网站与此差不多）：

       可以直接拖放3D文件或者选择一个示例，选择第一个“obj”：

       可以用鼠标滚轮放大缩小、用鼠标拖动调整视角：

1. 安装
   1. 所需组件

安装基础：全新的win10家庭版虚拟机，默认安装，本示例环境还预先安装了vmware tools和winrar

Online3DViewer源码，可在github下载GitHub - kovacsv/Online3DViewer: A solution to visualize and explore 3D models in your browser.

Node.js，可在Node.js (nodejs.org)下载，本例使用的是node-v20.3.0-x64.msi

Esbuild，可在安装好Node.js后用npm在线安装

1. 1. 下载源码

打开github下载git库或者zip文件：

       如果下载的是zip文件，解压缩供后续使用。解压缩后的目录：

       Website是网站的根目录，start_server.bat是启动网站的批处理文件。

1. 1. 安装node.js

打开nodejs.org下载安装程序：

       运行安装程序，默认安装即可，无需自动安装附加工具。

1. 1. 安装esbuild

打开命令提示符，从桌面的“开始”->右键->”运行”，输入“cmd”，回车，输入“npm install esbuild”，回车即可完成安装：

1. 运行

打开命令提示符，从桌面的“开始”->右键->”运行”，输入“cmd”，回车，切换到源码目录（图中目录要替换为实际的目录）：

       执行start_server.bat：

      报错，缺失组件three，用”npm install three”命令即可安装：

       然后再次运行start_server.bat，成功启动服务：

       红圈内就是服务的地址和端口，在浏览器输入其中一个地址和端口“http://127.0.0.1:8080”：

       点击“websit/”即可进入默认主页（跟官网差不多）：

       可以拖放文件或者选择自带的示例文件查看。

1. 使用自己的3D文件

这是一个3D文件：

（双击可打开）

       将里面的文件解压缩出来：

       放置到website目录下：

       注意一下这个目录的内容，除了“index.html”外还有个“embed.html”，这个页面只显示3D模型，不显示工具。这两个页面支持使用同样的参数显示3D模型：

       在浏览器地址栏输入http://127.0.0.1:8080/website/#model=RobotArms.glb，直接打开我们自己的3D文件：

       在浏览器地址栏输入http://127.0.0.1:8080/website/embed.html#model=RobotArms.glb，使用embed.html打开：

       这个页面没有工具栏，一样可以放大缩小旋转：

      

结束