腾讯新闻H5：世界读书日，测测你是本什么书？

小提示：您能找到这篇{腾讯新闻H5：世界读书日，测测你是本什么书？}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的腾讯新闻H5：世界读书日，测测你是本什么书？内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

你有多久没有完整的读完一本书了？

我们好像已经习惯了把大部分时间花在手机上面，满足于短视频、社交媒体、游戏的丰富有趣，无法长时间专注于一本书的阅读。

4 月 23 日是第 26 个世界读书日，腾讯新闻发起了# 时间有限读书计划 #，想要用更年轻化的方式去引起更多人的关注。我们想到可以通过性格偏好的心理测试 H5，对应很 cool 的 3D 书样式，采用 webGL 技术实时看到书的变深圳抖音网红推广公司有哪化，生成定制化的阅读指南，让互动体验更直观也更有趣味一些！

What Book You Are  /  扫一扫进入 H5  /

PROCEDURE 1：超现实概念空间 Visual Concept

我们的世界是一个巨大的图书馆，我们每天读着他人，书写着自己，也等着被读！设计师童靴从文案中获取灵感，引入“ 人类图书馆 ”的创意概念，突出人类也放大世界，地球自转、星尘流动，将整个场景置于虚拟的超现实空间，进入每个人的潜意识完成测试。

P市场数据调查ROCEDURE 2：3D书本样式设定 3D Setting

3D 书是整个 H5 最重要的部分之一，材质方面我们也经过多种的测试实验，最终选择了表现力最为出色的银色反光材质，材质里最酷的硬金属。

运用环境光的角度变换，在三维空间中金属产生折射从而调取了与人类性格色彩相关的 4 种特别的渐变色。并尝试给书本添加了不同的纹理效果，产生了极为丰富的变化性。

/  Book  Color  &  Material  Design  /

最表面的 3D 书封面，我们也给予了多种版式的可能性，极简线条构成与心理学密切相关的矛盾立体几何，文字增加扭曲、切割等设计效果，与其他变化结合在一起，力求让每个参与者的书都是独一无二的 ~！

/  Book  Cover  Design  /

PROCEDURE 3：WebGL实时书变化 In青岛全网营销teractive 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 Co央视一套广告15秒收费表pywriter  |  刺猬
网站开发 Web Developer  |  越升  国禾
视觉设计 Visual Designer  |  亦城
三维模型 3D Modeler  |  志晖
Produced by BadPinter Studio
坏打印机创意实验报告 No：# H5004
What Book You Are 2021