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

 目录

前言

开始

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对象会随着时间动态变化,提供了视觉上的吸引力和互动性。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据仓库——聚集

数据仓库基础笔记思维导图已经整理完毕&#xff0c;完整连接为&#xff1a; 数据仓库基础知识笔记思维导图 聚集 在对性能不断探索的过程中&#xff0c;聚集是最强大最、有效的数据处理工具。通过仔细规划和集成&#xff0c;聚集将队数据仓库性能产生巨大影响。无需针对特定的…

win11安装wsl报错:无法解析服务器的名称或地址

一 说明 项目开发中&#xff0c;需要用到wsl&#xff0c;因此根据wsl官方&#xff08;WSL安装教程&#xff09;命令 wsl --install 进行wsl的安装。而本文主要是记录自己在安装wsl中遇到的问题 “无法解析服务器的名称或地址” 的解决办法。 二 方法一&#xff1a;更改DNS&…

在Go语言中如何避免接口污染

在设计和构造代码时,接口是Go语言的基石之一。然而,就像许多工具或概念一样,滥用它们通常不是一个好主意。接口污染就是用不必要的抽象使我们的代码变得难以理解。这是来自另一种编程语言具有不同习惯的开发人员经常犯的错误。在深入讨论这个话题之前,让我们重新思考一下Go…

Java文件内容查找:简单实现与应用

一、Java文件内容查找的基本原理 在Java中&#xff0c;文件内容查找可以通过读取文件并逐行检查每一行内容来实现。基本的流程包括以下几个步骤&#xff1a; 打开文件&#xff1a;使用Java的文件操作类&#xff08;如FileInputStream&#xff09;打开要查找的文件。 逐行读取…

算法练习----力扣每日一题------6

原题链接&#xff1a; 1379. 找出克隆二叉树中的相同节点 - 力扣&#xff08;LeetCode&#xff09; 题目解析&#xff1a; 给两个二叉树&#xff0c;original和它的克隆树cloned,二者存的数据和数据的相对位置完全一样&#xff0c;给一个o树里的节点target&#xff0c;求对应的…

Kotlin作用域函数:let、also、run、apply、with

​​​​​​​ let函数 使用场景&#xff1a;可空变量的操作&#xff0c;无需判空 p?.let {it.name "lily"it.age "21"} also函数 使用场景&#xff1a;多个扩展函数链式调用&#xff08;返回值是本身&#xff09; p?.also {it.name "den…

HCIA-RS基础-VLAN技术原理和配置

目录 VLAN 技术原理和配置1. VLAN 技术的背景2. VLAN 标签的产生方法3. VLAN 标签的应用规则4. VLAN 的配置总结 VLAN 技术原理和配置 1. VLAN 技术的背景 VLAN&#xff08;Virtual Local Area Network&#xff09;是一种逻辑上划分网络的技术&#xff0c;可以将一个物理局域…

Postman 请求参数传递指南:Query、Path 和 Body 详解

Postman 是一个非常流行的 API 开发环境&#xff0c;它允许开发者测试、开发和文档化他们的 API。在 Postman 中&#xff0c;当你发送一个请求时&#xff0c;你可能需要将参数传递给服务器。这些参数可以通过不同的方式传递&#xff0c;例如 Query Parameters&#xff08;查询参…

使用 select 标签,1 分钟完成一个简单的下拉菜单

在网上冲浪时&#xff0c;我们经常遇到需要做出选择的情况&#xff0c;比如选择你喜爱的电影类型、预订酒店的房间类型或者在网购时挑选衣服的尺码。 这些选择往往通过一个简洁明了的下拉菜单来实现&#xff0c;让我们的决策过程变得轻松愉快。这个神奇的下拉菜单&#xff0c;…

算法打卡day25

今日任务&#xff1a; 1&#xff09;491.递增子序列 2&#xff09;46.全排列 3&#xff09;47.全排列 II 491.递增子序列 题目链接&#xff1a;491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 给定一个整型数组, 你的任务是找到所有该数组的递增子序列&#xff0c…

composure合成透明通道

composure合成透明通道 2022-05-23 08:59 [技巧分享]使用配有HDRI的背板的进行合成 Using Composure with a Bac - 1.Using Composure with a Backplate and H.mp41启用插件2线性色彩空间3打开合成面板4面板新建合成新建三个图层 FG前面物体&#xff0c;背景物体 去掉阴影 flo…

Zabbix6 - Web管理网络拓扑/端口流量监控配置手册

Zabbix6 - Web管理网络拓扑/端口流量监控配置手册 概述: 1)Zabbix能监视各种网络参数,保证服务器系统的安全运营;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 Zabbix由两部分构成,Zabbix Server与可选组件Zabbix Agent。通过C/S模式采集数据,通过B…

60道Java经典面试题总结

1、Spring 有几种配置方式&#xff1f; 1、xml 配置文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:…

量化交易入门(四十一)ASI指标Python实现和回测

老规矩先上图&#xff0c;看看ASI指标使用苹果数据回测后的结果如何。 一、策略运行结果 执行的结果&#xff1a; Starting Portfolio Value: 100000.00 Final Portfolio Value: 92514.82 Annualized Return: -1.93% Sharpe Ratio: -0.27 Max Drawdown: 25.34% Max Drawdown …

【教学类-09-04】20240401细线迷宫图03(A4横版一页-4份横版)

作品展示&#xff1a; 背景需求&#xff1a; 【教学类-09-02】20240331细线迷宫图01&#xff08;A4横版一页1份横版&#xff09;-CSDN博客文章浏览阅读779次&#xff0c;点赞28次&#xff0c;收藏6次。【教学类-09-02】20240331细线迷宫图01&#xff08;A4横版一页1份横版&…

pm2进程监控

pm2 npm install -g pm2 npm install -g pm2-web //linux有效 command pm2 logs&#xff0c;实时显示日志pm2 list&#xff0c;查看启动进程pm2 stop id[name]&#xff0c;关闭进程&#xff0c;all所有pm2 kill&#xff0c;关闭所有pm2 monit&#xff0c;查看详细信息pm2 star…

汽车电子行业知识:UWB技术及应用

文章目录 1.什么是UWB技术1.1.UWB测距原理1.2.UWB数据传输原理2.汽车UWB技术应用2.1.UWB雷达2.1.1.信道的冲击响应CIR2.2.舱外检测目标2.3.舱内检测活体2.3.1.活体检测原理2.4.脚踢尾箱开门2.4.1.脚踢检测原理1.什么是UWB技术 UWB(ultra wideband)也叫超宽带技术,是一种使用…

机器学习周记(第三十二周:文献阅读-时空双通路框架)2024.3.25~2024.3.31

目录 摘要 ABSTRACT 1 论文信息 1.1 论文标题 1.2 论文摘要 1.3 论文模型 1.3.1 Spatial Encoder&#xff08;空间编码器&#xff09; 1.3.2 Temporal Encoder&#xff08;时间编码器&#xff09; 2 相关代码 摘要 本周阅读了一篇运用GNN进行时间序列预测的论文。论文…

【数据处理包Pandas】分组及相关操作

目录 一、初步认识分组并查看分组信息&#xff08;一&#xff09;通过聚合函数查看分组信息&#xff08;二&#xff09;转换成列表查看所有组的信息&#xff08;三&#xff09;通过循环查看各组的名称和组中的数据信息&#xff08;四&#xff09;通过get_group()方法直接获得一…

速盾:怎么通过cdn防御ddos

随着互联网的发展&#xff0c;网络安全问题日益突出&#xff0c;其中DDoS&#xff08;分布式拒绝服务&#xff09;攻击成为最常见的一种攻击手段。这种攻击方式通过利用大量的请求来占用服务器资源&#xff0c;导致正常用户无法访问网站。为了防御DDoS攻击&#xff0c;CDN&…