devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML想见你

作者：菜鸟追梦旅行 | 2024-05-24 09:53:37

赞

踩

HTML想见你

图片

目录

写在前面

HTML简介

完整代码

代码分析

运行结果

系列推荐

写在后面

写在前面

因为想见你，

莫比乌斯环才会闭合，

多维时空的一次次穿越才会发生，

而相遇的意义，也在于此，

在于彼此内心深处无尽的思念之情。

这一次，

就让小编用html语言绘制一场雪中的相遇，

送给屏幕前的黄雨萱和李子维们。

HTML简介

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言。它被广泛用于构建网页，并与CSS（层叠样式表）和JavaScript一起工作，形成了现代网页的基础。以下是HTML的一些基本概念和特点：

  1. 标记语言：HTML使用标签（tag）来标记文本，以指示浏览器如何显示内容。标签通常由尖括号包围，并且可以包含属性和内容。

  2. 元素（Element）：一个完整的HTML标签及其包括的内容组成一个元素。例如，<p>元素用于定义段落，<h1>元素用于定义一级标题等。

  3. 标签（Tag）：HTML标签用于标记文本内容。它们有不同的作用和语义，如标题、段落、链接等。

  4. 属性（Attribute）：HTML标签可以包含属性，用于提供有关元素的额外信息。属性包括名称和值，例如<a href="https://www.example.com">中的href属性用于指定链接的目标URL。

  5. 结构化组织：HTML通过使用不同的标签和元素来组织网页的结构。常用的结构标签包括<header>、<nav>、<main>、<section>、<footer>等。

  6. 超链接：HTML通过<a>标签创建超链接，用于在不同的页面之间建立链接关系。

  7. 图像和媒体：HTML通过<img>标签嵌入图像，通过<video>和<audio>标签嵌入视频和音频内容。

  8. 表格：HTML提供了<table>、<tr>、<td>等标签来创建表格，用于展示结构化数据。

  9. 表单：HTML通过<form>、<input>等标签实现用户输入和数据提交功能。

  10. 样式和布局：HTML本身是用于定义内容结构的，而样式和布局则通过CSS来实现。CSS可以用于控制网页的外观和排版样式。HTML的语法相对简单，易于上手。您可以使用文本编辑器编写HTML代码，并在浏览器中查看和运行结果。随着对HTML的熟练掌握，您可以创建出丰富、交互性强的网页。

完整代码

  1. <!DOCTYPE html>
  2.  
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<title>想见你</title>
  6.  
  7. 	<style type="text/css">
  8. 		body {
  9. 			background-color: #000044;
  10. 			background: url(images/bg.jpg);
  11. 			margin: 0px;
  12. 			overflow: hidden;
  13. 		}
  14. 	</style>
  15.  
  16. </head>
  17.  
  18. <body onLoad="init()">
  19.  
  20. 	<script type="text/javascript" src="js/ThreeCanvas.js"></script>
  21. 	<script type="text/javascript" src="js/Snow.js"></script>
  22. 	<script type="text/javascript">
  23. 		var SCREEN_WIDTH = window.innerWidth;
  24. 		var SCREEN_HEIGHT = window.innerHeight;
  25.  
  26. 		var container;
  27.  
  28. 		var particle;
  29.  
  30. 		var camera;
  31. 		var scene;
  32. 		var renderer;
  33.  
  34. 		var mouseX = 0;
  35. 		var mouseY = 0;
  36.  
  37. 		var windowHalfX = window.innerWidth / 2;
  38. 		var windowHalfY = window.innerHeight / 2;
  39.  
  40. 		var particles = [];
  41. 		var particleImage = new Image();
  42. 		particleImage.src = 'images/ParticleSmoke.png';
  43.  
  44.  
  45.  
  46. 		function init() {
  47.  
  48. 			container = document.createElement('div');
  49. 			document.body.appendChild(container);
  50.  
  51. 			camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  52. 			camera.position.z = 1000;
  53.  
  54. 			scene = new THREE.Scene();
  55. 			scene.add(camera);
  56.  
  57. 			renderer = new THREE.CanvasRenderer();
  58. 			renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  59. 			var material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) });
  60.  
  61. 			for (var i = 0; i < 500; i++) {
  62.  
  63. 				particle = new Particle3D(material);
  64. 				particle.position.x = Math.random() * 2000 - 1000;
  65. 				particle.position.y = Math.random() * 2000 - 1000;
  66. 				particle.position.z = Math.random() * 2000 - 1000;
  67. 				particle.scale.x = particle.scale.y = 1;
  68. 				scene.add(particle);
  69.  
  70. 				particles.push(particle);
  71. 			}
  72.  
  73. 			container.appendChild(renderer.domElement);
  74.  
  75.  
  76. 			document.addEventListener('mousemove', onDocumentMouseMove, false);
  77. 			document.addEventListener('touchstart', onDocumentTouchStart, false);
  78. 			document.addEventListener('touchmove', onDocumentTouchMove, false);
  79.  
  80. 			setInterval(loop, 1000 / 60);
  81.  
  82. 		}
  83.  
  84. 		function onDocumentMouseMove(event) {
  85.  
  86. 			mouseX = event.clientX - windowHalfX;
  87. 			mouseY = event.clientY - windowHalfY;
  88. 		}
  89.  
  90. 		function onDocumentTouchStart(event) {
  91.  
  92. 			if (event.touches.length == 1) {
  93.  
  94. 				event.preventDefault();
  95.  
  96. 				mouseX = event.touches[0].pageX - windowHalfX;
  97. 				mouseY = event.touches[0].pageY - windowHalfY;
  98. 			}
  99. 		}
  100.  
  101. 		function onDocumentTouchMove(event) {
  102.  
  103. 			if (event.touches.length == 1) {
  104.  
  105. 				event.preventDefault();
  106.  
  107. 				mouseX = event.touches[0].pageX - windowHalfX;
  108. 				mouseY = event.touches[0].pageY - windowHalfY;
  109. 			}
  110. 		}
  111.  
  112. 		function loop() {
  113.  
  114. 			for (var i = 0; i < particles.length; i++) {
  115.  
  116. 				var particle = particles[i];
  117. 				particle.updatePhysics();
  118.  
  119. 				with (particle.position) {
  120. 					if (y < -1000) y += 2000;
  121. 					if (x > 1000) x -= 2000;
  122. 					else if (x < -1000) x += 2000;
  123. 					if (z > 1000) z -= 2000;
  124. 					else if (z < -1000) z += 2000;
  125. 				}
  126. 			}
  127.  
  128. 			camera.position.x += (mouseX - camera.position.x) * 0.05;
  129. 			camera.position.y += (- mouseY - camera.position.y) * 0.05;
  130. 			camera.lookAt(scene.position);
  131.  
  132. 			renderer.render(scene, camera);
  133.  
  134. 		}
  135. 	</script>
  136. </body>
  137.  
  138. </html>

代码分析

该网页程序基于Three.js库构建了一个动态3D粒子动画场景，具有以下主要特点和功能：

1. 页面加载完成后（`onLoad="init()"`），通过调用`init`函数启动三维场景初始化过程。首先，创建一个DOM元素作为Three.js渲染容器，并将其添加到页面中。然后定义了相机参数，采用透视投影以增强立体感，相机放置在适当距离的观察点上。

2. 在样式表部分设置了背景颜色与背景图片，为用户提供沉浸式视觉体验。同时，通过JavaScript动态获取浏览器窗口尺寸来适配不同设备屏幕。

3. 初始化Three.js的核心组件：场景、相机以及Canvas渲染器。接着，加载粒子纹理图像资源，用于粒子效果的外观显示。

4. `init`函数进一步循环生成500个粒子对象，每个粒子的位置随机分布在三维空间内，并赋予其基础属性如初始位置和缩放比例。这些粒子均使用预加载的粒子贴图，并被加入到全局场景中。

5. 为了实现用户交互，程序注册了鼠标移动事件和触摸事件监听器，更新鼠标坐标变量，以便在后续帧动画中控制相机视角。

6. 主循环函数`loop`每秒执行60次，确保平滑的动画效果。在这个循环中，每个粒子都会调用自身的物理更新方法，模拟粒子在空间中的飘动行为。同时，通过边界条件保证粒子在一定范围内循环运动，防止超出视窗范围消失。

7. 根据实时更新的鼠标坐标，程序会平缓地调整相机位置并使其始终面向场景中心，实现了通过鼠标或触屏拖拽进行视角变换的功能。

8. 最后，每一帧循环结束时，程序通过CanvasRenderer将当前场景渲染到网页上，呈现出动感十足且可交互的3D粒子特效。

综上所述，这段代码借助Three.js强大的WebGL图形处理能力，成功创建了一个包含大量动态粒子、支持用户交互的三维可视化应用场景。

运行结果

图片

系列推荐

序号目录直达链接
1HTML实现3D相册https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5HTML飘落的花瓣https://want595.blog.csdn.net/article/details/138785324
6HTML哆啦A梦https://want595.blog.csdn.net/article/details/138834877
7HTML爱情树https://want595.blog.csdn.net/article/details/139009594
8HTML新春烟花盛宴https://want595.blog.csdn.net/article/details/139102775
9HTML想见你
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

喜欢本篇内容的小伙伴，可以给小编点个赞嘛！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/616912
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号