騰訊新聞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條）