识别二维码查看示例相册:
效果演示
开发目标
开发一个走马灯音乐相册H5，每个人都可以参与，实现上传图片后，一键生成走马灯效果的音乐相册，效果与天猫双十一购物节走马灯H5类似
功能结构
- 走马灯相册 ，以走马灯的表现方式展示用户所上传的图片；
- 相册编辑页，用户自定义编辑相册标题，封面，上传N张图片，一键生成相册
- 相册列表页，展示所有用户已经制作好的相册
所用技术
- jquery ，常规的dom操作；
- php ，后端开发；
- threejs ，三D场景制作；
- 微信网页开发，微信端的一些操作
参与方法
- 用户打开任意一个相册，识别相册最后一页的二维码，进入个人相册列表页
- 点击 立即制作 按钮进入相册编辑页，输入相册标题，上传封面，上传相册内容图片，添加图片描述，选择背景音乐
- 点击 生成相册 按钮生成相册
- 返回列表页，点击已制作好的相册打开相册
- 分享至微信朋友圈或转发给好友
- 好友点击你的相册连接，可以欣赏你的相册，也可以参与其中
关键技术细节
- 上传图片，使用微信jssdk上传图片，强制对图片进行压缩，节省服务器宽带开销
- 选择背景音乐，使用酷狗音乐API，实现音乐搜索，并获取音乐真实地址
- 贴图生成，走马灯贴图为镂空图片，图片尺寸较大，不利图片生成和传输，使用前端canvas动态生成贴图图片，节省服务器宽带开销
- 走马灯效果实现，使用threejs，创建3D创景，创建平面元素，贴图，按照适当角度旋转平面，使元素拼装成一个走马灯的模型，旋转模型，实现走马灯旋转效果，因图片数量不确定，在旋转过程中，要根据旋转状态，对特定平面元素设定特定的旋转角度，实现走马灯循环旋转效果
定制开发
开发者：马英豪（18703630830）
可加微信（同号）交流技术开发
支持 h5|小程序|微商城 定制开发