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

这篇具有很好参考价值的文章主要介绍了程序人生 | 与足球共舞的火柴人(致敬格拉利什,赋予足球更深的意义)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人简介

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


一、前言

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

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

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

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

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

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

与足球共舞的火柴人

二、使用 Three.js 渲染足球

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

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

three.js textture 足球,Three.js,程序人生,前端,javascript,three.js

创建一个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 textture 足球,Three.js,程序人生,前端,javascript,three.js

三、使用 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>

跳舞的火柴人

四、总结(充能)

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

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

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

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

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

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

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

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

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


three.js textture 足球,Three.js,程序人生,前端,javascript,three.js文章来源地址https://www.toymoban.com/news/detail-786303.html


到了这里,关于程序人生 | 与足球共舞的火柴人(致敬格拉利什,赋予足球更深的意义)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 雷军:我的程序人生路

    今天有朋友发给我一篇我在20年前在BBS上写的帖子。那还是1996年,我们通过电话线拨号连接到西点BBS上飙帖子玩的年代。那是一个互联网混沌初开的年代,那是一个BBS和Email几乎主宰了全部互联网的年代,那是一个青春的理想和热血沸腾的年代。 我是一个程序员,一个软件工

    2024年02月04日
    浏览(81)
  • 哈工大CSAPP程序人生大作业

    正在上传…重新上传取消 计算机系统 大作业 题     目   程序人生 -Hello’s P2P  专       业    计算机科学与技术        学    号   2021110991             班    级      2103101             学       生         安心           指 导 教 师    

    2023年04月24日
    浏览(72)
  • 程序人生——Java数组和集合使用建议(2)

    程序人生——Java数组和集合使用建议(2) 需求:要删除一个ArrayList中的20-30范围内的元素;将原列表转换为一个可变列表,然后使用subList获取到原列表20到30范围内的一个视图(View),然后清空该视图内的元素,即可在原列表中删除20到30范围内的元素 建议72:生成子列表后

    2024年03月19日
    浏览(50)
  • 【程序人生】上海城市开发者社区小聚有感

    📫作者简介: 小明java问道之路 , 2022年度博客之星全国TOP3 ,专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化,文章内容兼具广度、深度、大厂技术方案,对待技术喜欢推理加验证,就职于知名金融公司后端高级工程师。          📫 热衷分享,喜欢原

    2024年02月06日
    浏览(68)
  • 程序人生 | 编程的上帝视角应该怎么去找

      前言 📫 作者简介 :小明java问道之路,专注于Linux内核/汇编/HotSpot/C++/Java/源码/架构/算法 就职于大型金融公司后端高级工程师,擅长交易领域的高安全/可用/并发/性能的架构设计📫  🏆 CSDN专家博主/Java优质创作者/CSDN内容合伙人 、InfoQ签约作者 、阿里云专家/签约博主、

    2023年04月24日
    浏览(89)
  • 【程序人生】如何在工作中保持稳定的情绪?

    在工作中保持稳定的情绪是现代生活中一个备受关注的话题。随着职场压力和工作挑战的增加,我们常常发现自己情绪波动不定,甚至受到负面情绪的困扰。然而,保持稳定的情绪对于我们的工作效率、人际关系和整体幸福感都至关重要。 无论你是一位职场新人还是一位资深

    2024年02月15日
    浏览(46)
  • C罗老矣,我的程序人生还有多远

    ☆ 随着12月11号摩洛哥1-0葡萄牙比赛的结束,不仅说明葡萄牙对要结束本届卡塔尔世界杯了,就连C罗此生的世界杯之旅也将画上句号了。 ☆ 37岁的球星本该是人生最璀璨的阶段,但在足球生涯中,这已经是大龄了。不禁让我想到,身为开发的我,也大概类似吧。   目录  1、

    2024年01月16日
    浏览(52)
  • 【程序人生】还记得当初自己为什么选择计算机?

            还记得人生中第一次接触计算机编程是在高中,第一门编程语言是Python(很可惜由于条件限制的原因,当时没能坚持学下去......现在想来有点后悔,没能坚持,唉......)。但是,错过的就错过了,把握当前才是正确的选择。努力最好的时机永远是在过去,其次就在当

    2024年02月04日
    浏览(65)
  • 《人生苦短,我学Python》——第一个python程序

    Hello!朋友们大家好,从今天开始,我们将学习 Python 的相关内容。 首先,让我们来思考一个问题,编程是什么? 编程是人类与电脑沟通的过程,可以告诉电脑做什么以及怎么做。人类用编程构建数字世界,比如网站、App、办公软件等等。 世界上有很多种编程语言,比如C,

    2024年02月11日
    浏览(45)
  • 人工智能AI时代:全栈程序员的人生规划

    博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客👦🏻 《java 面试题大全》 🍩惟余辈才疏学浅,临摹之作或有不妥之处,还请读者海涵指正。☕🍭 《MYSQL从入门到精通》数据库是开发者必会基础之一~ 🪁 吾期望此文有资助于尔,即使粗浅难及深广,亦备添少许微薄

    2024年02月11日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包