你有多久没有完整的读完一本书了？我们好像已经习惯了把大部分时间花在手机上面，满足于短视频、社交媒体、游戏的丰富有趣，无法长时间专注于一本书的阅读。4 月 23 日是第 26 个世界读书日，腾讯新闻发起了# 时间有限读书计划 #，想要用更年轻化的方式去引起更多人的关注。我们想到可以通过性格偏好的心理测试 H5，对应很 cool 的 3D 书样式，采用 webGL 技术实时看到书的变化，生成定制化的阅读指南，让互动体验更直观也更有趣味一些！What Book You Are  /  扫一扫进入 H5  /PROCEDURE 1：超现实概念空间 Visual Concept我们的世界是一个巨大的图书馆，我们每天读着他人，书写着自己，也等着被读！设计师童靴从文案中获取灵感，引入“ 人类图书馆 ”的创意概念，突出人类也放大世界，地球自转、星尘流动，将整个场景置于虚拟的超现实空间，进入每个人的潜意识完成测试。PROCEDURE 2：3D书本样式设定 3D Setting3D 书是整个 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：# H5004What Book You Are ©2021