3D动画在线播放工具-3dplayer功能演示
视频演示:
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
3D动画在线播放工具-3dplayer功能演示相关推荐
- Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
- html5动画在线制作工具,KoolShow(HTML5动画制作工具)
KoolShow是一款动画制作软件,能够帮助用户制作Flash动画,用于为文本.图像.矢量图形.音频.视频.幻灯片和jQuery小部件添加动画效果,方便好用. 基本简介 使用KoolShow多媒体创作 ...
- html5动画在线制作工具,KoolShow-KoolShow(HTML5动画制作工具) v2.4.4 官方版-CE安全网...
KoolShow是一款非常专业实用的HTML5动画制作工具,KoolShow界面简洁,功能强大,用户使用这款软件可以为文本.图像.矢量图形.音频.视频.幻灯片和jQuery小部件添加动画效果,辅助用户 ...
- Mac版3D动画建模渲染工具C4D R26
Cinema 4D是一款专业的3D建模.动画.模拟和渲染解决方案软件.它的快速.强大.灵活和稳定的工具集使设计.运动图形.VFX.AR/MR/VR.游戏开发和所有类型的可视化专业人员获得更容易和高效的 ...
- Javascript 核心方法加密,JS方法完美在线加密工具介绍及演示
Javascript 核心方法加密介绍: JS方法加密工具地址:Javascript方法加密,JS核心代码加密,JS不可逆加密 - [JavaScript加密] 优点: 1.完全打乱顺序,并且很难跟踪 ...
- 10款提效的在线设计工具推荐
在效率为王的时代,在线设计是设计的未来,为设计师提供了更节省时间.精力和成本的解决方案. 在线设计工具可以通过打开浏览器使用,大多数操作界面比传统设计工具更简单,入门门槛很低. 在这篇文章中,我们精心 ...
- idea开发的JavaWeb电影网在线播放
今天,给大家介绍一个使用idea工具开发的JavaWeb电影在线播放网站.功能很简单,但页面很炫酷 idea导入也很简单,只需要open即可 功能介绍: 电影列表,电影详情,评价,推荐,电影分类,电影 ...
- 用3D动画来完成的一个立体图片
3D动画效果 开发工具与关键技术:3D动画 作者:沈金凤 年级:18级(5)班 撰写日期:2019年1月28日 3D动画立体图形给人带来非常好的效果,下面是个简单的立体的3D样式,源代码如下: 虽然源 ...
- 9款国内外垂直领域的在线作图工具:那些可以替代Visio的应用!【转】
http://www.csdn.net/article/2015-02-12/2823939 摘要:现在越来越多的创业公司都希望提升办公的效率,今天介绍的几款也能提升办公效率,不过它们都属于垂直领域的 ...
- 主流的媒体播放软件对URL在线播放大部分存在指针越位的安全问题
今天为了测试我自己的服务器软件对在线播放的支持功能,反复测试各种方式通过管道在线播放FTP URL给出的媒体文件,具体是这样的,我是想借用LINUX下著名的播放软件mplayer来执行播放,直接使用F ...
最新文章
- 细数移动IM开发中的那些坑
- IPC 之 Binder 初识
- Java Review - LinkedList源码解读
- 牛客 216 C 小K的疑惑
- LeetCode MySQL 1495. Friendly Movies Streamed Last Month
- 百度-Java中级面试题分享-
- php反序列化绕过,浅谈php反序列化漏洞
- windows下批量杀死进程
- [最小生成树] 继续畅通工程
- 解决UTF-8方法归纳
- Java不适合于作为主要编程教学语言 -- 孟岩
- dstat 命令详解
- 第三十七课.宽度学习
- postgresql 导出单张表
- Hive数据类型(转:https://blog.csdn.net/xiaoqi0531/article/details/54667393)
- 联合国首席AI顾问专访:我们期望AI应该是完美的,但这永远不会
- 支付行业常见信息安全合规认证小记
- 安卓手机运行ios教程_英雄联盟手游公测,安卓/苹果iOS注册下载教程!
- iOS开发之响应式编程RAC
- 日本海淘转运运输方式对比及如何选择转运渠道
热门文章
- 路由器服务器修改密码,TP-Link TL-WR842N路由器设置密码
- 工商服务代理行业解决方案
- 想变好却不能坚持,我告诉你怎么办
- Unity : Timeout while trying to pause the Unity Engine.应用闪退问题修复
- 圆 最小外包矩形_基于迭代最小外包矩形的城区建筑物轮廓规则化方法
- 异步时钟脉冲同步器的设计
- dell计算机运行慢怎么解决方法,戴尔笔记本电脑运行速度慢怎么办?
- uniapp点击打开外部应用跳转链接,指定App打开应用市场
- mysql报错1194_修复 WordPress mysqli_query(): (HY000/1194) wp_options 表崩溃错误
- 观察者研报 | Moon的崛起