位置: IT常识 - 正文

程序人生 | 与足球共舞的火柴人(致敬格拉利什,赋予足球更深的意义)(程序人是什么意思)

编辑:rootadmin
程序人生 | 与足球共舞的火柴人(致敬格拉利什,赋予足球更深的意义)

推荐整理分享程序人生 | 与足球共舞的火柴人(致敬格拉利什,赋予足球更深的意义)(程序人是什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:程序人生雷军,程序人生官网,程序化人生,csdn程序人生,程序人生官网,程序人生官网,程序人生英文,程序人生可爱图片,内容如对您有帮助,希望把文章链接给更多的朋友!

个人简介

👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端 📃个人状态: 在校大学生一枚,已拿多个前端 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 的世界。

五、写在最后(观世界杯有感)

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

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/299847.html 转载请保留说明!

上一篇:微信小程序下拉刷新(微信小程序下拉菜单怎么做)

下一篇:【无标题】(无标题节啥意思)

  • 苹果手机怎么快速删除联系人(苹果手机怎么快速删除手机短信)

    苹果手机怎么快速删除联系人(苹果手机怎么快速删除手机短信)

  • cstnet指的是

    cstnet指的是

  • 网站维护一般要几天(网站维护一般都是维护什么)

    网站维护一般要几天(网站维护一般都是维护什么)

  • 微信视频没声音怎么回事(微信视频没声音是怎么回事)

    微信视频没声音怎么回事(微信视频没声音是怎么回事)

  • 苹果手机没电关机后充不进电(苹果手机没电关机了怎么开机)

    苹果手机没电关机后充不进电(苹果手机没电关机了怎么开机)

  • 苹果可以应用分身吗(苹果可以应用分身淘宝吗)

    苹果可以应用分身吗(苹果可以应用分身淘宝吗)

  • 小米人工智能叫什么(你认识小米的人工智能吗)

    小米人工智能叫什么(你认识小米的人工智能吗)

  • 电脑按哪个快捷键出计算器(电脑按哪个快捷键关闭计算器)

    电脑按哪个快捷键出计算器(电脑按哪个快捷键关闭计算器)

  • 笔记本边充电边用对电池有影响吗(笔记本边充电边玩风扇响声大)

    笔记本边充电边用对电池有影响吗(笔记本边充电边玩风扇响声大)

  • 天猫精灵可以微信聊天吗(天猫精灵可以微信吗?)

    天猫精灵可以微信聊天吗(天猫精灵可以微信吗?)

  • word2007没保存怎么恢复(word2007没保存怎么办)

    word2007没保存怎么恢复(word2007没保存怎么办)

  • 手机增强信息啥意思(手机中增强信息是什么)

    手机增强信息啥意思(手机中增强信息是什么)

  • 手机调音器怎么用(手机调音器怎么特殊调弦)

    手机调音器怎么用(手机调音器怎么特殊调弦)

  • 手机正在运行的程序怎么关闭(手机正在运行的程序怎么关闭华为)

    手机正在运行的程序怎么关闭(手机正在运行的程序怎么关闭华为)

  • 手机上fido是什么意思(华为手机上的fido是干什么的)

    手机上fido是什么意思(华为手机上的fido是干什么的)

  • xr的3dtouch怎么打开

    xr的3dtouch怎么打开

  • 无法与服务器建立安全的连接(无法与服务器建立安全连接怎么办苹果)

    无法与服务器建立安全的连接(无法与服务器建立安全连接怎么办苹果)

  • ps怎么抠掉不要的部分

    ps怎么抠掉不要的部分

  • 小米8短信不提醒(小米短信不提示了怎么办)

    小米8短信不提醒(小米短信不提示了怎么办)

  • lte全称(LTE全称为Long Term Evolution)

    lte全称(LTE全称为Long Term Evolution)

  • 手机怎么和电视多屏互动(手机怎么和电视传输文件)

    手机怎么和电视多屏互动(手机怎么和电视传输文件)

  • 在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

    在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

  • linux查看磁盘空间命令教程(linux查看磁盘空间 命令fdisk)

    linux查看磁盘空间命令教程(linux查看磁盘空间 命令fdisk)

  • ChatGPT 被大面积封号,到底发生什么了?

    ChatGPT 被大面积封号,到底发生什么了?

  • 工会开户所需资料怎么写
  • 非限定性净资产相当于本年利润吗
  • 基本户的利息和本金比例
  • 什么公司可以开普票
  • 公司注册后一直没有营业怎么办
  • 公司抬头的发票
  • 医疗服务收入占比标准
  • 如何查询一个公司的资质情况
  • 股东经济性质怎么填
  • 跨年度费用报销违反什么规定
  • 资本公积是属于什么类账户
  • 阿里巴巴新任董事长简历
  • 医院收到卫生局补助会计分录怎么写
  • 员工工资的扣点
  • 异地缴纳个人所得税
  • 企业在筹办期间发生的开办费计入管理费用账户
  • 一般纳税人从小规模纳税人取得专用发票
  • 取得的增值税发票哪些项目必须开具事项
  • 滴滴行程单修改后是否能查
  • 购销合同的会计分录怎么写
  • 企业购买理财产品收益会计分录
  • 海关对现金携带数量有要求吗
  • 跨年度多计提的社保调整
  • 银行余额不平怎么快速找原因
  • 月末进项税额结转会计分录
  • win11怎么看电脑配置
  • 员工没有工资卡可以转到一个人的账户上发工资不
  • wordpress导入主题教程
  • 促销费用计入销售费用哪个科目
  • 工程价款结算的方式
  • 马齿笕对什么病最有效?
  • 电脑桌面调出键盘
  • 跨国公司外汇资金集中
  • 关于扩展检索,下列说法正确的是
  • 房产税和土地使用税什么时候申报
  • php如何使用
  • 财政专户资金是专项资金吗
  • 金税三期登录不上
  • 新政府会计制度固定资产核算
  • 固定资产加速折旧最新税收政策2023
  • js获取本机ip地址
  • 关于简单的绘画
  • php静态方法可以被继承吗
  • 解决什么情况
  • 租房开的发票收的税怎么做账?
  • 生产加工企业的成本核算
  • 去哪儿网发票能不能不开旅游
  • 出口退税方法相关文献
  • 小规模纳税人增值税专用发票税率
  • 汇算清缴银行手续费放哪里
  • 母公司合并子公司报表
  • 存货核算方法有五种
  • 仓库转租合同
  • 递延所得税当前试用25%,以后15%
  • 广告费计入什么会计分录
  • 小企业会计准则坏账怎么处理
  • 企业的借款费用有哪些处理方法
  • 帮客户支付的机票计入什么科目
  • 什么是折旧费
  • win10预览版21277
  • win8更新8.1
  • win10周年更新版是什么意思
  • linux中rsync有什么用
  • 超级管理员不能用winhello
  • 桌面预览怎么设置
  • [置顶] [寒江孤叶丶的Cocos2d-x之旅_27]CocoStudio导出的LUA文件怎么使用?
  • cocos creator内存性能优化
  • shell脚本实现文件移动、复制等操作
  • react.development.js
  • jquery可以实现哪些效果
  • flash怎么测试当前场景
  • Android音乐播放器评论功能怎么实现
  • jqueryapi手机版
  • 如何打印高速公路电子发票
  • 土地出让金入账后就摊销吗
  • 举报纳税电话
  • 盼之代售怎么下载
  • 关税由谁来承担
  • 个人所得税申报是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设