使用Three.js和React把冰墩墩部署在網頁上的實現方法(實現人手一墩)
前言
最近冰墩墩一墩難求,大傢開始通過各種方式打造自己的冰墩墩,各種冰墩墩開始出現,粘土冰墩墩,橘子冰墩墩,3D打印冰墩墩。這次通過前端的方式展示一個3D冰墩墩,現在開始吧。
聲明:本文涉及奧運元素3D模型僅用於個人學習、研究和欣賞,請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。
技術棧
本文使用Three.js
+ React
技術棧,實現冬日和奧運元素,制作瞭一個充滿趣味和紀念意義的冬奧主題 3D 頁面。本文涉及到的知識點主要包括:TorusGeometry
圓環面、MeshLambertMaterial
非光澤表面材質、MeshDepthMaterial
深度網格材質、custromMaterial
自定義材質、Points
粒子、PointsMaterial
點材質等。
實現效果
在線預覽
https://yjlaugus.gitee.io/bdd/
模型墩墩
現在添加可愛的冬奧會吉祥物熊貓冰墩墩 🐼,冰墩墩同樣是使用 glb
格式模型加載的。原模型是使用 3D max 建的我發現並不能直接用在網頁中,需要在 Blender 中轉換模型格式,還需要調整調整模型的貼圖法線,才能還原渲染圖效果。
HTML結構
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <link rel="icon" href="./favicon.ico" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="./logo192.png" /> <link rel="manifest" href="./manifest.json" /> <title>YJLAugus的專屬冰墩墩❤</title> <script defer="defer" src="./static/js/main.0b6c1e63.js"></script> <link href="./static/css/main.d51a1c7d.css" rel="stylesheet" /> </head> <body style="background:#212121"> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <script src="./libs/three.min.js"></script> </body> </html>
部分樣式
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #212121; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; margin: 0 } code { font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace .App { text-align: center .App-logo { height: 40vmin; pointer-events: none @media (prefers-reduced-motion:no-preference) { .App-logo { -webkit-animation: App-logo-spin 20s linear infinite; animation: App-logo-spin 20s linear infinite } .App-header { align-items: center; background-color: #282c34; color: #fff; display: flex; flex-direction: column; font-size: calc(10px + 2vmin); justify-content: center; min-height: 100vh .App-link { color: #61dafb @-webkit-keyframes App-logo-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) to { -webkit-transform: rotate(1turn); transform: rotate(1turn) @keyframes App-logo-spin { ::-webkit-scrollbar { background: 0 0!important; cursor: pointer!important; width: 4px!important ::-webkit-scrollbar-thumb { background-clip: padding-box!important; border: 1px solid transparent!important; border-radius: 4px!important ::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:active { background-color: rgba(3,192,60,.5)!important ::-webkit-scrollbar-thumb:active,body.platform-win32 ::-webkit-scrollbar-thumb:hover { background-color: rgba(3,192,60,.5)!important; border-width: 1px!important; cursor: pointer!important .page_title { font-size: 56px; letter-spacing: .1em; margin: 8px 0 16px; text-align: center; text-shadow: 0 1px 0 #c9cfce,0 2px 0 #bcc2c2,0 3px 0 #afb6b6,0 4px 0 #a4adac,0 5px 0 #9fa8a7,0 6px 0 #99a3a2,0 7px 0 #97a1a0,0 8px 0 #949e9d,0 0 5px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.2),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.2),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.3); top: 10%; width: 100%
部署
打包下載:https://www.123pan.com/s/afh9-CvUgH
下載好冰墩墩資源包即可部署,可以部署在在github或者碼雲,也可以直接丟到服務器上~如果覺得不錯煩請點個推薦~
參考
https://github.com/dragonir/3d/tree/master/src/containers/Olympic
到此這篇關於使用Three.js和React把冰墩墩部署在網頁上!實現人手一墩!的文章就介紹到這瞭,更多相關Three.js和React冰墩墩內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!