位置: 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 转载请保留说明!

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

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

  • 微信打电话怎么设置铃声(微信打电话怎么看视频)

    微信打电话怎么设置铃声(微信打电话怎么看视频)

  • 荣耀20Pro输入法设置在哪里(荣耀20pro输入法怎么设置)

    荣耀20Pro输入法设置在哪里(荣耀20pro输入法怎么设置)

  • b站音乐区怎么进(b站音乐区视频怎么做)

    b站音乐区怎么进(b站音乐区视频怎么做)

  • 华为potal10什么型号啊(华为10plos)

    华为potal10什么型号啊(华为10plos)

  • 别人发的红包没领删除了怎么办(别人发的红包没有领删了聊天记录怎么办)

    别人发的红包没领删除了怎么办(别人发的红包没有领删了聊天记录怎么办)

  • 双重认证查找定位会提示吗(开启双重认证怎么查找位置)

    双重认证查找定位会提示吗(开启双重认证怎么查找位置)

  • 机箱有轻微震动电脑就重启(机箱有轻微震动电脑就黑屏)

    机箱有轻微震动电脑就重启(机箱有轻微震动电脑就黑屏)

  • 1660ti属于高端显卡吗(1660ti什么档次)

    1660ti属于高端显卡吗(1660ti什么档次)

  • 笔记本充不进去电一拔电源就关机了(笔记本充不进去电怎么解决)

    笔记本充不进去电一拔电源就关机了(笔记本充不进去电怎么解决)

  • 手机无法进入快充模式(手机无法进入快充模式导致充电慢)

    手机无法进入快充模式(手机无法进入快充模式导致充电慢)

  • 联想电脑pin码忘了怎么办(联想电脑pin码忘记开不了机怎么办)

    联想电脑pin码忘了怎么办(联想电脑pin码忘记开不了机怎么办)

  • vivox27怎么设置来电壁纸(vivox27怎么设置字体大小)

    vivox27怎么设置来电壁纸(vivox27怎么设置字体大小)

  • wps表格删除多余格子(wps表格删除多余的空白页面)

    wps表格删除多余格子(wps表格删除多余的空白页面)

  • 小米6快充怎么设置(小米快充怎么变成普通充电)

    小米6快充怎么设置(小米快充怎么变成普通充电)

  • 华为手环4pro什么时候出(华为手环4Pro什么时候发布)

    华为手环4pro什么时候出(华为手环4Pro什么时候发布)

  • 荣耀20怎么查看后台程序(荣耀20怎么查看电池健康度)

    荣耀20怎么查看后台程序(荣耀20怎么查看电池健康度)

  • qq关注太频繁怎么解决(qq为什么关注操作过于频繁)

    qq关注太频繁怎么解决(qq为什么关注操作过于频繁)

  • net ping怎么用(net=newp)

    net ping怎么用(net=newp)

  • 全球上网工具插件是什么(全球上网工具插件和全球上网有什么区别)

    全球上网工具插件是什么(全球上网工具插件和全球上网有什么区别)

  • 荣耀playip几级防水(华为荣耀play防不防水)

    荣耀playip几级防水(华为荣耀play防不防水)

  • beatsx开机键在哪

    beatsx开机键在哪

  • 苹果相册人物怎么增加(苹果相册人物怎么关闭,删了又有)

    苹果相册人物怎么增加(苹果相册人物怎么关闭,删了又有)

  • 0x00000024蓝屏怎么办?0x00000024蓝屏解决方法(0x00000024蓝屏怎样解决)

    0x00000024蓝屏怎么办?0x00000024蓝屏解决方法(0x00000024蓝屏怎样解决)

  • Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

    Win11 Dev预览版出现奇怪 Bug:电量能充到 100% 以上(windows 11预览版)

  • 微软正在成为Linux基金会白金会员(微软即将终止当前系统版本)

    微软正在成为Linux基金会白金会员(微软即将终止当前系统版本)

  • uniapp h5的支付宝,微信支付(uniapp接入支付宝)

    uniapp h5的支付宝,微信支付(uniapp接入支付宝)

  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

    vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

  • 车船税不交有什么影响 三大影响要注意
  • 企业回购股票会使所有者权益
  • 房地产土地使用权是无形资产吗
  • 房东收到房租转让费会计处理
  • 虚开增值税普通罪量刑标准
  • 共同控制合营企业
  • 捐赠和赞助业务的税务处理怎么做?
  • 合并报表长期股权投资怎么算
  • 在建工程过程中取得收入怎么入账
  • 小规模纳税人增值税优惠政策2023
  • 多收账款怎么账务处理
  • 不是企业性质的民办学校要交什么税
  • 破坏公司财产员工怎么处理
  • 转账支票必须对着开发票单位吗?
  • 税收分类编码怎么导出来
  • 物流公司开票税率
  • 机动车发票怎么作废
  • 外省工程需要什么手续
  • 贴现扣的钱叫什么
  • 向境外分配股息怎样算税额
  • 进口货物的企业有哪些
  • win11正式版发布
  • mac如何强制退出全屏
  • 周转材料月末有余额吗
  • 来电转接怎么设置空号
  • 清理系统所有垃圾
  • php5.4升级到php7
  • 增值税专用发票的税率是多少啊
  • 微信小程序分成比例
  • 数据库操作实例
  • 境外支付佣金代扣代缴增值税
  • 新所得税会计准则
  • thinkphp5 ajax
  • 什么叫非侵入性装置
  • 租用办公设备
  • 商品仓储费用会增加吗
  • 残保金申报操作流程
  • 网站top排行榜
  • 任何单位和个人发现洗钱活动有权向什么举报
  • 从业人数啥意思
  • 经营租赁会计的核算原则
  • 年底进项税额比年初多
  • 土石方收据图片
  • 电费为什么计入其他应付款
  • 异常凭证一定要转出吗
  • 收到备用金会计分录
  • 农机免税发票能抵扣吗
  • 医保指的是啥
  • 交易性金融资产的账务处理
  • 个税起征点调整最新消息
  • 固定资产折旧递延收益
  • 租金收入如何分红给股东
  • 客户付了订金后能退吗
  • 新注册的公司怎么申报个税
  • 建账的要点
  • 企业出租商业铺面需要缴纳什么税
  • win7怎么打开后缀
  • 如何卸载独显
  • bash.exe
  • win8进入电脑休眠后怎么唤醒
  • win7一直处于开机界面
  • ssh远程安装软件
  • linux 管理员登录
  • win8怎么把网速调到最快
  • js布尔类型用法
  • django orm left join
  • ubuntu运行qt程序
  • [置顶]马粥街残酷史
  • javascript基于什么的语言
  • javascriptz
  • 基于jQuey实现鼠标滑过变色(整行变色)
  • div遮罩层整个页面
  • linux perl -e
  • python socket编程教程
  • <2> unity3d 分包与上google play 之具体实战
  • android draglistview中拖动异常显示,无法移动到原先位置
  • 个人所得税完税证明图片
  • 进口完税价格包括哪些部分
  • 广东省税务总局官网
  • 香水类香精应该具备什么条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设