3D动画在线播放工具-3dplayer功能演示

视频演示：

一、简介

3dplayer能够加载.gltf格式的三维模型，通过配置脚本控制动画的播放，它可以让三维动画不经过渲染，直接将模型、动画导出，以在线或本地的方式实时播放。可用于3D微课、工艺流程演示、动画预览等。

该程序适合3D模型师、动画师快速生成3D演示程序，而不需要任何编码。

程序演示：https://zjbcool.com/app/3dplayer/3dplayer.html?load=../gltf/model01.gltf&config=../gltf/config.json

二、功能

支持通过url动态加载模型；
支持通过配置脚本实现动画控制；
支持标题、内容描述、详情链接的编辑；
支持模型部件标签，及详细描述；
支持过程控制，包括：播放、重复、暂停、刷新功能；
观察模式，隐藏环境，交互式查看主体模型；
VR模式，支持WebVR功能；
全屏、窗口切换，进度提示；
兼容PC端、移动端，完美嵌入小程序、公众号等；
在线模式和本地模式两个版本，本地模式下不受场景大小限制。

三、兼容性

在线模式下，支持chrome 、firefox浏览器，本地模式支持windows 7 及以上32位和64位操作系统。

VR模式可在支持firefox reality浏览器的viveport等平台运行。目前绝大多数头显和平台均已支持。支持情况参见：https://mixedreality.mozilla.org/firefox-reality

四、使用

在线模式

部署

3dplayer可作为静态文件直接上传到服务器。完成后，确保能通过地址访问。如：https://abc.com/3dpalyer/3dplayer.html，默认情况下窗口会显示“未加载数据”。

配置脚本

首先从3dplayer文件夹下复制出一份config.json模板，放到自己的模型导出文件夹下，然后编辑该文件。

示例：

{"title":"课程名称","description":"http://www.chipont.com.cn","partsInfo":[{"name":"Empty","annotation":"标签","dialoge":"描述文字。"}],"animations":[{"step":"第一步","description":"步骤描述内容。","camera":[1,40],"sound":".mp3","score":1}    ]
}

参数说明：

参数	类型	说明
title	文本	课程的名称
description	文本	课程详情页链接
partsInfo	文本	模型部件信息 name，文本，模型的名称 annotation，文本，标签名称 dialoge，文本，对话框信息
animations	文本	动画信息，按镜头配置。 step，文本，步骤标题 description，文本，步骤描述 camera，数组，相机帧范围 sound，文本，声音文件地址 score，数字，分值

补充：partsInfo和animations可以包括任意多个数据项，要增加数据项，只需要将其下面的{}复制一份放到下面即可，注意两者之间通过逗号分隔。如：

{"name":"Empty1","annotation":"标签1","dialoge":"描述文字1。"
},
{"name":"Empty2","annotation":"标签2","dialoge":"描述文字2。"
}

上传模型和配置文件

将导出的.gltf（见下文）和在上一步中配置好的脚本文件上传到服务器，可放置在3dpalyer文件夹的同级目录下。如下所示：

app文件夹中包括：模型导出文件和config.json配置文件。如：

mymodel.gltf
mymodel.bin
config.json
texture1.jpg
texture2.jpg
...

加载

这是非常关键的一步，只有正在输入加载参数，播放器才能读取到要加载的模型和脚本配置文件。加载的参数在url中输入，如果是按步骤（3）的路径上传了文件，那么完整的加载参数像这样：

https://abc.com/3dplayer/3dplayer.html?load=../app/app.gltf&config=../app/config.json

说明：这里有两个参数，load和config，分别加载模型和配置文件的路径，两者之间用&隔开。播放器的地址和参数之间通过?隔开。

本地模式

本地模式通过壳程序嵌入上述文件，操作比较简单。

首先下载我们提供的壳程序，将播放器、3D模型和配置文件复制到指定目录下，然后在main.js中将默认的入口文件改为步骤（4）中的路径即可。具体见壳程序内的操作说明。

五、如何导出.gltf

准备工作

.gltf是标准的网络3D通用格式，目前支持绝大多数三维软件，本程序建议使用3ds Max、Blender三维软件进行动画制作，可以保证最佳兼容性。

下载插件：

Blender版：https://github.com/Soft8Soft/verge3d-blender-addon

3ds Max版：https://cdn.soft8soft.com/downloads/verge3d-max-2.14.0.exe

安装插件

见文档：https://www.soft8soft.com/docs/

导出

.gltf对模型、材质、动画的支持列表见：https://zjbcool.com/docs/v3d_user_manual/

导出的文件包括3类：.gltf .bin 贴图

其中.gltf和.bin是成对出现的，每个应用程序只导出一对，贴图若干，但是如果部署到网络上要尽量优化。

六、其它

优化技术：https://zjbcool.com/docs/v3d_user_manual/

压缩技术：https://zjbcool.com/docs/v3d_user_manual/

关于glTF：https://github.com/KhronosGroup/glTF