使用Three.js和React把冰墩墩部署在网页上!实现人手一墩!
2024-08-29 08:25:53
前言
最近冰墩墩一墩难求,大家开始通过各种方式打造自己的冰墩墩,各种冰墩墩开始出现,粘土冰墩墩,橘子冰墩墩,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 {
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
最新文章
- 3-linux下部署tomcat应用
- 设置Ubuntu为本地时间
- 关于python3.X 报";import urllib.request ImportError: No module named request";错误,解决办法
- centos 安装 apache2.4
- oracle控制文件丢失恢复
- 161121、hibernate导致数据出错的两个地方
- Word 使用技巧
- HDU 4706 Children&#39;s Day(简单模拟)
- css3学习--css3动画详解一(animation属性)
- 【 UVALive - 5095】Transportation(费用流)
- Python学习之---冒泡,选择,插入排序
- iOS跳转系统设置界面
- DefaultHttpClient is deprecated 【Api 弃用]】
- QT Creator 快速入门教程 读书笔记(二)
- GPU编程--kernels(2)
- BotVS开发基础—2.4 获取订单、取消订单、获取未完成订单
- php的格式化数字函数
- java获取本类路径
- Dockerfile 规范
- 在使用 Spring Boot 和 MyBatis 动态切换数据源时遇到的问题以及解决方法
热门文章
- Linux 中安装、升级、配置 Swoole 扩展
- python 使用demical模块四舍五入
- vim 安装使用 pathogen
- HarmonyOS新能力让数据多端协同更便捷,数据跨端迁移更高效!
- 阿里云服务器ECS Ubuntu16.04 初次使用配置教程(图形界面安装)
- 关于在Vue中使用WebScoket的随笔
- WebRTC本地选择codec(web本地模拟)
- 使用.NET 6开发TodoList应用(31)——实现基于Github Actions和ACI的CI/CD
- leetcode 102. 二叉树的层次遍历 及 103. 二叉树的锯齿形层次遍历
- conda : 无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序的名称