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

【verge3D】自定义加载器

verge3D2.6版在拼图编辑器上新增加了Init和Main两个选项卡,其中Init可以执行一些载入场景前的任务:加载压缩资源、默认全屏按钮、透明背景、截屏、加载器等。其中加载器可以进行自定义,为程序个性化订制提供便利,不需要大量修改代码即可实现。

准备工作

1.一个可视化web编辑器,如adobe muse、googleWebDesigner;

2.常用的代码编辑器(IDE),如notepad++、sublime test3等。

步骤

1.设计加载器

在googleWebDesigner中设计加载器,并导出html、CSS。使用响应式布局。

或者在网上直接找现成的好看的加载器代码,直接拿来用。

https://medium.muz.li/top-30-most-captivating-preloaders-for-your-website-95ed1beff99d

CSS加载器

https://github.com/lukehaas/css-loaders

2.在verge3D的app管理器中创建项目

打开生成的html和CSS文件,将第1步设计好的加载器代码复制进html和CSS文档中。注意图片、字体等资源路径准确。重复的css代码检查。

3.打开拼图进行设置

其中onProgressDo就是执行加载的动画,拼图提供了percentage,通过它来控制加载动画。onFinishDo是完成加载后将加载器隐藏。

我的加载器:http://zjbcool.com/static/assets/oneplus/oneplus.html

官方演示视频(俄语):https://www.youtube.com/watch?v=cSecO_yg5Vw&t=25s

zjbcool

zjbcool
关闭菜单