Online3Dviewer示例：在网页中显示3D模型
(说明，由于某些技术原因图片上传总是失败，可在此处下载word文档：【免费】Online3DViewer示例：在网页中显示3D模型资源-CSDN文库)
- 介绍
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”：
可以用鼠标滚轮放大缩小、用鼠标拖动调整视角：
- 安装
- 所需组件
安装基础：全新的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在线安装
-
- 下载源码
打开github下载git库或者zip文件：
如果下载的是zip文件，解压缩供后续使用。解压缩后的目录：
Website是网站的根目录，start_server.bat是启动网站的批处理文件。
-
- 安装node.js
打开nodejs.org下载安装程序：
运行安装程序，默认安装即可，无需自动安装附加工具。
-
- 安装esbuild
打开命令提示符，从桌面的“开始”->右键->”运行”，输入“cmd”，回车，输入“npm install esbuild”，回车即可完成安装：
- 运行
打开命令提示符，从桌面的“开始”->右键->”运行”，输入“cmd”，回车，切换到源码目录（图中目录要替换为实际的目录）：
执行start_server.bat：
报错，缺失组件three，用”npm install three”命令即可安装：
然后再次运行start_server.bat，成功启动服务：
红圈内就是服务的地址和端口，在浏览器输入其中一个地址和端口“http://127.0.0.1:8080”：
点击“websit/”即可进入默认主页（跟官网差不多）：
可以拖放文件或者选择自带的示例文件查看。
- 使用自己的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打开：
这个页面没有工具栏，一样可以放大缩小旋转：
文章来源：https://www.toymoban.com/news/detail-709309.html
结束文章来源地址https://www.toymoban.com/news/detail-709309.html
到了这里，关于Online3Dviewer示例：在网页中显示3D模型的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
