【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.rhkb.cn/news/304806.html

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

相关文章

FreeRTOS学习 -- 移植

FreeRTOS学习 -- 移植

一、添加FreeRTOS源码 在基础工程中新建一个名为FreeRTOS的文件夹&#xff0c;创建FreeRTOS文件夹以后将FreeRTOS的源码添加到这个文件夹中。 portable 文件夹&#xff0c;只需要保留keil、MemMang 和 RVDS这三个文件夹&#xff0c;其他的都可以删除掉。 移植FreeRTOSConfig…
阅读更多...
vue3新手笔记

vue3新手笔记

setup&#xff08;&#xff09;{}函数&#xff0c;是启动页面后&#xff0c;自动执行的一个函数。所有数据&#xff08;常量、变量&#xff09;、函数等等&#xff0c;都要return 出去。 ref函数(可用于基本数据类型&#xff0c;也可以用于复杂数据类型)&#xff1a;让页面上的…
阅读更多...
Swagger转换成Excel文件

Swagger转换成Excel文件

1、添加swagger解析依赖包&#xff1a; <dependency><groupId>io.swagger.parser.v3</groupId><artifactId>swagger-parser</artifactId><version>2.1.12</version></dependency>2、示例代码&#xff1a; package com.rlclou…
阅读更多...
TCP/IP 协议栈在 Linux 内核中的 运行时序分析

TCP/IP 协议栈在 Linux 内核中的 运行时序分析

1、Linux内核概述 1.1 Linux内核结构 一个完整的Linux内核一般由5部分组成&#xff0c;它们分别是内存管理、进程管理、进程间通信、bai虚拟文件系统和网络接口。 1、内存管理 内存管理主要完成的是如何合理有效地管理整个系统的物理内存&#xff0c;同时快速响应内核各个子…
阅读更多...
[蓝桥杯 2018 国 C] 迷宫与陷阱

[蓝桥杯 2018 国 C] 迷宫与陷阱

题目&#xff1a; 思路&#xff1a; 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N1e310; char g[N][N];//输入&#xff1a;图的数组 int vis[N][N]; /* 剪枝&#xff1a;记录magic的个数&#xff08;一个点经过两次&#xff0c;magic越大…
阅读更多...
创建真实项目vue2项目

创建真实项目vue2项目

1. 创建 vue create 项目名 2. 选择自定义 3. 勾选以下必备选项 4.选择使用vue2 5. 选择哈希模式&#xff08;n&#xff09;; css选择Less 6. ESLint校验 选择 7. 保存&#xff08;按照默认&#xff09; 8. 在哪里添加ESLint文件 9. 要不要把这个改成将来的预设&am…
阅读更多...
4.Spring IoCDI

4.Spring IoCDI

文章目录 1.Ioc - 控制反转(解耦)1.1传统开发1.2批量生产车轮(修改代码) - 传统方式&#xff0c;繁琐1.3解耦1.3.1使用Ioc方法后1.3.2添加变量颜色 只需要修改Tire即可 1.4Bean的存储1.4.1Controller(控制器存储)1.4.2Service(服务存储)1.4.2.1根据context来获取bean1.4.2.2根据…
阅读更多...
SSM整合----第一个SSM项目

SSM整合----第一个SSM项目

文章目录 前言一、使用步骤1.引入库2.建表3 项目结构4 web.xml的配置5 配置数据源6 SpringMVC配置7 配置MyBatis Mapper8 书写控制类 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; SSM整合是指Spring、SpringMVC和MyBatis这三个框架的整合使用。…
阅读更多...
【汇编语言实战】对输入的数组实现快速排序

【汇编语言实战】对输入的数组实现快速排序

C语言描述&#xff1a; #include <stdio.h>// 交换数组中两个元素的位置 void swap(int *a, int *b) {int temp *a;*a *b;*b temp; }// 分区函数&#xff0c;将数组按照基准值划分为两部分 int partition(int arr[], int low, int high) {int pivot arr[high]; // 选…
阅读更多...
JavaWeb中的Servlet是什么？怎么使用？

JavaWeb中的Servlet是什么？怎么使用？

文章目录 一、什么是Servlet二、Servlet的基本内容1、Servlet的作用2、Servlet接口3、Servlet接口实现类4、Servlet接口实现类开发步骤5、Servlet对象生命周期6、HttpServletResquest接口7、HttpServletResponse接口8、请求对象和响应对象流程图9、请求对象和响应对象生命周期1…
阅读更多...
阿里面试总结 一

阿里面试总结 一

写了这些还是不够完整&#xff0c;阿里 字节 卷进去加班&#xff01;奥利给 ThreadLocal 线程变量存放在当前线程变量中&#xff0c;线程上下文中&#xff0c;set将变量添加到threadLocals变量中 Thread类中定义了两个ThreadLocalMap类型变量threadLocals、inheritableThrea…
阅读更多...
迷宫 — — 蓝桥杯（动态规划）

迷宫 — — 蓝桥杯（动态规划）

迷宫 题目&#xff1a; 输入样例&#xff1a; 3 1 1 1 2 3 4 5 6 7 8 9 2 2 1 3 1 R输出样例&#xff1a; 21思路&#xff1a; 题目大意&#xff1a;给定一个n x m的平面网格&#xff0c;并且每一个格子都有一定的代价&#xff0c;并且设有障碍物和陷阱&#xff0c;障碍物的意…
阅读更多...
c++的友元函数，详细笔记，细说三种友元用法

c++的友元函数，详细笔记，细说三种友元用法

解释友元 友元用通俗易懂的话来说&#xff0c;就是&#xff1a;当有人来到你家里&#xff0c;他就只能呆在客厅里面&#xff0c;你是不可能让他来到你的卧室之中的。但是如果这个人是你的朋友&#xff0c;那么你是默许他可以进入你的卧室的。 此时呢&#xff1f;我告诉你&…
阅读更多...
网络IO模型以及实际应用

网络IO模型以及实际应用

网络IO模型 本文主要介绍了几种不同的网络IO模型&#xff0c;以及实际应用中使用到的Reactor模型等。 我们常说的网络IO模型&#xff0c;主要包含阻塞IO、非阻塞IO、多路复用IO、信号驱动IO、异步IO。 根据第一个阶段&#xff1a;是否需要阻塞&#xff0c;分为阻塞和非阻塞IO。…
阅读更多...
【从浅学到熟知Linux】进程状态与进程优先级（含进程R/S/T/t/D/X/Z状态介绍、僵尸进程、孤儿进程、使用top及renice调整进程优先级）

【从浅学到熟知Linux】进程状态与进程优先级（含进程R/S/T/t/D/X/Z状态介绍、僵尸进程、孤儿进程、使用top及renice调整进程优先级）

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程及数据库等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 进程状态进程状态查看R运行状态&#xff08;running&#xff09;S睡眠状态&#xff08;sleeping&a…
阅读更多...
GT收发器64B66B协议（2）自定义PHY设计

GT收发器64B66B协议（2）自定义PHY设计

文章目录 前言一、设计框图二、GT_module三、PHY_module3.1、PHY_tx模块3.2、PHY_rx_bitsync模块3.3、PHY_rx模块 四、上板测试总结 前言 有了对64B66B协议的认识以及我们之前设计8B10B自定义PHY的经验&#xff0c;本文开始对64B66B自定义PHY的设计 一、设计框图 二、GT_modu…
阅读更多...
Harmony鸿蒙南向驱动开发-UART

Harmony鸿蒙南向驱动开发-UART

UART指异步收发传输器&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;&#xff0c;是通用串行数据总线&#xff0c;用于异步通信。该总线双向通信&#xff0c;可以实现全双工传输。 两个UART设备的连接示意图如下&#xff0c;UART与其他模块一般用2线&a…
阅读更多...
数据结构初阶：栈和队列

数据结构初阶：栈和队列

栈 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守后进先出 LIFO &#xff08; Last In First Out &#xff09;的原则。…
阅读更多...
为什么每个人都需要了解这些数据加密技术？

为什么每个人都需要了解这些数据加密技术？

在数字时代&#xff0c;数据加密技术不仅对保护企业的商业秘密至关重要&#xff0c;也是个人隐私安全的重要屏障。随着技术的进步和网络犯罪的增加&#xff0c;数据加密已经成为了信息安全领域的一个热点议题。以下是探讨为什么每个人都需要了解这些数据加密技术的几个主要原因…
阅读更多...
SpringBoot启动时banner设置

SpringBoot启动时banner设置

SpringBoot启动时banner设置 1.操作步骤2.各种banner图像 1.操作步骤 在application.properties文件中设置新的banner对于的文件位置&#xff0c;最好放在resources目录下 spring.banner.locationbanner.txt2.各种banner图像 &#xff08;1&#xff09;经典大佛图 具体txt文…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023