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

Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器

个人简介

👀个人主页: 前端杂货铺
开源项目: rich-vue3 (基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL)
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍖开源 rich-vue3 🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

内容参考链接
WebGL专栏WebGL 入门
Three.js(一)创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
Three.js(二)scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机
Three.js(三)聚光灯、环境光、点光源、平行光、半球光
Three.js(四)基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质
Three.js(五)Three.js——二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字

文章目录

    • 前言
    • 一、Tween动画
    • 二、点击选取对象
    • 三、加载外部文件
    • 四、使用相机控制器
    • 总结

前言

大家好,这里是前端杂货铺。

上篇文章我们学习了 二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字。接下来,我们继续我们 three.js 的学习!

在学习的过程中,如若需要深入了解或扩展某些知识,可以自行查阅 => three.js官方文档。


一、Tween动画

Tween.js是一个轻量级的 JavaScript 库,可以创建平滑的动画和过渡效果。

下面,我们设置一个不间断重复的,每两秒进行重新动画的场景。

核心代码:

new TWEEN.Tween(cube.rotation).to({x: cube.rotation.x + 2,y: cube.rotation.y + 2,z: cube.rotation.z + 2,
}, 2000).start().repeat(Infinity);TWEEN.update();

完整代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/tween.min.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);// 创建立方体材质const lambert = new THREE.MeshLambertMaterial({color: 0xff0000});const basic = new THREE.MeshBasicMaterial({wireframe: true});const cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [lambert, basic]);// 添加到场景scene.add(cube);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);new TWEEN.Tween(cube.rotation).to({x: cube.rotation.x + 2,y: cube.rotation.y + 2,z: cube.rotation.z + 2,}, 2000).start().repeat(Infinity);const animation = () => {TWEEN.update();// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>

tween动画


二、点击选取对象

通过鼠标点击获取x, y坐标,进而计算出归一化坐标。之后通过光线投射进行物体的拾取。

Raycaster 这个类用于进行光线投射。光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)。

new THREE.Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
参数名称描述
origin光线投射的原点向量
direction向射线提供方向的方向向量,应当被标准化
near返回的所有结果比 near 远。near 不能为负值,其默认值为 0
far返回的所有结果都比far近。far不能小于near,其默认值为Infinity(正无穷)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/tween.min.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 0, 20);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加立方体const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);// 创建立方体材质const lambert = new THREE.MeshLambertMaterial({color: 0xff0000});const cube = new THREE.Mesh(cubeGeometry, lambert);cube.rotation.set(0.4, 0.4, 0);cube.position.x = -2;// 添加到场景cube.name = 'cube';scene.add(cube);const sphereGeometry = new THREE.SphereGeometry(2, 10, 10);const sphere = new THREE.Mesh(sphereGeometry, lambert);sphere.position.x = 4;sphere.name = 'sphere';scene.add(sphere);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 90);scene.add(spotLight);document.onclick = function (event) {// 归一化坐标(将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1))const x = (event.clientX / window.innerWidth) * 2 - 1;const y = -(event.clientY / window.innerHeight) * 2 + 1;// 创建设备坐标(三维)const standardVector = new THREE.Vector3(x, y, 0.5);// 转化为世界坐标 (将此向量 (坐标) 从相机的标准化设备坐标 (NDC) 空间投影到世界空间)const worldVector = standardVector.unproject(camera);// 做序列化const ray = worldVector.sub(camera.position).normalize();// 实现点击选中// 创建一个射线发射器,用来发射一条射线const raycaster = new THREE.Raycaster(camera.position, ray);// 返回射线碰撞到的物体const intersects = raycaster.intersectObjects(scene.children, true);let point3d = null;if (intersects.length) {point3d = intersects[0];}if (point3d) {console.log(point3d.object.name);}}const animation = () => {// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>

raycaster光线投射


三、加载外部文件

加载外部文件,可以使用 MTL 加载器来实现。

MTLLoader 一个用于加载 .mtl 资源的加载器,由 OBJLoader 在内部使用。

材质模版库(MTL)或 .MTL 文件格式是 .OBJ 的配套文件格式, 用于描述一个或多个 .OBJ 文件中物体表面着色(材质)属性。

MTLLoader( loadingManager : LoadingManager )

接下来,我们加载一个城市模型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/OBJLoader.js"></script><script src="../lib/three/MTLLoader.js"></script><script src="../lib/three/OBJMTLLoader.js"></script>
</head><body>
<script>// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.set(0, 300, 400);camera.lookAt(new THREE.Vector3(0, 0, 0));// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(2000, 8000, 4000);scene.add(spotLight);const loader = new THREE.OBJMTLLoader();// PS:想要文件的加群获取...loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {scene.add(mesh);})const animation = () => {// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>

在这里插入图片描述


四、使用相机控制器

相机控制器有很多种,它的作用是使得相机围绕目标进行不同类型的运动。

接下来,我们使用 轨迹球控制器、第一人称控制器、飞行控制器、翻滚控制器和轨道控制器 查看一下效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{ margin: 0; padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/OBJLoader.js"></script><script src="../lib/three/MTLLoader.js"></script><script src="../lib/three/OBJMTLLoader.js"></script><!--  轨迹球控件  --><script src="../lib/three/TrackballControls.js"></script><!--  第一人称控件  --><script src="../lib/three/FirstPersonControls.js"></script><!--  飞行控件  --><script src="../lib/three/FlyControls.js"></script><!--  翻滚控件  --><script src="../lib/three/RollControls.js"></script><!--  轨道控件  --><script src="../lib/three/OrbitControls.js"></script>
</head><body>
<script>const clock = new THREE.Clock();// 创建场景const scene = new THREE.Scene();// 创建相机 视野角度FOV、长宽比、近截面、远截面const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置// camera.position.set(0, 300, 400);// camera.position.set(100, 30, 0);camera.position.set(100, 100, 0);camera.lookAt(new THREE.Vector3(0, 0, 0));// 轨迹球控件// const trackball = new THREE.TrackballControls(camera);// 第一人称控件// const controls = new THREE.FirstPersonControls(camera);// controls.lookSpeed = 0.2;// 飞行控件// const controls = new THREE.FlyControls(camera);// controls.rollSpeed = 0.5;// 翻滚控件// const controls = new THREE.RollControls(camera);// 轨道控件const controls = new THREE.OrbitControls(camera);// 创建渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(2000, 8000, 4000);scene.add(spotLight);const loader = new THREE.OBJMTLLoader();loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {scene.add(mesh);})const animation = () => {// trackball.update();controls.update(clock.getDelta());// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation();
</script>
</body></html>

下面,我们以轨道控制器为例,看一下具体的呈现效果:

three.js 使用相机控制器


总结

本篇文章我们讲解了几种常见几何体的基本使用,包括 tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器。

更多内容扩展请大家自行查阅 => three.js官方文档,真心推荐读一读!!

好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!


参考资料:

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者:慕课网_yancy】

在这里插入图片描述


相关文章:

Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…...

内网渗透-在HTTP协议层面绕过WAF

进入正题&#xff0c;随着安全意思增强&#xff0c;各企业对自己的网站也更加注重安全性。但很多web应用因为老旧&#xff0c;或贪图方便想以最小代价保证应用安全&#xff0c;就只仅仅给服务器安装waf。 本次从协议层面绕过waf实验用sql注入演示&#xff0c;但不限于实际应用…...

qt QGroupBox radiobutton

QGroupBox 显示文本&#xff1a;属性 title 加载radiobutton if (jsonObject.contains("startEndTogether") && jsonObject["startEndTogether"].isString()) {QString selectedButton jsonObject["startEndTogether"].toString();//…...

jetson nano onnxruntime 安装

安装说明&#xff1a; onnxruntime 依赖cuda、cudnn版本&#xff0c;可onnxruntime查找对应关系。但可能会出现jetpack中的cuda和cudnn的版本无法查找到对应版本的onnxruntime的问题。 解决方法&#xff1a; 通过Jetson Zoo下载相应的whl包直接安装。...

图形学初识--屏幕空间变换

文章目录 前言正文为什么需要屏幕空间变换&#xff1f;什么是屏幕空间变换&#xff1f;屏幕空间变换矩阵如何推导&#xff1f;问题描述步骤描述 结尾&#xff1a;喜欢的小伙伴点点关注赞哦! 前言 前面章节主要讲解了视图变换和投影变换&#xff0c;此时距离在屏幕空间显示也就…...

爬楼梯 - LeetCode 热题 81

大家好&#xff01;我是曾续缘&#x1f607; 今天是《LeetCode 热题 100》系列 发车第 81 天 动态规划第 1 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法…...

详解 Spark 核心编程之 RDD 分区器

一、RDD 分区器简介 Spark 分区器的父类是 Partitioner 抽象类分区器直接决定了 RDD 中分区的个数、RDD 中每条数据经过 Shuffle 后进入哪个分区&#xff0c;进而决定了 Reduce 的个数只有 Key-Value 类型的 RDD 才有分区器&#xff0c;非 Key-Value 类型的 RDD 分区的值是 No…...

Selenium番外篇文本查找、元素高亮、截图、无头运行

Selenium根据文本查找元素 ​ python def find_element_with_text(self, loc, attribute, text):try:WebDriverWait(self.driver, 5).until(EC.all_of(EC.text_to_be_present_in_element_attribute(loc, attribute, text)))element self.driver.find_element(*loc)if isinsta…...

Java 22的FFM API,比起Java 21的虚拟线程

哪个对Java未来的发展影响更大&#xff1f;两个 Java 版本中的重要特性&#xff1a;Java 21 的虚拟线程和 Java 22 的 FFM API。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给…...

用c语言实现简易三子棋

本篇适用于C语言初学者。 目录 完整代码&#xff1a; 分步介绍&#xff1a; 声明&#xff1a; 代码主体部分&#xff1a; 模块功能实现&#xff1a; 完整代码&#xff1a; #include<stdio.h> #include <stdlib.h> #include <time.h>#define ROW 3 #d…...

2024年华为OD机试真题-执行时长-Python-OD统一考试(C卷D卷)

2024年OD统一考试(D卷)完整题库:华为OD机试2024年最新题库(Python、JAVA、C++合集) 题目描述: 为了充分发挥GPU算力,需要尽可能多的将任务交给GPU执行,现在有一个任务数组,数组元素表示在这1秒内新增的任务个数且每秒都有新增任务,假设GPU最多一次执行n个任务,一次执…...

对未知程序所创建的 PDF 文档的折叠书签层级全展开导致丢签的一种解决方法

对需要经常查阅、或连续长时间阅读的带有折叠书签的 PDF 文档展开书签层级&#xff0c;提高阅览导航快捷是非常有必要的。 下面是两种常用书签层级全展开的方法 1、 FreePic2Pdf 1 - 2 - 3 - 4 - 5 - 6&#xff0c;先提取后回挂 2、PdgCntEditor 载入后&#xff0c;直接保存…...

计算机系统结构之FORK和JOIN

程序语言中用FORK语句派生并行任务&#xff0c;用JOIN语句对多个并发任务汇合。 FORK语句的形式为FORK m&#xff0c;其中m为新领程开始的标号。 JOIN语句的形式为JOIN n&#xff0c;其中n为并发进程的个数。 例1&#xff1a;给定算术表达式ZEA*B*C/DF经并行编译得到如下程序…...

Yocto - virtual/kernel介绍

在 Yocto 项目中&#xff0c;"virtual/kernel "是一个虚拟目标&#xff0c;作为 Linux 内核的抽象层。它是一种以灵活方式指定内核依赖关系的方法&#xff0c;允许实际的内核配方由特定构建中使用的机器配置和层决定。 下面是关于 "virtual/kerne"的含义和…...

如何在 DigitalOcean 云服务器上创建自定义品牌名称服务器

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 对于托管提供商或转售商来说&#xff0c;拥有自定义的名称服务器可以为客户提供更专业的外观。这消除了要求客户将其域名指向另一…...

心链6----开发主页以及后端数据插入(多线程并发)定时任务

心链 — 伙伴匹配系统 开发主页 信息搜索页修改 主页开发&#xff08;直接list用户&#xff09; 在后端controller层编写接口去实现显示推荐页面的功能 /*** 推荐页面* param request* return*/GetMapping("/recommend")public BaseResponse<List<User>&…...

【Linux】日志管理

一、日志进程 1、处理日志的进程 rsyslogd&#xff1a;系统专职日志程序 观察rsyslogd程序&#xff1a; ps aux | grep rsyslogd 2、常见的日志文件 1、系统主日志文件: /var/log/messages 动态查看日志文件尾部&#xff1a; tail -f /var/log/messages 2、安全…...

AI 绘画爆火背后:扩散模型原理及实现

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…...

详解智慧互联网医院系统源码:开发医院小程序教学

本篇文章&#xff0c;笔者将详细介绍智慧互联网医院系统的源码结构&#xff0c;并提供开发医院小程序的详细教学。 一、智慧互联网医院系统概述 智慧互联网医院系统涵盖了预约挂号、在线咨询、电子病历、药品管理等多个模块。 二、系统源码结构解析 智慧互联网医院系统的源码…...

【技术实操】银河高级服务器操作系统实例分享,数据库日志文件属主不对问题分析

1. 问题现象描述 2023 年 06 月 30 日在迁移数据库过程中&#xff0c;遇到数据库 crash 的缺陷&#xff0c;原因如下&#xff1a;在数据库启动时候生成的一组临时文件中&#xff0c;有 owner 为 root 的文件&#xff0c; 文件权限默认为 640&#xff0c; 当数据库需要使用的时…...

函数的创建和调用

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 提到函数&#xff0c;大家会想到数学函数吧&#xff0c;函数是数学最重要的一个模块&#xff0c;贯穿整个数学学习过程。在Python中&#xff0c;函数…...

数模混合芯片设计中的修调技术是什么?

一、修调目的 数模混合芯片需要修调技术主要是因为以下几个原因&#xff1a; 工艺偏差&#xff08;Process Variations&#xff09;&#xff1a; 半导体制造过程中存在不可避免的工艺偏差&#xff0c;如晶体管尺寸、阈值电压、电阻和电容值等&#xff0c;这些参数的实际值与…...

MySQL 自定义函数(实验报告)

一、实验名称&#xff1a; 自定义函数 二、实验日期&#xff1a; 2024年 6 月 1 日 三、实验目的&#xff1a; 掌握MySQL自定义函数的创建及调用&#xff1b; 四、实验用的仪器和材料&#xff1a; 硬件&#xff1a;PC电脑一台&#xff1b; 配置&#xff1a;内存&#…...

一次职业院校漏洞挖掘

这个是之前挖掘到的漏洞&#xff0c;目前网站进行重构做了全新的改版&#xff0c;但是这个漏洞特别经典&#xff0c;拿出来进行分享。看到src上面的很多敏感信息泄露&#xff0c;所以自己也想找一个敏感信息泄露&#xff0c;官网如图&#xff1a; 发现在下面有一个数字校园入口…...

洪师傅代驾系统开发 支持公众号H5小程序APP 后端Java源码

代驾流程图 业务流程图 管理端设置 1、首页装修 2、师傅奖励配置 师傅注册后,可享受后台设置的新师傅可得的额外奖励; 例:A注册了师傅,新人奖励可享受3天,第一天的第一笔订单完成后可得正常佣金佣金*奖励比例 完成第二笔/第三笔后依次可得正常佣金佣金*奖励比例 完成的第四…...

View->Bitmap缩放到自定义ViewGroup的任意区域(Matrix方式绘制Bitmap)

Bitmap缩放和平移 加载一张Bitmap可能为宽高相同的正方形&#xff0c;也可能为宽高不同的矩形缩放方向可以为中心缩放&#xff0c;左上角缩放&#xff0c;右上角缩放&#xff0c;左下角缩放&#xff0c;右下角缩放Bitmap中心缩放&#xff0c;包含了缩放和平移两个操作&#xf…...

Centos 7部署NTP

介绍 NTP是Network Time Protocol&#xff08;网络时间协议&#xff09;的简称&#xff0c;它是用来通过互联网或局域网将计算机时钟同步到世界协调时间&#xff08;UTC&#xff09;的协议。 安装 # yum安装 yum install -y ntp# 离线安装 #下载地址&#xff1a;https://mir…...

【前缀和】42. 接雨水

本文涉及知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&am…...

我的名字叫大数据

第1章 大家好,我叫大数据 1.1 我的家族传统:从我小小的祖先到壮大的我 1.1.1 最初的我:原始部落里的计数石头 大家好,我是你们人类文明的“老朋友”——大数据。你们知道吗?在我还没有变成你们手机、电脑里飞速跑动的那些数字前,我最初的模样可是一块块“计数石头”。…...

数据库漫谈-infomix

infomix数据库知名度不高&#xff0c;主要跟它的定位有关&#xff0c;它主要用于unix操作系统&#xff1a;Informix便是取自Information和Unix的结合&#xff0c;它也是第一个支持linux系统的数据库。它其实在金融、电信行业使用率非常高。98年&#xff0c;当时我在做银行领域的…...

【Qt】Qt界面美化指南:深入理解QSS样式表的应用与实践

文章目录 前言&#xff1a;1. 背景介绍2. 基本语法3. QSS 设置方式3.1. 设置全局样式3.2. 从文件加载样式表3.3. 使用 Qt Designer 编辑样式 总结&#xff1a; 前言&#xff1a; 在当今这个视觉至上的时代&#xff0c;用户界面&#xff08;UI&#xff09;的设计对于任何软件产…...

七彩云南文化旅游网站的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;游客管理&#xff0c;导游管理&#xff0c;旅游景点管理&#xff0c;酒店信息管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#xff0c;旅…...

7-zip安装教程

一、简介 7-Zip 是一款开源的文件压缩软件&#xff0c;由 Igor Pavlov 开发。它具有高压缩比、支持多种格式、跨平台等特点。使用 C语言编写&#xff0c;其代码在 Github 上开源。 7-Zip的官网&#xff1a; 7-Zip 7-zip官方中文网站&#xff1a; 7-Zip 官方中文网站 7-Zip 的 G…...

oracle 12c DB卸载流程

1.运行卸载程序 [rootprimary1 ~]# su - oracle [oracleprimary1 ~]$ cd $ORACLE_HOME/deinstall [oracleprimary1 deinstall]$ ./deinstall Checking for required files and bootstrapping ... Please wait ... 这里选择3 、回车、y、y、回车、ASM 这里输入y 2.删除相关目录…...

Docker学习笔记 - 创建自己的image

目录 基本概念常用命令使用docker compose启动脚本创建自己的image 使用Docker是现在最为流行的软件发布方式&#xff0c; 本系列将阐述Docker的基本概念&#xff0c;常用命令&#xff0c;启动脚本和如何生产自己的docker image。 在我们发布软件时&#xff0c;往往需要把我…...

java web爬虫

目录 读取本地文件 从网站读取文件 java爬虫 总结 读取本地文件 import java.io.File; import java.io.PrintWriter; import java.util.Scanner;public class ReplaceText {public static void main() throws Exception{File file new File("basic\\test.txt"…...

MySQL开发教程和具体应用案例

一、MySQL开发教程 初识数据库 定义:数据仓库,安装在操作系统之上,用于存储和管理数据。 分类:关系型数据库(如MySQL、Oracle、SQL Server)和非关系型数据库(如Redis、MongoDB)。 SQL:结构化查询语言,用于管理和操作关系型数据库。 操作数据库 创建、修改、删除…...

QT C++ 模型视图结构 QTableView 简单例子

在Qt中&#xff0c;MVC模式被广泛使用于各种用户界面框架中&#xff0c;包括Qt的模型视图结构。Qt的模型视图结构是基于MVC模式设计的&#xff0c;其中包括了Model、View和Delegate三个部分。 QTableView是Qt模型视图结构中的一种视图&#xff0c;它用于以表格形式显示数据。 …...

2024年3月电子学会Python编程等级考试(四级)真题题库

2024年3月青少年软件编程Python等级考试&#xff08;四级&#xff09;真题试卷 题目总数&#xff1a;38 总分数&#xff1a;100 选择题 第 1 题 单选题 运行如下Python代码&#xff0c;若输入整数3&#xff0c;则最终输出的结果为&#xff1f;&#xff08; &#xff…...

深入分析 Android BroadcastReceiver (一)

文章目录 深入分析 Android BroadcastReceiver (一)1. Android BroadcastReceiver 设计说明1.1 BroadcastReceiver 的主要用途 2. BroadcastReceiver 的工作机制2.1 注册 BroadcastReceiver2.1.1 静态注册2.1.2 动态注册 3. BroadcastReceiver 的生命周期4. 实现和使用 Broadca…...

2024医美如何做抖音医美抖音号,本地团购、短视频直播双ip爆品引流,实操落地课

课程下载&#xff1a;https://download.csdn.net/download/m0_66047725/89307619 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 01-0-序.mp4 02-01-账号定位.mp4 03-02-误区.mp4 04-03-五件套.mp4 05-04-文案怎么来.mp4 06-05-对标怎么弄.mp4 07-06-人设怎…...

Debian常用指令指南:高效管理你的Linux系统

Debian作为Linux发行版中的佼佼者&#xff0c;以其稳定性和安全性而闻名。掌握Debian的常用指令对于系统管理员和开发人员来说至关重要。本文将介绍一系列Debian系统中的常用指令&#xff0c;帮助你高效地管理和维护你的系统。喜欢的话记得一键三连哦&#xff0c;方便找到它。 …...

什么是DELINS交货指示?

DELINS 是指 Delivery Instruction&#xff08;交货指示&#xff09;报文&#xff0c;用于在供应链管理中传递交货指令和相关信息。该报文用于在供应链中的不同合作伙伴之间交换关于交货的详细信息。 DELINS 报文的主要功能 交货指示&#xff1a;传达具体的交货指令&#xff…...

基于Open3D的点云处理24-ICP匹配cuda加速

参考:docs/jupyter/t_pipelines/t_icp_registration.ipynb 完整测试用例: import open3d as o3d import open3d.core as o3cif o3d.__DEVICE_API__ == cuda:import open3d.cuda.pybind.t.pipelines.registration as treg else:...

UE_地编教程_创建地形洞材质

个人学习笔记&#xff0c;不喜勿喷。侵权立删&#xff01; 使用地形洞材质来遮罩地形上特定位置的可视性和碰撞。如要在山脉侧面创建进入洞穴的入口&#xff0c;此操作将非常有用。可使用地形材质和地形洞材质的相同材质&#xff0c;但注意&#xff1a;对比不使用不透明蒙版的…...

「C系列」C 基本语法

文章目录 一、C 基本语法1. **程序结构**2. **数据类型**3. **变量声明**4. **运算符**6. **函数**7. **指针**8. **数组**9. **结构体和联合体**10. **预处理指令**11. **内存管理** 二、C 关键字1. 整体概览2. 具体关键字数据类型关键字控制流关键字其他关键字C11新增关键字总…...

java期末细节知识整理(一)

1.java程序的执行过程&#xff1a;先编译后解释。也就是我们在idea写的文件叫做java源文件&#xff08;.java结尾的文件&#xff09;&#xff0c;经过编译器会生成字节码文件&#xff08;.class结尾的文件&#xff09;&#xff0c;再通过解释器进行实现 2.栈用来存储引用类型的…...

GIt快速入门(一文学会使用Git)

GIt快速入门 文章目录 GIt快速入门一、为什么要学习Git二、Git的安装1.安装Git2.下载GUI 三、Git的概念1、版本控制2、集中式控制3、分布式控制4、多人协作开发1.并行开发2.分支管理3.冲突解决4.代码审查5.分布式特性 四、Git客户端操作1.界面介绍2.提交操作3.创建分支4.合并分…...

电机测试方法的介绍与功能实现(T测试方法)

目录 概述 1 理论介绍 2 实现原理 2.1 旋转式编码器原理 2.2 系统实现框图 2.3 测速原理 2.4 计算速度值 3 STM32Cube配置项目 3.1 软件版本信息 3.2 配置项目 4 代码实现 4.1 电机速度控制 4.2 速度计算函数 4.3 功能实现 5 测试 概述 本文主要介绍测试电机速…...

多线程和多进程的快速入门

多线程和多进程的快速入门 学习自&#xff1a;莫烦Python www.mofanpy.com Threading - 多线程运算python程序 ​ 多线程的简单理解&#xff1a;把数据分成很多段&#xff0c;将每一段数据放入一个线程&#xff0c;将所有的线程同时开始&#xff0c;大大的节省了运算时间。相…...