首页 前端知识 【HTML】简单制作一个动态3D正方体

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

2024-04-13 09:04:25 前端知识 前端哥 157 666 我要收藏

 目录

前言

开始

HTML部分

JS部分

CSS部分

效果图

总结

 


前言

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

 2ac28f1371de41699e2ddeda6c1b6d4a.png

开始

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

9aa998b4a4d94f09a161df8d093c65dc.png

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; }

真就只有一行

效果图

cc8f8776430e43b8bd68a5da9fb8d3d0.png

 

总结

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

  1. 文档类型声明:通过<!DOCTYPE html>指定了文档类型为HTML5,这是创建现代网页的基础。

  2. 语言设置:在<html>标签中,lang="en"属性设置页面内容的主要语言为英语,有助于搜索引擎优化和屏幕阅读器的正确解读。

  3. 头部信息

    • 字符编码<meta charset="UTF-8">设置了页面的字符编码为UTF-8,这是一种广泛使用的国际字符编码,能够表示世界上几乎所有的字符和符号。
    • 网页标题<title>标签定义了网页的标题,即“雷神 Leo”,这个标题会显示在浏览器的标签页上,同时也是搜索引擎结果中的标题。
    • 样式表链接:通过<link>标签引入了外部的CSS文件“style.css”,该文件包含了网页的样式设计,使得页面具有更好的视觉效果和用户界面体验。
  4. 主体内容

    • Three.js库引入:在<body>标签内,首先通过<script>标签引入了Three.js库的压缩版(版本r128),这是一个强大的3D图形库,使得在网页上创建和显示3D内容成为可能。
    • JavaScript逻辑:紧接着,另一个<script>标签引入了“script.js”,这个JavaScript文件包含了创建3D场景的逻辑和动画效果。它定义了一个3D场景、相机、渲染器、几何体、材质以及动画循环函数,使得页面上的3D对象能够动态地渲染和展示。

        整体而言,这个HTML文档通过结合HTML、CSS和JavaScript技术,以及Three.js库,创建了一个具有动态3D图形的交互式网页。用户在访问这个网页时,将看到一个3D场景,场景中的3D对象会随着时间动态变化,提供了视觉上的吸引力和互动性。

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4835.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!