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

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

news 2025/9/6 13:52:52

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/7/17 12:52:44

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/8/24 2:34:08

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/7/17 1:57:52

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/9/2 19:20:44

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/9/3 22:35:50

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/9/2 11:57:55