使用Three.js和React把冰墩墩部署在網頁上！實現人手一墩！

YJLAugus發表於2022-02-14
JSReact網頁

前言

最近冰墩墩一墩難求，大家開始通過各種方式打造自己的冰墩墩，各種冰墩墩開始出現，粘土冰墩墩，橘子冰墩墩，3D列印冰墩墩。這次通過前端的方式展示一個3D冰墩墩，現在開始吧。

宣告：本文涉及奧運元素3D模型僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

技術棧

本文使用Three.js + React 技術棧，實現冬日和奧運元素，製作了一個充滿趣味和紀念意義的冬奧主題 3D 頁面。本文涉及到的知識點主要包括：TorusGeometry 圓環面、MeshLambertMaterial 非光澤表面材質、MeshDepthMaterial 深度網格材質、custromMaterial 自定義材質、Points 粒子、PointsMaterial 點材質等。

實現效果

線上預覽

https://yjlaugus.gitee.io/bdd/

模型墩墩

現在新增可愛的冬奧會吉祥物熊貓冰墩墩 ?，冰墩墩同樣是使用 glb 格式模型載入的。原模型是使用 3D max 建的我發現並不能直接用在網頁中，需要在 Blender 中轉換模型格式，還需要調整調整模型的貼圖法線，才能還原渲染圖效果。

202202131610L0Mik6

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 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

::-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 {
	color: #fff;
	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

相關文章