广州读书月：花城3D书摘漂流馆

2020-04-16 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

花城3D书摘漂流馆-查阅二维码

完整欣赏此案例大约需要1分25秒

案例：花城3D书摘漂流馆

品牌：广州读书月

技术实现： threejs

亮点：

1、创意定位

4月23日是世界读书日，广州读书月的线上活动H5，全景方式展示书摘漂流馆，不负韶华。

2、策划上

① 首屏“朝夕阅读，不负韶华”大标题，轻触屏幕查看3D书摘漂流馆；

② 一座大厦水平自动旋转，大厦外围飘着书名，点击书名，可以查看书摘；同时也可以右上角，换一批图书；下方两个按钮，一个是上传我的书摘；另一个是2020十大好书；

③ 点击上传我的书摘后，用户自己可以输入书籍名称和书摘；输入完毕，点击“下一步”按钮，4个海报风格，横向滑动屏幕选择，这里特别要说，点击海报下方的三个元素，可以添加对应元素，并对元素进行移动、缩放、删除；每个海报下方的三个元素都不同；调整好后，点击“确定”按钮，生成专属读书日海报，并可以长按保存。

3、设计上

大背景以蓝色天空到粉色底进行颜色的过渡，蓝色为主，画面中无论字体的设计，还是使用的元素都很中国元素，画面整体中国风。

4、技术上

使用Threejs进行3D立体场景的渲染，如果你对Threejs了解的更多，你就会超级爱这个3D引擎，它渲染3D效果超棒，浏览器几乎都支持，而且性能也好。

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签