1. Looking forward to the final
Station C must have many friends who watch the game. Tomorrow will usher in the final showdown of the 2022 World Cup, with Argentina playing against France. Come catch an evening episode, and also talk about the World Cup. The next four years will be 2026. Will this spirit still exist? Let's first review the matchups in this round of the World Cup.
In this round of the World Cup, the Japanese and South Korean teams are close to the top 8 as Asian teams. It was quite exciting to see at that time. It is indeed the light of Asia, and reaching the top 8 of the World Cup is definitely a strength. As a fake fan, I still strongly hope to see that a certain football team can also make a line. For this kind of topic, friends, save your firepower and don't be angry.
2. Counting the World Cup
1. Expenditure over the years
1. The cost of the 1990 World Cup in Italy: $4 billion;
2. The cost of the 1994 World Cup in the United States: $500 million;
3. Cost of the 1998 World Cup in France: $2.3 billion;
4. The cost of the 2002 Korea-Japan World Cup: US$7 billion;
5. The cost of the 2006 World Cup in Germany: $4.5 billion;
6. The cost of the 2010 World Cup in South Africa: $3.6 billion;
7. Cost of the 2014 World Cup in Brazil: $15 billion;
8. The cost of the 2018 World Cup in Russia: $11.6 billion;
9. The cost of the 2022 World Cup in Qatar: $229 billion;
As an energy exporting country, Qatar spent 229 billion US dollars on this year's World Cup, which directly raised the cost of the entire World Cup. The epidemic is entangled with the future of the world. What to do next year is a bit exciting.
2. Champions since 1990
1. The fourteenth session: 1990, the World Cup in Italy. West German champion.
2. The fifteenth session: 1994, the World Cup in the United States. Brazilian champion.
3. The sixteenth session: 1998, the World Cup in France. French champion.
4. The seventeenth session: 2002, World Cup in Korea and Japan. Brazilian champion.
5. The eighteenth session: 2006, the World Cup in Germany. Italian champion.
6. The 19th session: 2010, the World Cup in South Africa. Spanish champion.
7. The twentieth session: 2014, Brazil World Cup. German champion.
8. The twenty-first session: 2018, Russia World Cup. French champion.
As a previous strong team, Brazil has won 2 World Cup championships in the past 8 times, and it is also the most number of championships in the previous World Cups. But in this World Cup, Croatia was sent home, ending the World Cup journey.
3. 2022 World Cup goals ranking
Let's take a look at the players' goal rankings in this year's World Cup.
Mbappe and Messi are tied for the top spot and currently have the most goals. Let us wait and see what exciting events they will stage in the Championship Contest.
3. Small case of Threejs Stadium
As a pseudo-fan, the above summarizes some information about this World Cup in Qatar and previous World Cups. Let's share a small case of a court based on Threejs as a technical person. Before sharing the example, you need to prepare two pictures, a football and a football field. as follows:
A complete code example is as follows:
<!DOCTYPE html>
<html>
<head>
<title>世界杯</title>
<script src="three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
var renderer;
var scene;
var camera;
var control;
var camControl;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 15;
camera.position.y = 6;
camera.position.z = 15;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var spotLight = new THREE.SpotLight();
spotLight.position.set(0, 80, 30);
spotLight.castShadow = true;
scene.add(spotLight);
document.body.appendChild(renderer.domElement);
addFloor();
addRail();
addSphere();
render();
}
function addFloor() {
var floorGeom = new THREE.PlaneGeometry(100,100,20,20);
var floorMater = new THREE.MeshPhongMaterial();
floorMater.map = THREE.ImageUtils.loadTexture('http://localhost:8086/3js/football/cd.jpeg');
//沿着(S)x,(T)y方向允许纹理重复自己
floorMater.map.wrapS = floorMater.map.wrapT = THREE.REpeatWrapping;
//material.map.repeat.set(repeatX,repeatY);repeatX：指定在x轴方向多久重复一次。repeatY：指定在y轴方向多久重复一次。
//如果设置为1，都不会重复。 如果设置<1，纹理就会被放大。 如果设置为负数，就会产生纹理镜像。
floorMater.map.repeat.set(20,20);
var floor = new THREE.Mesh(floorGeom,floorMater);
floor.receiveShadow = true;
floor.rotation.x = -0.5 * Math.PI;
scene.add(floor);
}
function addRail() {
var cylinderGeometry = new THREE.CylinderGeometry(0.1, 0.1,15,50,50);
var cylinderMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
var cylinder = new THREE.Mesh(cylinderGeometry,cylinderMaterial);
cylinder.position.set(1,5,1);
cylinder.rotation.x = '15';
cylinder.rotation.y = '-57.8';
cylinder.rotation.z = '-14.85';
cylinder.name = 'cylinder';
scene.add(cylinder);
}
function addSphere() {
var sphereGeometry = new THREE.SphereGeometry(0.8, 25, 25);
var sphereMaterial = new THREE.MeshBasicMaterial({specular: '#a9fcff',emissive: '#006063',shininess: 10});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(7,0.8,-1);
sphere.castShadow = true;
var texture = new THREE.ImageUtils.loadTexture("http://localhost:8086/3js/football/football.jpeg");
sphereMaterial.map = texture;
sphere.name = 'sphere';
scene.add(sphere);
}
var step = 0;
function render() {
var sphere = scene.getObjectByName('sphere');
renderer.render(scene, camera);
camera.lookAt(sphere.position);
step += 0.02;
sphere.position.x = 0 + ( 10 * (Math.cos(step)));
sphere.position.y = 0.75 * Math.PI / 2 + ( 6.5 * Math.abs(Math.sin(step)));
sphere.rotation.z += 0.03;
var x = camera.position.x;
var z = camera.position.z;
camera.position.x = x * Math.cos(0.015) + z * Math.sin(0.015);
camera.position.z = z * Math.cos(0.015) - x * Math.sin(0.015);
requestAnimationFrame(render);
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.onload = init;
window.addEventListener('resize', onResize, false);
</script>
<body>
</body>
</html>After using Nginx to publish the above static web pages, you can see the following effects:
Interested friends can copy it directly, and then introduce a Threejs dependent js to run it.
at last
The World Cup welcomes the finals, who is the champion team in everyone's mind? I hope that everyone can have a positive sportsmanship, unite and work hard, never give up, and run towards the future.