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

threeJs实现裸眼3D小狗

一、实现效果

使用threeJs实现裸眼3D小狗,效果如下,其实如果将小狗换成建模小狗,效果更好,这个是模拟了一只小狗。

二、实现代码

代码如下:

<!DOCTYPE html>
<html>
<head><title>星空小狗</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script><script>// 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);//renderer.setClearColor(0x000000); // 黑色背景document.body.appendChild(renderer.domElement);// 添加星空背景function createStarField() {const starsGeometry = new THREE.BufferGeometry();const starCount = 5000;const positions = new Float32Array(starCount * 3);for(let i = 0; i < starCount * 3; i += 3) {positions[i] = (Math.random() - 0.5) * 2000;positions[i+1] = (Math.random() - 0.5) * 2000;positions[i+2] = (Math.random() - 0.5) * 2000;}starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));const starsMaterial = new THREE.PointsMaterial({color: 0xFFFFFF,size: 0.7,transparent: true});const starField = new THREE.Points(starsGeometry, starsMaterial);scene.add(starField);}createStarField();// 光源配置const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);directionalLight.position.set(0, 100, 50);scene.add(directionalLight);// 创建小狗模型function createDog() {const dog = new THREE.Group();// 身体const bodyGeometry = new THREE.CylinderGeometry(1, 1, 2, 8);const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });const body = new THREE.Mesh(bodyGeometry, bodyMaterial);body.rotation.z = Math.PI/2;dog.add(body);// 头部const headGeometry = new THREE.SphereGeometry(0.8);const head = new THREE.Mesh(headGeometry, bodyMaterial);head.position.set(1.5, 0, 0);dog.add(head);// 眼睛const eyeGeometry = new THREE.SphereGeometry(0.1);const eyeMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);leftEye.position.set(0.7, 0.3, 0.3);rightEye.position.set(0.7, 0.3, -0.3);head.add(leftEye, rightEye);// 鼻子const nose = new THREE.Mesh(new THREE.SphereGeometry(0.2),new THREE.MeshPhongMaterial({ color: 0x000000 }));nose.position.set(0.7, 0, 0);head.add(nose);// 耳朵const earGeometry = new THREE.ConeGeometry(0.3, 0.8, 8);const earMaterial = new THREE.MeshPhongMaterial({ color: 0x4B3621 });const leftEar = new THREE.Mesh(earGeometry, earMaterial);const rightEar = new THREE.Mesh(earGeometry, earMaterial);leftEar.position.set(1.2, 0.6, 0.4);rightEar.position.set(1.2, 0.6, -0.4);leftEar.rotation.z = -0.3;rightEar.rotation.z = 0.3;dog.add(leftEar, rightEar);// 腿const legGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1);const legs = [[0.5, -1.2, 0.5],   // 前左[0.5, -1.2, -0.5],  // 前右[-0.5, -1.2, 0.5],  // 后左[-0.5, -1.2, -0.5]  // 后右];legs.forEach(pos => {const leg = new THREE.Mesh(legGeometry, bodyMaterial);leg.position.set(...pos);dog.add(leg);});// 尾巴const tailGeometry = new THREE.CylinderGeometry(0.1, 0.05, 1);const tail = new THREE.Mesh(tailGeometry, bodyMaterial);tail.position.set(-1.2, -0.5, 0);tail.rotation.z = -0.5;tail.rotation.x = 10;dog.add(tail);return dog;}const dog = createDog();scene.add(dog);// 相机初始位置camera.position.set(0, 3, 8);camera.lookAt(0, 0, 0);// 轨道控制器const controls = new THREE.OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.05;// 动画循环function animate() {requestAnimationFrame(animate);// 尾巴摆动dog.children[8].rotation.x = Math.sin(Date.now() * 0.005) * 0.5 - 0.5;controls.update();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>

这个示例创建了一个由基本几何体组成的卡通风格3D小狗,包含以下特征:

  1. 使用圆柱体作为身体和四肢

  2. 球体作为头部

  3. 圆锥体作为耳朵

  4. 黑色小球作为鼻子,眼睛

  5. 简单的摇尾巴动画

  6. 支持鼠标控制视角(旋转、缩放)

  7. 响应式布局(自动适应窗口大小)

使用方法:

  1. 将代码保存为HTML文件

  2. 用现代浏览器打开

  3. 你可以通过鼠标:

    • 左键拖动旋转视角

    • 右键拖动平移视角

    • 滚轮缩放

可以调整的部分:

  • 颜色值(修改各个材质的color参数)

  • 几何体尺寸(修改各个Geometry的参数)

  • 动画效果(修改animate函数中的变换参数)

  • 光照参数(调整光源位置和强度)

要创建更逼真的模型,可以考虑:

  1. 使用更复杂的几何体

  2. 添加纹理贴图

  3. 使用3D建模软件创建模型后导入

  4. 添加骨骼动画系统

  5. 增加更多细节(眼睛、毛发等)

三、重点代码片段讲解

片段1:小狗的组(group)创建与部件组合

function createDog() {const dog = new THREE.Group();// 身体 (圆柱体)const bodyGeometry = new THREE.CylinderGeometry(1, 1, 2, 8);const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });const body = new THREE.Mesh(bodyGeometry, bodyMaterial);body.rotation.z = Math.PI/2; // 让圆柱体横置dog.add(body);// 头部 (球体)const head = new THREE.Mesh(new THREE.SphereGeometry(0.8),new THREE.MeshPhongMaterial({ color: 0x8B4513 }));head.position.set(1.5, 0, 0); // 向右偏移dog.add(head);// 其他部件...return dog;
}

重点解析:

  1. 组(Group)对象

    • THREE.Group() 创建了一个空容器,用于组合所有小狗部件

    • 类似于HTML中的<div>容器,可以统一控制所有子元素的位置/旋转/缩放

  2. 坐标系操作

    • body.rotation.z = Math.PI/2 将圆柱体旋转90度,使其水平放置

    • head.position.set(1.5, 0, 0) 将头部定位在身体右侧(Three.js坐标系:x右,y上,z屏幕外)

  3. 部件层级关系

    • 通过dog.add()将各个身体部件添加到组中

    • 最终返回的dog对象包含所有子部件的完整层级结构

片段2:动画循环与尾巴摆动

function animate() {requestAnimationFrame(animate);// 摇尾巴动画dog.children[8].rotation.z = Math.sin(Date.now() * 0.005) * 0.5 - 0.5;controls.update();renderer.render(scene, camera);
}

重点解析:

  1. 动画循环机制

    • requestAnimationFrame 是浏览器提供的动画API,以约60fps的频率循环调用animate函数

    • 每次循环都会重新渲染场景(renderer.render)

  2. 数学函数实现动画

    • Math.sin(Date.now() * 0.005) 通过正弦函数生成周期性数值

    • *0.5 -0.5 将数值范围从[-1,1]映射到[-1,0],实现尾巴摆动效果

    • 随时间变化的参数 (Date.now()) 驱动动画持续进行

  3. 部件索引访问

    • dog.children[6] 访问之前添加到组中的第7个元素(尾巴)

    • 通过修改rotation.z实现绕z轴旋转(Three.js使用右手坐标系)


补充说明:

  • 这两个片段分别代表了Three.js的:

    1. 场景构建:通过组合基本几何体创建复杂模型

    2. 动态交互:使用数学函数驱动动画变化

  • 实际开发中可以通过给部件命名(而不是使用children索引)来更安全地访问特定部件

  • 通过调整正弦函数的参数(如将0.005改为0.01),可以改变尾巴摆动的速度

可以尝试修改这些参数观察效果变化,这是理解Three.js动画原理的最佳实践方式!

相关文章:

threeJs实现裸眼3D小狗

一、实现效果 使用threeJs实现裸眼3D小狗&#xff0c;效果如下&#xff0c;其实如果将小狗换成建模小狗&#xff0c;效果更好&#xff0c;这个是模拟了一只小狗。 二、实现代码 代码如下&#xff1a; <!DOCTYPE html> <html> <head><title>星空小狗…...

ZYNQ笔记(二):MIO 、EMIO

版本&#xff1a;Vivado2020.2&#xff08;Vitis&#xff09; 任务&#xff1a;使用GPIO MIO 和 EMIO 实现按键 KEY 控制 LED&#xff08; 两个PL端LED、两个PS端KEY&#xff09; 目录 一、MIO 、EMIO 介绍 二、硬件设计 三、软件设计 四、效果 一、MIO 、EMIO 介绍 …...

Cygwin编译安装Acise

本文记录Windows下使用Cygwin编译安装Acise的流程。 零、环境 操作系统Windows11Visual Studio CodeVisual Studio Code 1.92.0Cygwin 一、工具及依赖 1.1 Visual Studio Code 下载并安装Visual Studio Code, 同时安装以下插件&#xff0c; Task Explorer Output Colorizer …...

ubuntu22.04 安装-ODBC驱动-SQLserver

1.ISO下载 中科大 Index of /ubuntu-releases/http://mirrors.ustc.edu.cn/ubuntu-releases/ 2.VMware Workstation创建虚拟机 3.更换清华源或者中科大的源 Ubuntu 24.04更换清华源_哔哩哔哩_bilibili 中科大镜像源&#xff1a; Ubuntu - USTC Mirror Help 清华源 ubuntu | 镜…...

[数据结构]Trie字典树

GPT的介绍 &#x1f9e0; 一句话总结&#xff1a; 字典树是一种专门用来存很多字符串的“超级前缀树”&#xff0c;查找某个字符串或前缀的时候&#xff0c;特别快&#xff01; ✍️ 举个生活例子&#xff08;类比&#xff09;&#xff1a; 你想做一个词典&#xff08;Dictio…...

【网络安全】Linux 命令大全

未经许可,不得转载。 文章目录 前言正文文件管理文档编辑文件传输磁盘管理磁盘维护网络通讯系统管理系统设置备份压缩设备管理其它命令前言 在网络安全工作中,熟练掌握 Linux 系统中的常用命令对于日常运维、日志分析和安全排查等任务至关重要。 以下是常用命令的整理汇总,…...

Xcode警报“Ignoring duplicate libraries: ‘-lc++’” 警报

目录 前言 一、问题出现的原因 二、解决步骤 1. 检查构建设置中的链接器标志 2. 检查依赖中的重复库 3. 清除派生数据&#xff1a; 4. 检查冲突的 C 库 5. 更新 CocoaPods&#xff1a; 前言 有时候我们会看到Xcode警报&#xff1a;Ignoring duplicate libraries: ‘-lc…...

WebStorm中使用live-server插件

文章目录 1. 前提条件1.1 已安装Node1.1.1 淘宝的镜像1.2 安装live-server1.3 安装WebStorm2. Windows配置hosts3. WebStorm配置live-server3.1 WebStorm创建3.2 启动 live-server1. 前提条件 1.1 已安装Node Windows PowerShell 版权所有(C) Microsoft Corporation。保留所…...

Python 中使用单例模式

有这么一种场景&#xff0c;Web服务中有一个全局资源池&#xff0c;在需要使用的地方就自然而言引用该全局资源池即可&#xff0c;此时可以将该资源池以单例模式实现。随后&#xff0c;需要为某一特殊业务场景专门准备一个全局资源池&#xff0c;于是额外复制一份代码新建了一个…...

【基于LangChain的千问大模型工具调用】 Function CallingTool Calling简易示例

目录 示例代码 运行结果 功能&#xff1a;根据用户输入自动选择数学计算/天气查询工具处理 ​​"用户输入 → 意图分析 → 工具调用 → 结果返回"​​ 库名解析&#xff1a;【langchain库名解析】-CSDN博客 示例代码 # 模块1&#xff1a;依赖导入 from langc…...

银河麒麟服务器操作系统 V10 SP1 中玩转firewalld防火墙

Hey小伙伴们~&#x1f44b; 今天来聊聊怎么在银河麒麟服务器操作系统 V10 SP1 中玩转firewalld防火墙&#xff01;&#x1f6e1;️ 这个强大的工具能帮你动态管理防火墙规则&#xff0c;还支持区域概念&#xff0c;让你的网络流量控制更灵活&#xff01;&#x1f389; &#x…...

信创服务器网络更稳了!链路聚合Bonding实战

原文链接&#xff1a;信创服务器网络更稳了&#xff01;链路聚合Bonding实战 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇信创服务器操作系统上链路聚合&#xff08;Bonding&#xff09;配置实战的文章。链路聚合可以让两块网卡协同工作&#xff0c;提高服务器网…...

沐渥科技详解氮气柜操作指南

氮气柜是一种通过持续注入高纯度氮气&#xff0c;维持柜内惰性气体环境的设备&#xff0c;用于存储半导体晶圆或其他敏感元件&#xff0c;防止氧化、吸湿和污染。氮气柜操作指南是怎样的&#xff1f;下面沐渥小编给大家介绍一下。 一、操作前准备 &#xff08;1&#xff09;安全…...

Netty之ChannelOutboundBuffer详解与实战

深入理解Netty的高低水位线机制及其应用实践 在高性能网络编程中&#xff0c;Netty作为一个广泛使用的异步事件驱动的Java框架&#xff0c;其高效的流量控制机制对于系统的稳定性和性能至关重要。本文将深入探讨Netty中的高低水位线&#xff08;High/Low Water Mark&#xff0…...

学习Python的优势体现在哪些方面?

文章目录 前言易于学习和使用应用领域广泛丰富的开源库和社区支持跨平台兼容性职业发展前景好 前言 学习 Python 具有多方面的优势&#xff0c;这使得它成为当今最受欢迎的编程语言之一&#xff0c;以下为你详细介绍。 易于学习和使用 语法简洁易懂&#xff1a;Python 的语法…...

每天五分钟玩转深度学习PyTorch:搭建LSTM算法模型完成词性标注

本文重点 本文通过LSTM算法模型来解决一个实际问题,也就是如何使用LSTM完成词性预测,下面我们搭建两个模型,一个是单词级别的,另外一个是字母级别的,大概的步骤就是,字母级别的LSTM将每个单词的字母作为输入,然后取最后一个时刻作为整个单词的表示,然后将文本中所有的…...

ANP协议深度解析:智能体网络协议的演进与革新

引言 随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;多智能体系统&#xff08;Multi-Agent Systems, MAS&#xff09;逐渐成为解决复杂问题的核心范式。然而&#xff0c;智能体之间的高效协作一直面临通信标准不统一、资源分配冲突、动态环境适应能力不足等…...

如何降低论文的AIGC检测率,减少“AI味”

要降低论文的AIGC&#xff08;AI生成内容&#xff09;检测率&#xff0c;减少“AI味”&#xff0c;关键在于让论文更自然、个性化&#xff0c;并符合学术规范。以下是具体方法&#xff1a; 1. 避免直接复制AI生成内容 ❌ 错误做法&#xff1a;直接使用DeepSeek等工具生成的整段…...

安装npm install element-plus --save报错

今天安装npm install element-plus --save报的错&#xff0c;豆包提示说是项目里使用的 eslint 版本是 7.32.0&#xff0c;而 vue/eslint-config-standard9.0.1 要求的 eslint 版本是 ^9.10.0。总之就是说版本不兼容 报错&#xff1a; While resolving: vue3_project0.1.0 np…...

Python代码缩进统一规范

一、Python缩进的重要性:逻辑与可读性的桥梁 1. 语法规则的核心 Python与其他编程语言显著不同之处在于,它使用缩进来表示代码块的层次结构。不像C、Java等语言依靠大括号{}来明确函数体、循环体和条件语句的范围,Python完全依赖缩进来界定这些逻辑单元。例如,在一个if条…...

蓝桥杯基础数论入门

一.试除法 首先我们要了解&#xff0c;所有大于1的自然数都能进行质因数分解。试除法作用如下&#xff1a; ​质数判断 试除法通过验证一个数是否能被小于它的数&#xff08;一般是用2到用根号x&#xff09;整除来判断其是否为质数。根据定义&#xff0c;质数只能被1和自身整除…...

一个插件,免费使用所有顶级大模型(Deepseek,Gpt,Grok,Gemini)

DeepSider是一款集成于浏览器侧边栏的AI对话工具&#xff0c;可免费使用所有顶级大模型 包括GPT-4o&#xff0c;Grok3,Claude 3.5 Sonnet,Claude 3.7,Gemini 2.0&#xff0c;Deepseek R1满血版等 以极简交互与超快的响应速度&#xff0c;完成AI搜索、实时问答、内容创作、翻译、…...

nginx入门,部署静态资源,反向代理,负载均衡使用

Nginx在linux上部署静态资源 概念介绍 Nginx可以作为静态web服务器来部署静态资源。这里所说的静态资源是指在服务端真实存在&#xff0c;并且能够直接展示的一些文件&#xff0c;比如常见的html页面、css文件、js文件、图片、视频等资源。 相对于Tomcat&#xff0c;Nginx处理…...

微信小程序中使用ECharts 并且动态设置数据

项目下载地址 GitHub 地址 https://github.com/ecomfe/echarts-for-weixin 将当前文件夹里的内容拷贝到项目中 目录&#xff1a; json: {"usingComponents": {"ec-canvas": "../components/ec-canvas/ec-canvas"} }wxml&#xff1a; <ec…...

【愚公系列】《高效使用DeepSeek》064-跨文化谈判

🌟【技术大咖愚公搬代码:全栈专家的成长之路,你关注的宝藏博主在这里!】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主! 👉 江湖人称"愚公搬代码",用七年如一日的精神深耕技术领域,以"…...

云原生环境Jvm内存占用持续高位问题排查

生产内存占用过高问题排查 1、问题描述 一个tomcat应用&#xff0c;部署在云原生集群上&#xff0c;云原生监控显示内存占用率持续偏高&#xff0c;最大占用率、平均占用率都在90%多&#xff0c;但是倒没有OOM什么的。 2、问题复现 凭借对此应用的了解&#xff0c;很快就在测…...

linux下io操作详细解析

在 Linux 系统下&#xff0c;IO&#xff08;输入/输出&#xff09;操作是程序与外部设备&#xff08;如文件、网络等&#xff09;交互的重要方式。Linux 提供了丰富的系统调用和库函数来支持各种 IO 操作。以下是对 Linux 下 IO 操作的详细解析&#xff0c;包括文件 IO、网络 I…...

【在校课堂笔记】Python 第 9 节课 总结

- 第 91 篇 - Date: 2025 - 04 - 10 Author: 郑龙浩/仟墨 【Python 在校课堂笔记】 文章目录 南山-第 9 节课字符串的各种操作一 string二 string 的索引1 索引介绍2 示例 - 索引使用 三 切片1 **结构**2 示例 四 回文数 – 切片的应用五 对手机号进行脱敏处理六 注意七 读取字…...

AcWing 6099. 座位

原题目链接 问题描述 有 n 头奶牛&#xff08;n ≥ 5&#xff09;&#xff0c;编号为 1 ∼ n&#xff0c;按照某种顺序围着一张圆桌坐成一圈。 奶牛之间存在如下的朋友关系&#xff1a; 如果两头奶牛相邻&#xff0c;则它们是朋友&#xff1b;如果两头奶牛之间只隔着一头奶…...

MySQL SQL Mode

SQL Mode 是 MySQL 中一个重要的系统变量&#xff0c;它决定了 MySQL 应遵循的 SQL 语法规则和数据验证规则。 什么是 SQL Mode SQL Mode 定义了 MySQL 应该支持的 SQL 语法以及执行数据验证的方式。通过设置不同的 SQL Mode&#xff0c;可以让 MySQL 在不同程度上兼容其他数据…...

linux不同用户共享同一anaconda

这里写目录标题 1、anaconda安装2、所有账号可以访问conda 按一下步骤顺序执行&#xff0c;可使linux上不同权限隔离的用户可以同时访问anaconda。 1、anaconda安装 step1&#xff1a;anaconda是通过root账号安装在某个自定义目录下&#xff08;如&#xff1a;/data/software/…...

Langflow 远程命令执行漏洞复现(CVE-2025-3248)(附脚本)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将尽快处理并删除相关内容。 前言…...

如何在 Excel 中处理并拆分你提供的这种混合单位的库存数据。

使用 Power Query (获取与转换数据) - 最推荐 这是处理这类复杂、不规范数据的最强大、最灵活的方法&#xff0c;尤其适合数据量大或需要重复处理的情况。 加载数据到 Power Query&#xff1a; 选中你的数据区域。 在 Excel 菜单栏点击 数据 选项卡。 在 获取和转换数据 功能…...

OpenHarmony荷兰研习会回顾 | 仓颉语言赋能原生应用开发实践

近日&#xff0c;由全球顶级学术峰会EuroSys/ASPLOS和OpenHarmony社区在荷兰鹿特丹合办的操作系统深度研习会圆满收官&#xff0c;本次研习会以"架构探秘-开发实践-创新实验"三位一体的进阶模式&#xff0c;为全球开发者构建了沉浸式技术探索平台。其中&#xff0c;由…...

广州华锐视点考试考核系统:引领智能考核新时代​

在当今数字化飞速发展的时代&#xff0c;考试考核作为教育与培训成果检验的重要环节&#xff0c;也在不断寻求创新与突破。广州华锐视点凭借其先进的技术实力&#xff0c;打造出了一套功能强大、高效便捷的考试考核系统&#xff0c;为各类教育机构、企业培训等提供了全面且优质…...

Harmony鸿蒙应用开发-录音保存并播放音频

功能介绍&#xff1a; 录音并保存为m4a格式的音频&#xff0c;然后播放该音频&#xff0c;参考文档使用AVRecorder开发音频录制功能(ArkTS)&#xff0c;更详细接口信息请查看接口文档&#xff1a;ohos.multimedia.media (媒体服务)。 知识点&#xff1a; 熟悉使用AVRecorder…...

室分系统(室内分布系统)详解

室分系统&#xff08;室内分布系统&#xff0c;Indoor Distribution System&#xff09;是用于解决建筑物内部信号弱、覆盖差、容量不足的专用通信网络&#xff0c;广泛应用于商场、写字楼、地铁、机场等场景。 1. 室分系统的作用 解决信号覆盖问题&#xff1a;消除室内盲区&am…...

基于 Qt4 的图片处理工具开发(二):增加对比度调节、界面布局优化、多线程操作

废话不多说&#xff0c;先来看一下最终的界面效果 一、引言 在上一篇博客中&#xff0c;我们完成了图片处理工具的基础框架&#xff0c;实现了拖拽加载、亮度调节和角度旋转功能。本文将聚焦界面布局重构、对比度调节功能扩展以及多线程性能优化&#xff0c;进一步提升工具的实…...

禁止页面滚动的方法-微信小程序

在微信小程序中&#xff0c;有几种方法可以禁止页面滚动&#xff1a; 一、通过页面配置禁止滚动 在页面的JSON配置文件中设置&#xff0c;此方法完全禁止页面的滚动行为&#xff1a; {"disableScroll": true }二、通过 CSS 样式禁止滚动 在页面的WXSS文件中添加&…...

基于landsat与Modis影像的遥感技术的生态环境质量评价

本次将结合ArcGIS与ENVI&#xff0c;发布 landsat与Modis影像的遥感技术的生态环境质量评价技术专题&#xff0c;专题课程学习&#xff01; 在反映生态质量的诸多自然因素中&#xff0c;绿度、湿度、热度、干度可谓是与人类生存息息相关的4个重要指标&#xff0c;也是人类直观…...

蓝桥杯刷题--宝石组合

在一个神秘的森林里&#xff0c;住着一个小精灵名叫小蓝。有一天&#xff0c;他偶然发现了一个隐藏在树洞里的宝藏&#xff0c;里面装满了闪烁着美丽光芒的宝石。这些宝石都有着不同的颜色和形状&#xff0c;但最引人注目的是它们各自独特的 “闪亮度” 属性。每颗宝石都有一个…...

记录一下学习docker的命令(不断补充中)

#2025-04-10,22:12############### 在wsl2中安装了ubuntu24.04.1后有部署了docker&#xff0c; 如果没有启动docker可以通过下列命令启动docker&#xff1a; sudo systemctl start docker 执行下列命令可以看到docker状态&#xff0c;并不占用控制台的命令&#xff1a; su…...

沃伦森电机状态传感器RS-MTS01:智能运维的解决方案

行业工况背景 一、方案背景 在现代工业生产中&#xff0c;电机发挥着至关重要的作用&#xff0c;其运行状况直接关联到生产效率、产品质量以及成本控制。传统的电机维护主要依赖于定期的巡检和事后维修&#xff0c;这种方式难以提前发现潜在的故障隐患&#xff0c;容易导致意外…...

设计模式:单例模式

复习一下&#xff1a; 单例模式&#xff08;Singleton Pattern&#xff09; 原理&#xff1a; 单例模式确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。它通过将类的构造函数设为私有&#xff0c;防止外部代码直接实例化该类。同时&#xff0c;提供…...

电商素材革命:影刀RPA魔法指令3.0驱动批量去水印,实现秒级素材净化

本文 去除水印实操视频展示电商图片水印处理的困境​影刀 RPA 魔法指令 3.0 强势登场​利用魔法指令3.0两步实现去除水印操作关于影刀RPA 去除水印实操视频展示 我们这里选择了4张小红书里面比较帅气的图片&#xff0c;但凡用过小红书的都知道&#xff0c;小红书右下角是会有小…...

解析 WebSocket 协议的基本原理

随着互联网的快速发展&#xff0c;Web 应用对实时通信的需求越来越高。传统的 HTTP 协议无法满足实时性的要求&#xff0c;而 WebSocket 协议则应运而生。WebSocket 是一种新型的协议&#xff0c;允许在一个单独的持久连接上进行全双工的通信&#xff0c;提供了更高效、实时的数…...

学生管理系统(Python)

运行结果&#xff1a; 源代码&#xff1a; """ 项目&#xff1a;类似于学生管理系统---增删改查 """ #封装一个学生类 import random class Student: def __init__(self,stuid,name,score): self.stuid stuid self.name name self.score …...

Java抽象类:深入理解与应用

一、引言 在Java的面向对象编程中&#xff0c;抽象类&#xff08;Abstract Class&#xff09;是一个非常重要的概念。它允许我们定义一个类&#xff0c;该类中包含一些抽象方法和非抽象方法&#xff0c;但自己不能被实例化。抽象类主要用于创建类的层次结构&#xff0c;并为子…...

下垂控制的定义与应用解析

下垂控制&#xff08;Droop Control&#xff09;是一种广泛应用于微电网、逆变器及分布式电源系统的控制策略&#xff0c;其核心思想是通过模拟传统同步发电机的下垂特性&#xff0c;实现电力系统中电压、频率的稳定以及功率的合理分配。以下是其关键解释及参考依据&#xff1a…...

oracle 并行度(Parallel Degree)

在Oracle数据库中&#xff0c;并行度&#xff08;Parallel Degree&#xff09; 是用于控制并行处理任务的关键配置&#xff0c;旨在通过多进程协作加速大规模数据处 一、并行度的核心概念 并行度&#xff08;DOP, Degree of Parallelism&#xff09; 表示一个操作同时使用的并…...