提供Verge3D教程和Web3D开发技术服务

3D动画在线播放器-3dplayer使用说明

一、简介

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

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

程序地址:https://zjbcool.com/app/3dplayer/3dplayer.html

视频演示:https://www.bilibili.com/video/av65583845/

3D动画在线播放工具-3dplayer

二、功能

  1. 动态加载模型;
  2. 通过配置脚本控制动画;
  3. 可编辑的标题、内容描述、详情链接;
  4. 标签功能,定位到模型部件,显示部件的详细描述;
  5. 动画控制,包括:播放、重复、暂停、刷新功能;
  6. 画面效果,可调节亮度/对比度,添加辉光、AO特效;
  7. VR模式,广泛的设备支持;
  8. 截图功能;
  9. 全屏/窗口切换;
  10. 进度提示;
  11. 在线模式和本地模式两个版本,本地模式下不受场景大小限制。

三、兼容性

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

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

四、使用

1.在线模式

(1)部署播放器

3dplayer可作为静态文件直接上传到服务器。完成后,确保能通过地址访问。如:

https://abc.com/3dpalyer/3dplayer.html

在没有加载模型的情况下,程序会显示为一个介绍自身功能的3D课件。

(2)上传模型和配置文件

上传的内容包括:模型文件(一对.gltf和.bin文件)、贴图、config.json配置文件。

建议不要将模型文件放到3dplayer文件夹下 。

将文件夹(如:app)放置在3dpalyer文件夹的同级目录下。如下所示:

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

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

(3)加载

加载就是在播放器地址后面加上自己模型的参数,配置文件会被自动识别。如果按步骤(2)的路径上传了文件,那么完整的地址像这样:

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

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

2.本地模式

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

首先下载我们提供的壳程序,将播放器、3D模型和配置文件复制到指定目录下,然后在main.js中将默认的入口文件改为步骤(4)中的路径即可。如下:

 // and load the index.html of the app.
  const options = {search:'load=../gltf/model01.gltf'}
  mainWindow.loadFile('3dplayer/3dplayer.html' , options)

五、如何导出.gltf

建模和动画是一个3D课件的核心,3dplayer能让用户集中精力做好核心工作,剩下的3dplayer会自动完成。

假设你已在三维软件中完成了模型和动画,接下来你需要做的只是将它们导出。

1.准备工作

.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

2.安装插件

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

3.导出

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

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

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

六、如何配置脚本

首先从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。"
}

七、其它

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

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

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

zjbcool

zjbcool
关闭菜单
×
×

产品入口: 产品添加到购物车