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

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

news 2025/11/5 6:03:29

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/11/4 22:19:41

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/10/30 15:53:58

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/11/2 14:30:10

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

编程新知 2025/10/28 7:14:48

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...

编程新知 2025/10/21 10:57:26

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...

编程新知 2025/10/24 15:05:30

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者，全面梳理了以下几大板块，并在每个板块末尾列出常见的面试问答思路，帮助你既能夯实基础，又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层（Link Layer） 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

编程新知 2025/7/17 4:25:39