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

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

news 2025/11/5 8:38:59

上述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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/11/3 20:11:13

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/10/29 18:36:01

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/10/30 22:35:49

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/11/4 13:46:59

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09