腾讯新闻H5：世界读书日，测测你是本什么书？
你有多久没有完整的读完一本书了？
我们好像已经习惯了把大部分时间花在手机上面，满足于短视频、社交媒体、游戏的丰富有趣，无法长时间专注于一本书的阅读。
4 月 23 日是第 26 个世界读书日，腾讯新闻发起了# 时间有限读书计划 #，想要用更年轻化的方式去引起更多人的关注。我们想到可以通过性格偏好的心理测试 H5，对应很 cool 的 3D 书样式，采用 webGL 技术实时看到书的变化，生成定制化的阅读指南，让互动体验更直观也更有趣味一些！
What Book You Are / 扫一扫进入 H5 /
PROCEDURE 1：超现实概念空间 Visual Concept
我们的世界是一个巨大的图书馆，我们每天读着他人，书写着自己，也等着被读！设计师童靴从文案中获取灵感，引入“ 人类图书馆 ”的创意概念，突出人类也放大世界，地球自转、星尘流动，将整个场景置于虚拟的超现实空间，进入每个人的潜意识完成测试。
PROCEDURE 2：3D书本样式设定 3D Setting
3D 书是整个 H5 最重要的部分之一，材质方面我们也经过多种的测试实验，最终选择了表现力最为出色的银色反光材质，材质里最酷的硬金属。
运用环境光的角度变换，在三维空间中金属产生折射从而调取了与人类性格色彩相关的 4 种特别的渐变色。并尝试给书本添加了不同的纹理效果，产生了极为丰富的变化性。
/ Book Color & Material Design /
最表面的 3D 书封面，我们也给予了多种版式的可能性，极简线条构成与心理学密切相关的矛盾立体几何，文字增加扭曲、切割等设计效果，与其他变化结合在一起，力求让每个参与者的书都是独一无二的 ~！
/ Book Cover Design /
PROCEDURE 3：WebGL实时书变化 Interactive Setting
开场 loading 中，地球自转飞离，星尘漂浮流动，将用户瞬间拉入虚拟空间中。进入首页，3D 书在未知物的扫描下镭射幻彩变化，主题文字呈环形旋转呼吸，犹如太空中行星环环绕行星运动，同时可随意滑动屏幕，翻阅书本。
/ Loading & Home Page /
开始测试，只需用第一直觉选择符合自己的答案，而每回答一道题，书本的样式就会对应发生明显的变化，如材质、大小、厚度等。然后切换到下一个问题，直到完成整个测试，实时体验定制自己的人生之书 ~！
/ Test Questions Page /
RESULTS 4：定制化阅读指南 Experimental Results
“ 你是一本什么书 ” 可以选择符合自己个性喜好的答案，生成专属个人的 3D 版人生之书阅读指南，分享男 / 女票或好友要怎么更好的读你这本书。
最后推荐与用户相关的同类好书，给下一次阅读个机会。时间有限，好好读书，好好生活 ~！
TECHNOLOY 5：H5技术亮点解析（Experimental Principle & Tools）
01、丝滑的书本翻页反馈
我们使用 Blender 对书本模型进行骨骼绑定，导出 glb 格式并用 Threejs 读取骨骼信息。同时，将21根骨骼的运动，与用户的触摸交互，通过公式绑定在一起。当用户滑动屏幕的时候，21根骨骼会基于预设的算法，自动调整位置和旋转角度，从而书本随着用户的滑动产生丝滑翻动的反馈效果。
02、书本材质的实时变化
为了实现书本在不同材质间的实时过渡，我们基于 Three.js 自带的 MeshStandardMaterial 材质，读取并修改其默认的 Shader 代码，最终达到用户的答案选择会触发不同的材质变化。
出品 | 坏打印机 Studio
项目统筹 Project Director | 越升
创意文案 Creative Copywriter | 刺猬
网站开发 Web Developer | 越升 国禾
视觉设计 Visual Designer | 亦城
三维模型 3D Modeler | 志晖
Produced by BadPinter Studio
坏打印机创意实验报告 No：# H5004
What Book You Are ©2021
项目信息
专业评分
专业评分已截止
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）