当前位置： 首页 > news >正文

使用Three.js库创建的简单WebGL应用程序，主要用于展示具有不同透明度和缩放比例的圆环列

news 2025/7/12 13:22:39

上述HTML文档是一个使用Three.js库创建的简单WebGL应用程序，主要用于展示具有不同透明度和缩放比例的圆环列。以下是代码的详细解释：

  1. HTML结构:
    • 文档类型声明为HTML5。
    • <html>标签设置了语言属性为英语（lang="en"）。
    • <head>部分包含了文档的标题、字符集设置和视口设置。视口设置确保页面在移动设备上以适当的比例显示，不允许用户缩放。
    • <style>标签内定义了一些基本的CSS样式，主要是去除body的默认边距，并设置canvas元素为块级显示。
  2. JavaScript部分（使用ES6模块）:
    • 通过import语句导入了Three.js库及其相关模块，包括OrbitControls用于相机交互。
    • 初始化Three.js的核心组件：
      • 创建一个场景（Scene）。
      • 创建一个透视相机（PerspectiveCamera），其视场角为75度，宽高比根据窗口大小动态计算，近剪裁面为0.1，远剪裁面为1000。
      • 创建一个WebGL渲染器（WebGLRenderer），并设置其大小与窗口大小相匹配，然后将渲染器的DOM元素添加到body中。
    • 创建一个包含四个圆环的数组meshes：
      • 每个圆环使用RingGeometry定义，具有不同的透明度和缩放比例。
      • 圆环的材质使用MeshBasicMaterial，并设置颜色、透明度、是否透明以及双面渲染。
      • 将每个创建好的圆环网格对象（Mesh）添加到meshes数组中。
    • 遍历meshes数组，并将每个圆环添加到场景中。
    • 添加光照：
      • 一个环境光（AmbientLight）用于基础照明。
      • 一个聚光灯（SpotLight）用于强调照明效果，位置设置为(10, 10, 10)。
    • 设置相机位置，z轴为50，以便观察场景。
    • 添加OrbitControls以允许用户通过鼠标和键盘交互地移动相机。
    • 定义一个render函数，用于动态改变圆环的透明度和缩放比例。这里有一个逻辑判断，如果透明度降至0以下，则重置为1，并缩放比例重置为(1, 1, 1)；否则，逐渐减小透明度和增大缩放比例。
    • 创建一个动画循环animate，使用requestAnimationFrame确保动画平滑，每次循环调用render函数、更新OrbitControls并渲染场景。
    • 添加一个事件监听器，用于处理窗口大小变化时更新相机的宽高比和渲染器的大小。
    • 最后，启动动画循环。
  3. 功能概述:
    • 页面加载时，用户将看到一个包含四个圆环的场景，每个圆环具有不同的透明度和动态变化的缩放比例。
    • 用户可以通过鼠标和键盘使用OrbitControls来旋转、平移和缩放相机，以不同角度观察场景。
    • 随着动画的进行，圆环的透明度和缩放比例将不断变化，创造一种动态效果。

总之，这段代码展示了一个基本的Three.js应用，通过动态改变对象的属性和使用简单的光照来创建一个有趣的视觉效果。

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - particles - columns</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {margin: 0;}canvas {display: block;}</style>
</head><body><script type="module">import * as THREE from 'three';import { Scene, PerspectiveCamera, WebGLRenderer, AmbientLight, Color, SpotLight } from "three";import { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 初始化场景、相机和渲染器  const scene = new Scene();const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const meshes = [];for (let i = 0; i < 4; i++) {const geometry = new THREE.RingGeometry(0.9, 1, 64);const opacity = 1 - i / 4; // 计算透明度  const scale = (16 * i) / 4 + 1; // 计算缩放比例  const material = new THREE.MeshBasicMaterial({color: 0x3184ae,transparent: true,opacity: opacity, // 使用计算的透明度  side: THREE.DoubleSide});const mesh = new THREE.Mesh(geometry, material);mesh.scale.set(scale, scale, 1);meshes.push(mesh);}// 遍历 meshes 数组，并将每个 mesh 添加到场景中  meshes.forEach(mesh => {scene.add(mesh);});//// 添加环境光和聚光灯  const ambientLight = new AmbientLight(0xffffff, 0.5);scene.add(ambientLight);const spotLight = new SpotLight(0xffffff, 1);spotLight.position.set(10, 10, 10);scene.add(spotLight);/// 设置相机位置  camera.position.z = 50;// 添加OrbitControls以便交互  const controls = new OrbitControls(camera, renderer.domElement);const render = () => {meshes.forEach((mesh, index) => {const meterial = mesh.material;if (meterial.opacity <= 0) {meterial.opacity = 1;mesh.scale.set(1, 1, 1);} else { meterial.opacity -= 0.002; mesh.scale.set(mesh.scale.x + 0.038, mesh.scale.y + 0.038, 1); }});};// 创建动画循环  const animate = function () {requestAnimationFrame(animate);render();controls.update(); // 更新OrbitControls  renderer.render(scene, camera);};// 处理窗口大小调整  window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});// 开始动画循环  animate();</script>
</body></html>

相关文章：

使用Three.js库创建的简单WebGL应用程序，主要用于展示具有不同透明度和缩放比例的圆环列

上述HTML文档是一个使用Three.js库创建的简单WebGL应用程序&#xff0c;主要用于展示具有不同透明度和缩放比例的圆环列。以下是代码的详细解释&#xff1a; HTML结构: 文档类型声明为HTML5。<html>标签设置了语言属性为英语&#xff08;lang"en"&#xff09;…...

编程日记 2024/10/5 3:25:20

Redis: 集群架构，优缺点和数据分区方式和算法

集群 集群指的就是一组计算机作为一个整体向用户提供一组网络资源 我就举一个简单的例子&#xff0c;比如百度&#xff0c;在北京和你在上海访问的百度是同一个服务器吗&#xff1f;答案肯定是不是的&#xff0c;每一个应用可以部署在不同的地方&#xff0c;但是我们提供的服务…...

编程日记 2024/10/5 3:24:19

负载均衡可以在网络模型的哪一层？

一、网络模型概述 网络模型是用于描述网络通信过程和网络服务的抽象框架。最常见的网络模型有两种&#xff1a;OSI&#xff08;开放式系统互联&#xff09;模型和TCP/IP模型。 OSI模型 OSI&#xff08;Open Systems Interconnection&#xff09;模型是由国际标准化组织&…...

编程日记 2024/10/5 3:23:18

YOLOv11改进 | 上采样篇 | YOLOv11引入CARAFE上采样

1. DySample介绍 1.1 摘要：特征上采样是许多现代卷积网络体系结构（如特征金字塔）中的关键操作。它的设计对于密集预测任务（如对象检测和语义/实例分割）至关重要。在本文中，我们提出了一个通用、轻量级、高效的特征重组算子CARAFE来实现这一目标.CARAFE有几个吸引人的特性…...

编程日记 2024/10/5 3:22:16

【Linux运维】grep命令粗浅学习

文章目录 1 背景介绍1.1 为什么要学习grep&#xff1f;1.2 grep是什么&#xff1f;1.3 grep可以做什么&#xff1f; 2 grep基本语法2.1 命令格式2.2 “PATTERN”部分中的正则表达式语法学习2.3 grep命令参数学习 3 典型案例3.1 匹配非空行&#xff0c;过滤纯空行3.2 匹配IPv4地…...

编程日记 2024/10/5 3:20:14

【Godot4.3】匀速和匀变速直线运动粒子

概述 本篇论述&#xff0c;如何用加速度在Godot中控制粒子运动。 匀速和匀变速直线运动的统一 以下是匀变速运动的速度和位移公式&#xff1a; v t v 0 a t x t v 0 t 1 2 a t 2 v_tv_0 at \\ x_tv_0t \frac{1}{2}at^2 vt​v0​atxt​v0​t21​at2 当a 0 时&#xf…...

编程日记 2024/10/5 3:19:13

基于Hive和Hadoop的用电量分析系统

本项目是一个基于大数据技术的用电量分析系统&#xff0c;旨在为用户提供全面的电力消耗信息和深入的用电量分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark…...

编程日记 2024/10/5 3:18:12

一个简单的摄像头应用程序4

我们进一步完善了这个app01.py,我们优化了界面使其更人性化，下面介绍中包含了原有的功能及新增的功能： 创建和管理文件夹： create_folder 函数用于创建保存照片和视频的文件夹。 get_next_file_number 函数用于获取文件夹中下一个可用的文件编号。 图像处理： pil_to_cv 函…...

编程日记 2024/10/5 3:17:11

SpringBoot使用EasyPoi根据模板导出word or pdf

1、导出效果 1.1 wrod 1.2 pdf 2、依赖 <!--word--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.3.0</version></dependency><dependency><groupId>cn.…...

编程日记 2024/10/5 3:16:11

NVIDIA Hopper 架构深入

在 2022 年 NVIDIA GTC 主题演讲中，NVIDIA 首席执行官黄仁勋介绍了基于全新 NVIDIA Hopper GPU 架构的全新 NVIDIA H100 Tensor Core GPU。 文章目录 前言一、NVIDIA H100 Tensor Core GPU 简介二、NVIDIA H100 GPU 主要功能概述1. 新的流式多处理器 （SM） 具有许多性能和效率…...

编程日记 2024/10/5 3:15:10

AWS IoT Core for Amazon Sidewalk

目录 1 前言2 AWS IoT2.1 准备条件2.2 创建Credentials2.2.1 创建user2.2.2 配置User 2.3 本地CLI配置Credentials 3 小结 1 前言 在测试Sidewalk时&#xff0c;device发送数据&#xff0c;网关接收到&#xff0c;网关通过网络发送给NS&#xff0c;而此处用到的NS是AWS IoT&am…...

编程日记 2024/10/5 3:14:09

今日指数项目项目集成RabbitMQ与CaffienCatch

今日指数项目项目集成RabbitMQ与CaffienCatch 一. 为什么要集成RabbitMQ 首先CaffeineCatch 是作为一个本地缓存工具 使用CaffeineCatch 能够大大较少I/O开销 股票项目 主要分为两大工程 --> job工程(负责数据采集) , backend(负责业务处理) 由于股票的实时性也就是说 ,…...

编程日记 2024/10/5 3:09:05

C0005.Clion中移动ui文件到新目录后，报错问题的解决

报错问题如下 AutoUic error ------------- "SRC:/confirmwizardpage.cpp" includes the uic file "ui_confirmwizardpage.h", but the user interface file "confirmwizardpage.ui" could not be found in the following directories"SRC…...

编程日记 2024/10/5 3:06:02

基于STM32的智能家居灯光控制系统设计

引言 本项目将使用STM32微控制器实现一个智能家居灯光控制系统&#xff0c;能够通过按键、遥控器或无线模块远程控制家庭照明。该项目展示了如何结合STM32的外设功能&#xff0c;实现对灯光的智能化控制&#xff0c;提升家居生活的便利性和节能效果。 环境准备 1. 硬件设备 …...

编程日记 2024/10/5 3:05:01

06.useEffect

在 React 开发中，正确使用 useEffect 钩子对于优化组件性能至关重要。一个常见但容易被忽视的性能问题是在依赖数组中使用对象作为依赖项。这可能导致不必要的效果重新执行，从而影响应用性能。通过优先使用原始值（如字符串、数字）作为依赖项，我们可以显著提高组件的效率。…...

编程日记 2024/10/5 3:04:00

【设计模式-中介者模式】

定义 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为设计模式&#xff0c;通过引入一个中介者对象&#xff0c;来降低多个对象之间的直接交互&#xff0c;从而减少它们之间的耦合度。中介者充当不同对象之间的协调者&#xff0c;使得对象之间的通信变得简单且…...

编程日记 2024/10/5 3:02:59

树和二叉树知识点大全及相关题目练习【数据结构】

树和二叉树 要注意树和二叉树是两个完全不同的结构、概念&#xff0c;它们之间不存在包含之类的关系 树的定义 树&#xff08;Tree&#xff09;是n&#xff08;n≥0&#xff09;个结点的有限集&#xff0c;它或为空树&#xff08;n 0&#xff09;&#xff1b;或为非空树&a…...

编程日记 2024/10/5 2:56:51

ajax的原理，使用场景以及如何实现

AJAX 原理 AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种在网页中实现异步通信的技术&#xff0c;允许网页在不重新加载整个页面的情况下与服务器交换数据。这使得网页应用可以更加响应式和动态&#xff0c;提升用户体验。 AJAX 的核心原理是在后台通过…...

编程日记 2024/10/5 2:53:48

lock_guard和unique_lock学习总结

1.std::lock_guard std::lock_guard其实就是简单的RAII&#xff08;Resource Acquisition Is Initialization&#xff09;封装&#xff0c;资源获取即初始化。在构造函数中进行加锁&#xff0c;析构函数中进行解锁&#xff0c;这样可以保证函数退出时&#xff0c;锁一定被释放…...

编程日记 2024/10/5 2:52:47

数据挖掘-padans初步使用

目录标题 Jupyter Notebook安装启动 Pandas快速入门查看数据验证数据建立索引数据选取⚠️注意&#xff1a;排序分组聚合数据转换增加列绘图line 或 **&#xff08;默认&#xff09;&#xff1a;绘制折线图。bar&#xff1a;绘制条形图。barh&#xff1a;绘制水平条形图。hist&…...

编程日记 2024/10/5 2:50:46

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/12 6:00:25

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/7/11 19:02:12

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/9 11:27:28

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/6 11:27:06

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/10 9:55:26

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/9 18:40:03

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/7/9 3:11:47

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/10 2:40:43

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/7/5 12:54:36

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/7/10 22:21:09