【HTML】简单制作一个动态3D正方体

前言

开始

HTML部分

JS部分

CSS部分

效果图

总结

前言

无需多言，本文将详细介绍一段代码，具体内容如下：

开始

首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，JS的文件名改为[script.js]，CSS的文件名改为[style.css]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

HTML部分

文档的声明开始于<!DOCTYPE html>，这是一个指令，告诉浏览器这是一个HTML5文档。紧接着，我们有一个<html>标签，它定义了整个HTML文档的根元素，并设置语言属性为英语（lang="en"）。

在<head>部分，我们首先遇到了<meta charset="UTF-8">，这是一个非常重要的设置，因为它告诉浏览器文档的字符编码是UTF-8。UTF-8是一种广泛使用的字符编码，它可以表示世界上几乎所有的字符，这使得网页可以显示多种语言和特殊符号。紧接着是一个<title>标签，它定义了浏览器标签页上显示的标题，这对于搜索引擎优化（SEO）和用户体验都非常重要。此外，<link>标签引入了一个外部的CSS文件，这个文件名为style.css，它包含了网页的样式定义，使得网页更加美观和用户友好。

<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 根元素，设置语言为英语 -->
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持多语言 -->
  <title>雷神 Leo</title> <!-- 网页标题，显示在浏览器标签页上 -->
  <link rel="stylesheet" href="./style.css"> <!-- 引入外部CSS文件，用于网页样式设计 -->
</head>
<body>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script> <!-- 引入Three.js库的压缩版，版本为r128，用于3D图形的渲染 -->
  <script src="./script.js"></script> <!-- 引入外部JavaScript文件，该文件包含网页的交互逻辑和动态效果 -->
</body>
</html>

JS部分

这段代码通过Three.js库创建了一个动态的3D场景，其中包含一个旋转的立方体，其表面颜色会随着时间变化。通过顶点和片元着色器的自定义代码，实现了立方体的动态效果。动画函数animate通过requestAnimationFrame不断更新，保证了动画的平滑和高效。

// 创建一个场景对象，这是所有3D对象的容器
const scene = new THREE.Scene();

// 创建一个透视相机，用于定义视野和观察场景的视角
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 创建一个WebGL渲染器，用于将3D场景渲染到网页上
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的大小，使其填满整个浏览器窗口
renderer.setSize( window.innerWidth, window.innerHeight );

// 将渲染器的DOM元素添加到网页的body中，这样渲染的内容就会显示在页面上
document.body.appendChild( renderer.domElement );

// 创建一个立方体的几何体对象，大小为1x1x1，每个面有32x32的细分
const geometry = new THREE.BoxGeometry(1, 1, 1, 32, 32, 32);

// 创建一个时钟对象，用于跟踪动画的时间
const clock = new THREE.Clock();

// 创建一个uniforms对象，用于传递时间和其他信息到着色器中
const uniforms = {
  time: { value: clock.getElapsedTime() }
};

// 顶点着色器的GLSL代码，用于处理每个顶点的位置和变换
const vert = `
  // 定义一个varying变量v_uv，用于传递UV坐标到片元着色器
  varying vec2 v_uv;
  
  // 定义一个uniform变量time，用于接收从JavaScript传递的时间信息
  uniform float time;
  
  // 定义一个函数rotation3dY，用于创建一个绕Y轴旋转的3x3矩阵
  mat3 rotation3dY(float angle) {
    float s = sin(angle);
    float c = cos(angle);
    return mat3(
      c, 0.0, -s,
      0.0, 1.0, 0.0,
      s, 0.0, c
    );
  }
  
  // 主函数，用于设置顶点的最终位置和传递UV坐标
  void main () {
    vec3 new_position = position.xyz;
    
    // 使用rotation3dY函数和正弦函数结合顶点的y坐标和时间信息来旋转顶点
    new_position *= rotation3dY(
      3.141 / 2.0 * sin(position.y + time)
    );
    
    // 设置最终的顶点位置
    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_position, 1.0);
    
    // 传递UV坐标到片元着色器
    v_uv = uv;
  }
`;

// 片元着色器的GLSL代码，用于确定最终的像素颜色
const frag = `
  // 定义一个varying变量v_uv，从顶点着色器接收UV坐标
  varying vec2 v_uv;
  
  // 定义一个uniform变量time，用于接收从JavaScript传递的时间信息
  uniform float time;
  
  // 主函数，用于计算每个像素的最终颜色
  void main () {
    vec2 uv = v_uv;
    
    // 根据UV坐标和时间信息计算颜色，蓝色通道会随时间变化产生波动效果
    gl_FragColor = vec4(uv.x, uv.y, 0.5 + 0.5 * sin(time), 1.0);
  }
`;

// 创建一个着色器材质对象，使用顶点和片元着色器代码
const material = new THREE.ShaderMaterial({ 
  uniforms: uniforms, // 传入uniforms对象
  vertexShader: vert, // 顶点着色器代码
  fragmentShader: frag // 片元着色器代码
});

// 创建一个立方体网格对象，包含几何体和材质
const cube = new THREE.Mesh( geometry, material );
scene.add( cube ); // 将立方体添加到场景中

// 设置相机的位置，这里将Z轴坐标设置为2，以便从立方体的外部观察它
camera.position.z = 2;

// 定义一个动画函数，用于更新立方体的旋转和渲染场景
function animate() {
  // 旋转立方体的X、Y和Z轴
  cube.rotation.x += 0.002;
  cube.rotation.y += 0.002;
  cube.rotation.z += 0.002;
  
  // 更新uniforms中的时间信息
  uniforms.time.value = clock.getElapsedTime();
  
  // 循环调用animate函数以持续更新动画，使用requestAnimationFrame来优化性能和平滑度
  requestAnimationFrame( animate );
  
  // 渲染场景和相机，将3D对象显示在网页上
  renderer.render( scene, camera );
}

// 开始动画循环
animate();

CSS部分

这段CSS代码是一个通用的样式规则，它将应用于HTML文档中的所有元素。具体来说，* 是一个通配符选择器，它表示选择所有元素。{ margin: 0; } 则是设置这些元素的margin（外边距）属性为0。

这意味着，当你在HTML文档中使用这段CSS代码时，它会移除文档中所有元素的默认外边距，使得元素之间的间距为零。这通常用于重置浏览器的默认样式，以便开发者可以更精确地控制网页的布局和设计。

例如，浏览器通常会为某些元素（如<p>、<h1>到<h6>、<ul>等）添加默认的外边距或内边距。如果你希望从零开始创建自己的样式，而不是在浏览器的默认样式基础上进行修改，你可以在CSS文件的顶部使用这个通用规则。

这是一个常见的做法，被称为“reset”或“normalize” CSS，旨在为所有元素提供一个干净的、无样式的起点。然而，需要注意的是，这种方法也有争议，因为它可能会移除一些有用的默认样式，导致后续需要重新添加这些样式。因此，一些开发者更倾向于使用更有针对性的方法来重置或标准化样式。

* { margin: 0; }

真就只有一行

效果图

总结

上面代码构建了一个基于Web的3D场景，使用了Three.js库来实现。文档的结构和功能可以概括如下：

文档类型声明：通过<!DOCTYPE html>指定了文档类型为HTML5，这是创建现代网页的基础。
语言设置：在<html>标签中，lang="en"属性设置页面内容的主要语言为英语，有助于搜索引擎优化和屏幕阅读器的正确解读。
头部信息：
- 字符编码：<meta charset="UTF-8">设置了页面的字符编码为UTF-8，这是一种广泛使用的国际字符编码，能够表示世界上几乎所有的字符和符号。
- 网页标题：<title>标签定义了网页的标题，即“雷神 Leo”，这个标题会显示在浏览器的标签页上，同时也是搜索引擎结果中的标题。
- 样式表链接：通过<link>标签引入了外部的CSS文件“style.css”，该文件包含了网页的样式设计，使得页面具有更好的视觉效果和用户界面体验。
主体内容：
- Three.js库引入：在<body>标签内，首先通过<script>标签引入了Three.js库的压缩版（版本r128），这是一个强大的3D图形库，使得在网页上创建和显示3D内容成为可能。
- JavaScript逻辑：紧接着，另一个<script>标签引入了“script.js”，这个JavaScript文件包含了创建3D场景的逻辑和动画效果。它定义了一个3D场景、相机、渲染器、几何体、材质以及动画循环函数，使得页面上的3D对象能够动态地渲染和展示。