騰訊新聞H5：世界讀書(shū)日，測(cè)測(cè)你是本什么書(shū)？
你有多久沒(méi)有完整的讀完一本書(shū)了？
我們好像已經(jīng)習(xí)慣了把大部分時(shí)間花在手機(jī)上面，滿(mǎn)足于短視頻、社交媒體、游戲的豐富有趣，無(wú)法長(zhǎng)時(shí)間專(zhuān)注于一本書(shū)的閱讀。
4 月 23 日是第 26 個(gè)世界讀書(shū)日，騰訊新聞發(fā)起了# 時(shí)間有限讀書(shū)計(jì)劃 #，想要用更年輕化的方式去引起更多人的關(guān)注。我們想到可以通過(guò)性格偏好的心理測(cè)試 H5，對(duì)應(yīng)很 cool 的 3D 書(shū)樣式，采用 webGL 技術(shù)實(shí)時(shí)看到書(shū)的變化，生成定制化的閱讀指南，讓互動(dòng)體驗(yàn)更直觀也更有趣味一些！
What Book You Are / 掃一掃進(jìn)入 H5 /
PROCEDURE 1：超現(xiàn)實(shí)概念空間 Visual Concept
我們的世界是一個(gè)巨大的圖書(shū)館，我們每天讀著他人，書(shū)寫(xiě)著自己，也等著被讀！設(shè)計(jì)師童靴從文案中獲取靈感，引入“ 人類(lèi)圖書(shū)館 ”的創(chuàng)意概念，突出人類(lèi)也放大世界，地球自轉(zhuǎn)、星塵流動(dòng)，將整個(gè)場(chǎng)景置于虛擬的超現(xiàn)實(shí)空間，進(jìn)入每個(gè)人的潛意識(shí)完成測(cè)試。
PROCEDURE 2：3D書(shū)本樣式設(shè)定 3D Setting
3D 書(shū)是整個(gè) H5 最重要的部分之一，材質(zhì)方面我們也經(jīng)過(guò)多種的測(cè)試實(shí)驗(yàn)，最終選擇了表現(xiàn)力最為出色的銀色反光材質(zhì)，材質(zhì)里最酷的硬金屬。
運(yùn)用環(huán)境光的角度變換，在三維空間中金屬產(chǎn)生折射從而調(diào)取了與人類(lèi)性格色彩相關(guān)的 4 種特別的漸變色。并嘗試給書(shū)本添加了不同的紋理效果，產(chǎn)生了極為豐富的變化性。
/ Book Color & Material Design /
最表面的 3D 書(shū)封面，我們也給予了多種版式的可能性，極簡(jiǎn)線(xiàn)條構(gòu)成與心理學(xué)密切相關(guān)的矛盾立體幾何，文字增加扭曲、切割等設(shè)計(jì)效果，與其他變化結(jié)合在一起，力求讓每個(gè)參與者的書(shū)都是獨(dú)一無(wú)二的 ~！
/ Book Cover Design /
PROCEDURE 3：WebGL實(shí)時(shí)書(shū)變化 Interactive Setting
開(kāi)場(chǎng) loading 中，地球自轉(zhuǎn)飛離，星塵漂浮流動(dòng)，將用戶(hù)瞬間拉入虛擬空間中。進(jìn)入首頁(yè)，3D 書(shū)在未知物的掃描下鐳射幻彩變化，主題文字呈環(huán)形旋轉(zhuǎn)呼吸，猶如太空中行星環(huán)環(huán)繞行星運(yùn)動(dòng)，同時(shí)可隨意滑動(dòng)屏幕，翻閱書(shū)本。
/ Loading & Home Page /
開(kāi)始測(cè)試，只需用第一直覺(jué)選擇符合自己的答案，而每回答一道題，書(shū)本的樣式就會(huì)對(duì)應(yīng)發(fā)生明顯的變化，如材質(zhì)、大小、厚度等。然后切換到下一個(gè)問(wèn)題，直到完成整個(gè)測(cè)試，實(shí)時(shí)體驗(yàn)定制自己的人生之書(shū) ~！
/ Test Questions Page /
RESULTS 4：定制化閱讀指南 Experimental Results
“ 你是一本什么書(shū) ” 可以選擇符合自己個(gè)性喜好的答案，生成專(zhuān)屬個(gè)人的 3D 版人生之書(shū)閱讀指南，分享男 / 女票或好友要怎么更好的讀你這本書(shū)。
最后推薦與用戶(hù)相關(guān)的同類(lèi)好書(shū)，給下一次閱讀個(gè)機(jī)會(huì)。時(shí)間有限，好好讀書(shū)，好好生活 ~！
TECHNOLOY 5：H5技術(shù)亮點(diǎn)解析（Experimental Principle & Tools）
01、絲滑的書(shū)本翻頁(yè)反饋
我們使用 Blender 對(duì)書(shū)本模型進(jìn)行骨骼綁定，導(dǎo)出 glb 格式并用 Threejs 讀取骨骼信息。同時(shí)，將21根骨骼的運(yùn)動(dòng)，與用戶(hù)的觸摸交互，通過(guò)公式綁定在一起。當(dāng)用戶(hù)滑動(dòng)屏幕的時(shí)候，21根骨骼會(huì)基于預(yù)設(shè)的算法，自動(dòng)調(diào)整位置和旋轉(zhuǎn)角度，從而書(shū)本隨著用戶(hù)的滑動(dòng)產(chǎn)生絲滑翻動(dòng)的反饋效果。
02、書(shū)本材質(zhì)的實(shí)時(shí)變化
為了實(shí)現(xiàn)書(shū)本在不同材質(zhì)間的實(shí)時(shí)過(guò)渡，我們基于 Three.js 自帶的 MeshStandardMaterial 材質(zhì)，讀取并修改其默認(rèn)的 Shader 代碼，最終達(dá)到用戶(hù)的答案選擇會(huì)觸發(fā)不同的材質(zhì)變化。
出品 | 壞打印機(jī) Studio
項(xiàng)目統(tǒng)籌 Project Director | 越升
創(chuàng)意文案 Creative Copywriter | 刺猬
網(wǎng)站開(kāi)發(fā) Web Developer | 越升 國(guó)禾
視覺(jué)設(shè)計(jì) Visual Designer | 亦城
三維模型 3D Modeler | 志暉
Produced by BadPinter Studio
壞打印機(jī)創(chuàng)意實(shí)驗(yàn)報(bào)告 No：# H5004
What Book You Are ?2021
項(xiàng)目信息
專(zhuān)業(yè)評(píng)分
專(zhuān)業(yè)評(píng)分已截止
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）