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

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

news 2026/5/21 15:46:18

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

HTML结构:
- 文档类型声明为HTML5。
- <html>标签设置了语言属性为英语（lang="en"）。
- <head>部分包含了文档的标题、字符集设置和视口设置。视口设置确保页面在移动设备上以适当的比例显示，不允许用户缩放。
- <style>标签内定义了一些基本的CSS样式，主要是去除body的默认边距，并设置canvas元素为块级显示。
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并渲染场景。
- 添加一个事件监听器，用于处理窗口大小变化时更新相机的宽高比和渲染器的大小。
- 最后，启动动画循环。
功能概述:
- 页面加载时，用户将看到一个包含四个圆环的场景，每个圆环具有不同的透明度和动态变化的缩放比例。
- 用户可以通过鼠标和键盘使用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应用程序，主要用于展示具有不同透明度和缩放比例的圆环列。以下是代码的详细解释： HTML结构: 文档类型声明为HTML5。<html>标签设置了语言属性为英语（lang"en"）…...

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

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

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

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

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

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

编程日记 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？1.2 grep是什么？1.3 grep可以做什么？ 2 grep基本语法2.1 命令格式2.2 “PATTERN”部分中的正则表达式语法学习2.3 grep命令参数学习 3 典型案例3.1 匹配非空行，过滤纯空行3.2 匹配IPv4地…...

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

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

概述本篇论述，如何用加速度在Godot中控制粒子运动。匀速和匀变速直线运动的统一以下是匀变速运动的速度和位移公式： 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 vtv0atxtv0t21at2 当a 0 时&#xf…...

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

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

本项目是一个基于大数据技术的用电量分析系统，旨在为用户提供全面的电力消耗信息和深入的用电量分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 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、依赖 <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时，device发送数据，网关接收到，网关通过网络发送给NS，而此处用到的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微控制器实现一个智能家居灯光控制系统，能够通过按键、遥控器或无线模块远程控制家庭照明。该项目展示了如何结合STM32的外设功能，实现对灯光的智能化控制，提升家居生活的便利性和节能效果。环境准备 1. 硬件设备 …...

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

06.useEffect

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

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

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

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

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

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

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

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

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

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

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

lock_guard和unique_lock学习总结

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

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

数据挖掘-padans初步使用

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

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

独立开发者如何利用Taotoken构建多模型备用方案

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度独立开发者如何利用Taotoken构建多模型备用方案对于独立开发者而言，项目的技术栈选择与成本控制至关重要。在集成大模…...

编程新知 2026/5/21 15:39:52

vscode使用claude code接入deepseek教程

1 在VSCode拓展商城中搜索Claude Code for VS Code，安装2 快捷键Ctrl“，”，进入设置，选择拓展，选择Claude Code。接着往下拉找到Environment Variables，点击下方的“在settings.json中编辑”，将…...

编程新知 2026/5/21 14:59:51

Data Connection (数据连接) 架构设计

description: “移动数据连接 (Data Connection) 与 PDN 会话架构设计，深入剖析 DataNetwork 状态机、数据可用性评估引擎、重试退避算法、以及跨 APN 的并发管理策略。” 当手机完成网络注册（ServiceStateTracker 确定已注册到运营商网络）后，用户最关心的一件事就是：能不…...

编程新知 2026/5/21 14:55:40

3分钟掌握智慧职教刷课脚本：全平台自动学习解决方案

3分钟掌握智慧职教刷课脚本：全平台自动学习解决方案【免费下载链接】auto-play-course 简单好用的刷课脚本[支持平台:职教云,智慧职教,资源库] 项目地址: https://gitcode.com/gh_mirrors/hc/auto-play-course 还在为重复的网课学习任务烦恼吗？智…...

编程新知 2026/5/21 12:12:05

B2B制造业如何利用GEO优化获得精准询盘：实战指南

B2B制造业如何利用GEO优化获得精准询盘：实战指南摘要 ：随着AI搜索渗透率超过85%，B2B制造业的获客逻辑正在被重塑。本文详细介绍GEO（Generative Engine Optimization）优化技术如何帮助工业品、机械配件企业获得精准询盘…...

编程新知 2026/5/21 11:49:30

避开这些坑，你的蓝桥杯单片机程序也能拿高分：EEPROM存储与电压比较逻辑详解

蓝桥杯单片机高分秘籍：EEPROM存储与电压比较逻辑的深度优化在蓝桥杯单片机竞赛中，能够完成基本功能只是及格线，真正决定成绩高低的是对细节的掌控和边界条件的处理。许多参赛者在EEPROM数据存储和复杂电压比较逻辑这两个关键环节频频失分&am…...

编程新知 2026/5/21 11:28:43

CW32F003与CW32F030国产MCU深度对比：从选型到项目实战全解析

1. 项目概述与核心价值最近在整理手头的开发板，翻出了两块来自武汉芯源的CW32F003和CW32F030。这两款芯片和对应的开发板，在国产MCU的入门级市场里，算得上是“老朋友”了，尤其是对于成本敏感、需要快速验证方案的工程师和学生来说…...

编程新知 2026/5/21 11:23:02

从‘看不见’到‘毁不掉’：深入聊聊数字水印的鲁棒性到底怎么测（附常见攻击模拟方法）

数字水印鲁棒性测试实战指南：从理论到攻击模拟数字水印技术已经从单纯的学术研究走向了广泛的商业应用，成为版权保护领域不可或缺的一环。但真正决定一个水印系统实用价值的，是其抵抗各种攻击的鲁棒性——这项指标直接关系到水印能否在现实…...

编程新知 2026/5/21 11:19:58

如何快速找回遗忘的压缩包密码：开源工具的完整使用指南

如何快速找回遗忘的压缩包密码：开源工具的完整使用指南【免费下载链接】ArchivePasswordTestTool 利用7zip测试压缩包的功能对加密压缩包进行自动化测试密码项目地址: https://gitcode.com/gh_mirrors/ar/ArchivePasswordTestTool 你是否曾经为加密的压缩…...

编程新知 2026/5/21 10:02:18

告别复杂命令：3步搞定M3U8视频下载的终极指南

告别复杂命令：3步搞定M3U8视频下载的终极指南【免费下载链接】N_m3u8DL-CLI-SimpleG N_m3u8DL-CLIs simple GUI 项目地址: https://gitcode.com/gh_mirrors/nm3/N_m3u8DL-CLI-SimpleG 你是否曾经遇到过这样的困扰？在网上找到了心仪的视频教程或精…...

编程新知 2026/5/21 9:32:39

相关文章：