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

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

一、前言

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

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

https://www.bilibili.com/video/BV1o84y1C76d?t=38.9

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


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


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


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

https://www.bilibili.com/video/BV1U84y1k7KG?t=1.2

与足球共舞的火柴人


二、使用 Three.js 渲染足球

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


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

fcb78fd2860442239259f9e1afaac0ef.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>

4123106c63824fd58aed3009a450a24f.png

三、使用 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 directly
        const boneContainer = new THREE.Group();
        boneContainer.add( result.skeleton.bones[ 0 ] );
        scene.add( skeletonHelper );
        scene.add( boneContainer );
        // play animation
        mixer = 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 ) );
        // renderer
        renderer = 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>

https://www.bilibili.com/video/BV1hG4y1R7tJ?t=0.7

跳舞的火柴人

四、总结(充能)

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

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

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

  • 智慧城市
  • 房屋 3D 视图
  • 开发工业软件(CAD,CAE等)

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

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

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


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


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

45fc82a82c6542bdb2ff4986377d8db3.png

相关文章
|
9月前
|
设计模式 算法 程序员
代码的诗意:技术与艺术的交织
【6月更文挑战第28天】在数字世界的构建中,编程往往被视为一项枯燥且逻辑性强的技术活动。然而,当我们深入探究时,会发现编程不仅涉及逻辑和算法,还蕴含着一种独特的艺术美。本文将探讨编程如何融合技术性和艺术性,揭示代码背后的诗意及其对创造性思维的促进作用。通过个人的技术感悟,我们将看到,编程不仅是科技的产物,也是人类创造力的展现。
60 1
|
安全 iOS开发 UED
实战编程·刻在男人DNA里的浪漫,空气投篮(一)
实战编程·刻在男人DNA里的浪漫,空气投篮(一)
114 0
|
图形学
3D建模师做多了女人会不会找不到老婆?次世代美少女战士建模流程讲解
次世代是个舶来语,“次世代游戏”指代和同类游戏相比下更加先进的游戏,即“下一代游戏”。 次世代是利用高模烘焙的法线贴图回帖到低模上,让低模在游戏引擎里可以及时显示高模的视觉效果。模型面数比较高,采用法线贴图来描绘物体表面细节的凸凹变化;颜色贴图来表现物体的颜色和纹理;高光贴图来表现物体在光线照射条件下体现出的质感,增加贴图的大小。
155 0
|
Java
编写Java程序,模拟教练员和运动员出国比赛场景,其中运动员包括乒乓球运动员和篮球运动员。教练员包括乒乓球教练和篮球教练。为了方便出国交流,根乒乓球相关的人员都需要学习英语。
编写Java程序,模拟教练员和运动员出国比赛场景,其中运动员包括乒乓球运动员和篮球运动员。教练员包括乒乓球教练和篮球教练。为了方便出国交流,根乒乓球相关的人员都需要学习英语。
338 0
编写Java程序,模拟教练员和运动员出国比赛场景,其中运动员包括乒乓球运动员和篮球运动员。教练员包括乒乓球教练和篮球教练。为了方便出国交流,根乒乓球相关的人员都需要学习英语。
|
传感器 机器人
黑镜狗再现!波士顿动力「大黄狗」上岗SpaceX,勘察火箭爆炸现场
近日,SpaceX星际飞船爆炸现场上演了如同「黑镜」中的一幕。一只来自波士顿动力的「大黄狗」在星舰原型SN10爆炸现场附近巡逻,并帮助工人清理和回收火箭零部件。这一场景引来众多网友围观,称其为黑镜狗。
175 0
黑镜狗再现!波士顿动力「大黄狗」上岗SpaceX,勘察火箭爆炸现场
|
新零售 人工智能 机器人
【好莱坞再现钢铁战士】阿里筹拍AI电影,《阿甘正传》导演执导
阿里巴巴正在筹拍一部关于机器人的电影《钢铁战士》,讲述人与机器人士兵并肩作战的故事,将由《阿甘正传》导演Robert Zemeckis执导。你会去电影院看吗?
2586 0

热门文章

最新文章