当前位置： 首页 > news >正文

程序人生 | 与足球共舞的火柴人（致敬格拉利什，赋予足球更深的意义）

news 文章来源：https://blog.csdn.net/qq_45902692/article/details/128171267 2025/2/6 10:55:00

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端
📃个人状态： 在校大学生一枚，已拿多个前端 offer（秋招）
🚀未来打算： 为中国的工业软件事业效力n年
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享&商务合作，快加入进来吧

文章目录

    • 一、前言
    • 二、使用 Three.js 渲染足球
    • 三、使用 Three.js 渲染跳舞的火柴人
    • 四、总结（充能）
    • 五、写在最后（观世界杯有感）

一、前言

2022 年的 卡塔尔足球世界杯 已经开赛 14 天。

2022.11.21 晚，格拉利什 进球后 庆祝动作 的背后其实有一段 非常感人的故事（格拉利什和患脑瘫的小球迷的暖心约定）。

【格拉利什庆祝动作】【世界杯感动瞬间】

花有重开日，人无再少年。格拉利什 这类人的存在，赋予了足球更深的意义！

程序人生，用技术记录世界杯，接下来我们使用 Three.js 技术，来实现一个 与足球共舞的火柴人（致敬格拉利什）

备注：其实我自己在电脑上运行效果是非常顺滑流畅的，可能是录屏软件的问题，会导致观看效果不佳（看着卡顿，其实很丝滑）

与足球共舞的火柴人

二、使用 Three.js 渲染足球

简介：Three.js 是 JavaScript 编写的 WebGL 第三方库。提供了非常多的 3D 显示功能。

渲染足球前我们得先有一张足球的材质贴图（football.png），用于把图贴到我们创建的球体上。如下所示：

在这里插入图片描述

创建一个HTML文件，World_Cup.html

备注：以下仅简单的解释了部分代码的含义，详细内容请自行学习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2022世界杯</title><style>body {margin: 0px;}</style>
</head>
<body><script type="text/javascript" src="https://cdn.bootcss.com/three.js/90/three.min.js"></script><script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script><script type="text/javascript">// 初始化相机let camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000)camera.position.z = 500;// 初始化场景let scene = new THREE.Scene()// 初始化渲染器let renderer = new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 定义一个球体，这里的参数可以根据需要调节let geometry = new THREE.SphereGeometry(50, 32, 32)let texture = new THREE.TextureLoader().load('./imgs/football.png')let material = new THREE.MeshBasicMaterial({map: texture})// 将材质和几何体进行绑定let cube = new THREE.Mesh(geometry, material)// 将绑定后的几何体放入场景中scene.add(cube)// 进行渲染function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)}animate()</script>
</body> 
</html>

在这里插入图片描述

三、使用 Three.js 渲染跳舞的火柴人

创建一个HTML文件，Matchman.html。该部分代码比较复杂，不仅需要创建场景生成火柴人，还需要给他添加一些列的动作，并完美的渲染出来（不白屏，不卡顿等）。所以需要引入很多内置的 js 文件，在此就不列举了，想要代码的可以找我要。

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - loaders - BVHLoader</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {background-color: #eee;color: #444;}a {color: #08f;}h2 {color: orange;}</style>
</head><body><div id="info"><h2>与足球共舞的火柴人【前端杂货铺】</h2></div><script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { BVHLoader } from 'three/addons/loaders/BVHLoader.js';const clock = new THREE.Clock();let camera, controls, scene, renderer;let mixer, skeletonHelper;init();animate();const loader = new BVHLoader();loader.load( 'models/bvh/pirouette.bvh', function ( result ) {skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to THREE.SkeletonHelper directlyconst boneContainer = new THREE.Group();boneContainer.add( result.skeleton.bones[ 0 ] );scene.add( skeletonHelper );scene.add( boneContainer );// play animationmixer = new THREE.AnimationMixer( skeletonHelper );mixer.clipAction( result.clip ).setEffectiveWeight( 1.0 ).play();} );function init() {camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );camera.position.set( 0, 200, 300 );scene = new THREE.Scene();scene.background = new THREE.Color( 0xeeeeee );scene.add( new THREE.GridHelper( 400, 10 ) );// rendererrenderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );controls = new OrbitControls( camera, renderer.domElement );controls.minDistance = 300;controls.maxDistance = 700;window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );const delta = clock.getDelta();if ( mixer ) mixer.update( delta );renderer.render( scene, camera );}</script>
</body>
</html>

跳舞的火柴人

四、总结（充能）

把这两部分代码 结合一下 就可以完成 与足球共舞的火柴人 了。

怎么样，是不是觉得 Three.js 还是很有意思的。

扩展：其实 Three.js 的用途还是很多的

  • 智慧城市
  • 房屋 3D 视图
  • 开发工业软件（CAD，CAE等）

总的来说 Three.js 就是来渲染 3D 效果的。目前 Three.js 是个很强大好用的 3D 渲染库，接下来我也会进行这方面的学习，到时候可以 和大家一起探索 Three.js 的世界。

五、写在最后（观世界杯有感）

随着时代的进步，科技的发展。我们的生活也正变得更加精彩和便利。世界杯的勇士们在足球场上挥洒汗水，去取得属于他们的荣誉。

同时像 格拉利什 这样的人的存在，也暖心了很多人，给这个世界增添了一分温暖。

其实每个人都可以 做一颗小星星，用自己的那一分热，去散发着自己的那一分 微弱而又耀眼的光！

在这里插入图片描述

相关文章：

程序人生 | 与足球共舞的火柴人（致敬格拉利什，赋予足球更深的意义）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…...

编程日记 2023/3/29 6:06:56

MATLAB | R2023a更新了哪些好玩的东西

R2023a来啦&#xff01;&#xff01;废话不多说看看新版本有啥有趣的玩意和好玩的特性叭&#xff01;&#xff01;把绘图放最前面叭&#xff0c;有图的内容看的人多。。 1 区域填充 可以使用xregion及yregion进行区域填充啦&#xff01;&#xff01; x -10:0.25:10; y x.^…...

编程日记 2023/5/27 0:50:01

Python Module — OpenAI ChatGPT API

目录 文章目录目录OpenAI Python SDKopenai.ChatCompletion 模块openai.ChatCompletion.create 函数OpenAI Python SDK 官方文档&#xff1a;https://platform.openai.com/docs/api-reference/introduction OpenAI Python SDK 用于开发与 OpenAI RESTful API 进行交互的客户端…...

编程日记 2023/5/19 1:20:22

Docker学习记录

阅读前请看一下&#xff1a;我是一个热衷于记录的人&#xff0c;每次写博客会反复研读&#xff0c;尽量不断提升博客质量。文章设置为仅粉丝可见&#xff0c;是因为写博客确实花了不少精力。希望互相进步谢谢&#xff01;&#xff01; 文章目录阅读前请看一下&#xff1a;我是一…...

编程日记 2023/4/21 14:29:18

Linux-VIM使用

文章目录前言VIM使用1、切换模式2、跳转(1) 跳转到指定行(2) 跳转到首行(3) 跳转到末行3、自动格式化程序4. 大括号对应5. 删除&#xff08;1&#xff09;删除一个单词&#xff08;2&#xff09;删除光标位置至行尾&#xff08;3&#xff09;删除光标位置至行首&#xff08;4&a…...

编程日记 2023/3/29 5:46:51

Windows安全中心内存完整性无法打开问题的处理方法

Windows11安全中心内存完整性无法打开 今天电脑使用过程中突然看到系统桌面右下角任务栏中 windows安全中心图标出现了警告信息&#xff0c;如下图红框所示&#xff1a; 点击该图标进入windows安全中心的 安全性概览 界面&#xff0c;如下图&#xff1a; 在该界面可以看到出现安…...

编程日记 2023/3/29 5:41:49

在芯片设计行业，从项目的初期到交付，不同的岗位的工程师主要负责什么?

大家都知道在芯片设计行业&#xff0c;项目是至关重要的一环。从项目的初期到交付&#xff0c;不同的岗位的工程师在项目的各环节主要负责什么?他们是怎样配合的?下面看看资深工程师怎么说。 一个项目&#xff0c;从初期到交付的过程是比较漫长的。我们知道最早的时候&#…...

编程日记 2023/5/4 1:51:16

Spring Cloud Alibaba全家桶（七）——Sentinel控制台规则配置

前言 本文小新为大家带来 Sentinel控制台规则配置 相关知识&#xff0c;具体内容包括流控规则&#xff08;包括&#xff1a;QPS流控规则&#xff0c;并发线程数流控规则&#xff09;&#xff0c;BlockException统一异常处理&#xff0c;流控模式&#xff08;包括&#xff1a;直…...

编程日记 2023/3/29 5:31:46

mysql-installer安装教程（详细图文）

目录 1.安装 2.配置系统环境变量 3.配置初始化my.ini文件 4.MySQL彻底删除 5.Navicat 安装 1.安装 先去官网下载需要的msi&#xff0c;在这放出官网下载地址下载地址 这里我具体以8.0.28 为安装例子&#xff0c;除了最新版安装界面有些变动以往的都是差不多的。 过去的版本…...

编程日记 2023/3/29 5:26:45

微服务架构第一阶段（nacos，gateWay，RPC）

最近在学习完 springcloud 微服务架构之后&#xff0c;自己用了之前的一个项目计划拆分成微服务的项目&#xff0c;第一阶段要求整合 nacos&#xff0c;RPC以及gateWay&#xff0c;首先来看一下几个技术组件的概念 RPC RPC 框架 —— 远程过程调用协议RPC&#xff08;Remote …...

编程日记 2023/3/29 5:21:44

【Azure 架构师学习笔记】-Azure Data Factory (5)-Managed VNet

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Data Factory】系列。 接上文【Azure 架构师学习笔记】-Azure Data Factory (4)-触发器详解-事件触发器 前言 PaaS服务默认都经过公网传输&#xff0c; 这对很多企业而言并不安全&#xff0c;那么就需要对其进行安全改…...

编程日记 2023/3/29 5:16:43

ActiveMQ(三)

协议配置 ActiveMQ 支持的协议有 TCP 、 UDP、NIO、SSL、HTTP(S) 、VM 这是activemq 的activemq.xml 中配置文件设置协议的地方 <transportConnector name"openwire" uri"tcp://0.0.0.0:61616?maximumCon nections1000&amp;wireFormat.maxFrameSiz…...

编程日记 2023/3/29 5:11:42

区块链多方计算 人工智能学习笔记

区块链&#xff1a;让数据不被篡改&#xff0c;但需要复制数据给每一块&#xff0c;造成数据泄露 多方计算 &#xff1a; 让数据用途可控。数控可用但不可见。 人工智能&#xff1a;数据更难造假 主讲人简介&#xff1a; 徐葳&#xff0c;宾夕法尼亚大学学士&#xff08;在清华…...

编程日记 2023/3/29 5:06:40

基于opencv的边缘检测方法

1、梯度运算 用OpenCV的形态变换&#xff08; 膨胀、腐蚀、开运算和闭运算&#xff09;函数morphologyEx 梯度运算即膨胀结果-腐蚀结果&#xff1a; 【注意】对于二值图像来说&#xff0c;必须是前景图像为白色&#xff0c;背景为黑色&#xff0c;否则需要进行反二值化处理 …...

编程日记 2023/3/29 5:01:39

视频封装格式篇（TS）

本篇介绍下TS的封装格式。 1.什么是TS&#xff1f; TS&#xff08;Transport Stream&#xff0c;传输流&#xff09;&#xff0c;一种常见的视频封装格式&#xff0c;是基于MPEG-2的封装格式&#xff08;所以也叫MPEG-TS&#xff09;&#xff0c;后缀为.ts。 2.TS的分层结构 …...

编程日记 2023/3/29 4:56:36

静态路由+DHCP实验（四路由器八PC）

一.200.1.1.0/24子网划分 1.划分八个子网 2.选用前5个&#xff0c;第五个子网再划分4个子网作为骨干 二.规划路由 三.配置&#xff08;下一跳&#xff09; 1.先依次实现四个路由器之间全网可通 2.为路由器配置地址池&#xff0c;使用全局模式获取dhcp&#xff0c;指定网关…...

编程日记 2023/3/29 4:51:35

数据挖掘（作业汇总）

目录 环境配置 实验1 数据 作业2 环境配置 实验开始前先配置环境 以实验室2023安装的版本为例&#xff1a; 1、安装anaconda&#xff1a;&#xff08;anaconda自带Python,安装了anaconda就不用再安装Python了&#xff09; 下载并安装 Anaconda3-2022.10-Windows-x86_64.ex…...

编程日记 2023/5/22 7:01:23

基于微信小程序的图书馆选座系统源码

开发环境及工具&#xff1a; 大等于jdk1.8&#xff0c;大于mysql5.5&#xff0c;idea&#xff08;eclipse&#xff09;&#xff0c;微信开发者工具 技术说明&#xff1a; springboot mybatis 小程序 代码注释齐全&#xff0c;没有多余代码&#xff0c;适合学习&#xff08;…...

编程日记 2023/4/22 7:23:16

K8S 三种探针 readinessProbe、livenessProbe和startupProbe

一、POD状态 Pod 常见的状态 Pending&#xff1a;挂起&#xff0c;我们在请求创建pod时&#xff0c;条件不满足&#xff0c;调度没有完成&#xff0c;没有任何一个节点能满足调度条件。已经创建了但是没有适合它运行的节点叫做挂起&#xff0c;这其中也包含集群为容器创建网络…...

编程日记 2023/3/29 4:36:31

Android 设置背景颜色透明度

前言 本章是对设计给出的颜色做透明度的处理 原因 一般情况下我们是不需要做处理的&#xff0c;那为什么又需要我们做透明度呢&#xff0c;原因就是咱们的设计小哥哥、小姐姐们没有自己做处理&#xff0c;如果处理了的话&#xff0c;我们直接使用设计标注的AHEX颜色就行&a…...

编程日记 2023/5/5 17:53:39

聚类算法层次聚类

###cluster.py #导入相应的包 import scipy import scipy.cluster.hierarchy as sch from scipy.cluster.vq import vq,kmeans,whiten import numpy as np import matplotlib.pylab as plt #生成待聚类的数据点,这里生成了20个点,每个点4维: pointsscipy.randn(20,4) #加一…...

编程日记 2023/3/29 4:26:28

js 数据类型

1.概念 数据类型指的是可以在程序中存储和操作的值的类型&#xff0c;每种编程语言都有其支持的数据类型&#xff0c;不同的数据类型用来存储不同的数据&#xff0c;例如文本、数值、图像等。 JavaScript 是一种动态类型的语言&#xff0c;在定义变量时不需要提前指定变量的类…...

编程日记 2023/4/30 16:25:22

多级评论单表结构设计

这里的多级&#xff0c;本质上其实也就二级&#xff0c;例如微博的评论&#xff0c; 一级评论&#xff1a; 对微博的评论 二级评论&#xff1a; 对微博下的评论的回复评论 &#xff0c;这里包括二种 1. 回复的是一级评论&#xff0c; 2, 回复的是二级评论 效果如下 表数据 查…...

编程日记 2023/3/29 4:16:25

Mac M1通过VMWare Fusion安装Centos7记录(镜像和网络有大坑)

以前用linux系统基本都在我的服务器上或者是在win上进行&#xff0c;从没有在M1上进行创建&#xff0c;因此走了一些坑吧&#xff0c;这里会列出我的详细安装步骤。 下载镜像 镜像的下载网站&#xff1a;https://www.centos.org/download/ 在该网站中&#xff0c;不管是Every…...

编程日记 2023/3/29 4:11:23

女生适合当程序员吗？

在这个节日里&#xff0c;让我们来讨论一个比较热门的话题吧。女生到底适不适合当程序员&#xff1f; 在开启这个话题前&#xff0c;我们先来认识一位伟大的女性吧。 阿达洛芙莱斯&#xff08;Augusta Ada King&#xff09;是著名英国诗人拜伦之女&#xff0c;她本职是一位数…...

编程日记 2023/4/22 12:43:32

昇腾AI机器人发布，12家企业、5家高校签约，昇腾AI开发者创享日全国巡展沈阳首站成功举办

“创未来&#xff0c;享非凡”昇腾AI开发者创享日2023年全国巡回首站活动成功举办&#xff0c;本次活动由辽宁省科技厅指导&#xff0c;由沈阳市科技局、浑南区人民政府、沈阳高新区管理委员会、华为技术有限公司共同主办&#xff0c;沈阳昇腾人工智能生态创新中心承办&#xf…...

编程日记 2023/3/29 4:01:20

anaconda如何改变虚拟环境安装路径

1、查看anaconda的环境配置&#xff08;对应结果如下图所示&#xff09; conda config --show 或者 conda info 查看虚拟环境安装位置的结果如上图所示 2、修改配置语法 conda config --add key value #添加语法 conda config --remove key value #删除语法 其中&#xff0…...

编程日记 2023/3/29 3:56:18

根据卫星运动矢量计算轨道六根数

前言 STK软件在给定六根数时&#xff0c;可求得卫星位置和速度矢量&#xff0c;但有时我们通过星历参数得到卫星的位置和速度矢量&#xff0c;希望能够反演得出卫星轨道的六根数。从而方便对该卫星轨道进行仿真模拟。 计算过程 给定卫星在J2000坐标系下的的位置矢量r和速度矢…...

编程日记 2023/3/29 3:51:17

关于微信小程序安装npm的过程，从下载到小程序内部安装完成

1.先从官网下载nodejs 网站为Node.js (nodejs.org)&#xff0c;选择左边第一个2 然后一直next&#xff0c;选默认就行 选择自己喜欢的路径我的是D:\nodejs-v18.12.1 3 下载完成后&#xff0c;先在安装文件夹中新建两个文件夹 node_cache node_global 4 配置一下环境变量&…...

编程日记 2023/3/29 3:46:16

IO-操作系统

用户态和内核态 现代操作系统&#xff0c;为了保护系统的安全&#xff0c;都会划分出内核空间和用户空间&#xff0c;或者我们经常说的内核态和用户态。简单来说&#xff0c;就是划分为内核态和用户态两个等级&#xff0c;运行在用户态的进程大都是一些应用程序&#xff0c;能够…...

编程日记 2023/3/29 3:41:15

wordpress首页制作幻灯片/需要优化的网站有哪些?

我们经常需要对二维数组进行迭代&#xff0c;比如这样&#xff1a; for(int x 0; x < width; x){for(int y 0; y < height; y){ screen[x][y].setColor("black"); } } 过上一段时间&#xff0c;你又要写这么一段代码&#xff1a; for(int i 0; i < rows;…...

编程日记 2025/2/6 8:16:02

广州安全教育平台入口登录处/aso优化榜单

阅读目录&#xff1a;1.背景2.项目管理&#xff0c;质量、度量、进度3.软件开发是一种设计活动而不是建筑活动4.快速开发&#xff08;简单的系统结构与复杂的业务模型&#xff09;5.技术人员的业务理解与产品经理的业务理解的最终业务模型5.1.产品的业务理解&#xff08;业务流…...

编程日记 2025/2/6 7:47:42

网站建设和连接器区公司名字/北京网站托管

题目&#xff1a;绝对值排序 输入 n(n≤100) 个整数&#xff0c;按照绝对值从大到小排序后输出。题目保证所有的数的绝对值都不相等。 输入格式&#xff1a; 第一个数字为 n接着是 n个整数。输出格式&#xff1a; 输出这 n个整数排序后的结果。Sample Input 3 3 -4 2Sampl…...

编程日记 2025/2/6 3:53:16

公司可以做多个网站吗/推广普通话手抄报简单又好看内容

关于代码的一切尽在「代码随想录」什么是链表&#xff0c;链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点是由两部分组成&#xff0c;一个是数据域一个是指针域(存放指向下一个节点的指针)&#xff0c;最后一个节点的指针域指向null(空指针的意思)。链表的类型…...

编程日记 2025/2/5 23:11:57

东莞网站建设网络公司公司/windows优化软件哪个好

分析&#xff1a;是不是觉得这个问题很基础&#xff0c;其实我也这么觉得。然而根据面试经验发现&#xff0c;至少百分八十的人答不上这个问题。建议&#xff0c;在项目中用到后&#xff0c;再类比记忆&#xff0c;体会更深&#xff0c;不要硬记。基本上&#xff0c;一个合格的…...

编程日记 2025/2/5 20:06:23

wordpress mobile 主题/广告平台推广渠道

最近对人脸识别感兴趣&#xff0c;于是入坑安装Face_recognition&#xff0c;花一天功夫没装下来&#xff0c;我的系统和Python版本是win64Anacond(python3.7.1)。 一天下来搞明白了想安装face_recongnition的必需配置好Dlib&#xff0c; 配置好dlib的必要条件是&#xff1a;自…...

编程日记 2025/2/5 16:41:21