Three.js机器人与星系动态场景(二):强化三维空间认识

在上篇博客中介绍了如何快速利用react搭建three.js平台,并实现3D模型的可视化。本文将在上一篇的基础上强化坐标系的概念。引入AxesHelper辅助工具及文本绘制工具,带你快速理解camer、坐标系、position、可视区域。

Three.js机器人与星系动态场景:实现3D渲染与交互式控制-CSDN博客

 AxesHelper辅助坐标系

three.js提供了 AxesHelper方法,在3D场景中建立一个,x、y、z两两垂直的坐标系。由于在网页中通常用z-index表示高度或者层级,在3D场景中z表示离屏幕的距离,z越大,物体离实现越近。所以在3D中的坐标系默认是y轴朝上。

辅助坐标系便于开发者或用户在视觉上识别和定位场景中的物体。坐标轴辅助器通常在开发阶段用于调试,但在最终的产品中也可以保留,以帮助用户理解3D空间

使用方法

  const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);

AxesHelper是Three.js库中的一个类,用于创建一个可视化的坐标轴(X轴、Y轴和Z轴)。括号中的150是一个参数,表示坐标轴的长度为150个单位。 通过THREE的AxesHelper方法创建,并通过scene添加到场景中。

 通过这个方法可以看到在3D中生成了坐标轴辅助线。

three.js坐标轴颜色R绿GB分别对应坐标系的xyz

绘制文本并让文字始终朝向用户 

在旋转过程中坐标系可能会混乱,虽然你强迫自己记住xyz对应红绿蓝,但是用着用着就蒙了。可以借助文字辅助理解。然而在threeJS中文本也是当物体绘制出来。不是几行代码就能实现的。这里文字需要通过load进行加载,并且文字有自己的position,在循环动画时添加文本的lookAt为camera的position,让文本始终看着相机,即可实现文本朝向用户。

 创建文本

import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
//创建文本
function createText(content: string, font: any) {const textGeometry = new TextGeometry(content, {font: font,size: 1,height: 0.1,curveSegments: 1,});textGeometry.center();const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // frontconst mesh = new THREE.Mesh(textGeometry, textMaterial);return mesh;
}

 解析字体的json文件

  //坐标系添加文字const loader = new FontLoader();let meshX = new THREE.Mesh();let meshY = new THREE.Mesh();let meshZ = new THREE.Mesh();loader.load("fonts/optimer_regular.typeface.json", function (font) {meshX = createText("X", font);meshY = createText("Y", font);meshZ = createText("Z", font);meshX.position.x = 12;meshY.position.y = 12;meshZ.position.z = 12;scene.add(meshX);scene.add(meshY);scene.add(meshZ);});

 这个json后缀的文件是用来解析字体的,load的第一个参数是json的url。json数据从哪获取?

打卡node_modules或者你下的threejs源码,找到examples/fonts,将其复制到public文件夹。就可以引入了

 

 

在学习threeJS过程中,我也是不断参考example示例,找所需的资源 

 相机camera

camera相机

 相机在3D场景的作用可以想象成是你手中的一个真实的相机或者你的眼睛。在现实生活中,你站在某个地方,你的位置就是相机的位置。比如说,你站在一个公园的角落,从这个位置你可以看到公园里的不同景物。在Three.js中,camera代表了观察者(可以是你的眼睛或者一个虚拟的摄像头)在3D空间中的位置和视角。

 PerspectiveCamera 相机

three.js 里有几种不同的相机,在这里,我们使用的是 PerspectiveCamera(透视摄像机)这个相机类型最接近我们现实生活中观察世界的方式,因为它使用透视投影来渲染场景。透视投影的特点是近大远小,这使得远处的物体看起来比实际小,而近处的物体则显得更大。

关键参数

当你创建一个 PerspectiveCamera 时,通常需要设置以下几个参数:

  1. 视野(Field of View, FOV):这是相机视野的角度,通常以度数表示。较大的 FOV 会使场景看起来更宽广,而较小的 FOV 则会使场景看起来更狭窄。

  2. 长宽比(Aspect Ratio):这是相机视口的宽度与高度的比率。通常设置为渲染窗口的宽度除以高度。

  3. 近裁剪面(Near Clipping Plane):这是相机能够看到的最近的距离。任何比这个距离更近的物体都不会被渲染。

  4. 远裁剪面(Far Clipping Plane):这是相机能够看到的最远的距离。任何比这个距离更远的物体也不会被渲染。

   

想象一下你正在用眼睛看世界。PerspectiveCamera 就像你的眼睛,它有一个视野范围(FOV),决定了你能看到多宽或多窄的场景。长宽比(Aspect Ratio)决定了你看到的画面是宽屏还是窄屏。近裁剪面和远裁剪面则决定了你能看到的最近和最远的物体。 

 在three.js中通常通过下面的方式创建透视相机,通常设置宽高比就用视口可视区域的宽高比。

  // 创建一个Three.js相机,包括透视投影、宽高比、近裁剪面和远裁剪面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

 position位置

position就是在3D场景中的物体的坐标信息,在Three.js中,设置camera.position就是确定你的“观察点”在哪里

 可以对具有postion属性的物体通过set方法设置x,y,z坐标信息

  camera.position.set(15, 12, 8);

 也可以对Three.js的Object3D对象通过position.x和position.y单独设置坐标轴的值

lookAt方法

lookAt方法就像是你在决定你的相机或者你的眼睛要聚焦在哪个点上。当你调整相机对准某个特定对象时,你实际上是在使用lookAt方法。在现实生活中,即使你站在一个固定的位置,你的头可以转向不同的方向,去看向不同的物体。

 lookAt看向的是3D空间中的具体点,相机的位置和lookAt看向的点覆盖的区域就是网页渲染初始时的视野

举例:继续上面的操场例子,即使你站在同一个角落,你可以选择看向操场的中心点,也可以看向操场上的某个运动员或者某个特定的物体。当你看向某个点时,你的注意力就集中在了那个方向上,就像是在Three.js中调用lookAt方法,让相机镜头指向那个点。

在本文中相机的位置position和lookAt坐标系

  camera.position.set(15, 12, 8);camera.lookAt(0, 0, 0);

可以看到,你的眼睛是能够看到x、y、z三个坐标的正向,并且视线正对坐标原点。也就是第一个机器人。 

  robot2.position.x = 6;robot2.position.z = 6;

camera位置和lookAt对可视物体的影响 

1.物体放在camera后面

 示例的第一个机器人位于坐标原点,第二个机器人x轴和z轴分别偏移了6个单位。因为camera的位置是x轴偏移15,y轴偏移12,因此能够看到两个机器人。如果我将第二个机器人的x和y都大于camera呢?比如如下的设置

  robot2.position.x = 20;robot2.position.z = 20;

 可以看到默认页面加载是看不到第二个机器人的。但是相机位置和看向点不变,我们旋转3D坐标系,可以看到第二个机器人。说明此时机器人“站在了你的后面”,因为你没看向它,但它存在吗?当然存在。

 2.切换camera的lookAt

机器人2的位置信息 

  robot2.position.x = 20;robot2.position.z = 20;

切换相机的视角使其看到机器人2

camera.position.set(15, 12, 8);
camera.lookAt(20, 0, 20);

 可以看到页面初始时只能看到机器人2,坐标原点在后面,所以看不到原点上的机器人。但是旋转坐标系能够看到。

 OrbitControls旋转坐标系

前面提了很多,旋转坐标系。默认坐标系是不能旋转的,在空间中位置信息确认了就是相对静止的。那我们怎么可以拖动屏幕实现立体观察的效果呢?

在 Three.js 中,如果你希望通过拖动屏幕来旋转场景中的坐标轴,通常需要使用一些交互控制器,例如 OrbitControlsOrbitControls 是一个控制器,它允许用户通过拖动、滚动和按键来控制相机的位置和方向。

 使用OrbitControls

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

可以通过给controls对象添加一个事件监听,当orbitControls改变了,调用renderer重新渲染scene和camera

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件

但在我们的代码中并没有显示的调用change的监听,而是在设置循环动画的时候通过renderer.render方法重新渲染每一帧 

  const update = () => {requestAnimationFrame(update);camera.lookAt(20, 0, 20);robot.rotation.y -= 0.005; //机器人旋转robot2.rotation.y -= 0.005;// 粒子旋转starts.rotation.y -= 0.001;starts.rotation.z += 0.001;starts.rotation.x += 0.001;renderer.render(scene, camera);};update(); //自动更新

虽然在 update 函数中没有显式调用 controls.update(),但是 OrbitControls 在内部已经通过事件监听器在每次交互时更新了相机的位置和方向。当你移动鼠标或触摸屏幕时,这些交互事件会被监听器捕获,OrbitControls 会相应地调整相机,然后 renderer.render(scene, camera) 会使用新的相机状态来渲染场景。

简而言之,OrbitControls 的设计允许它不需要显式的 change 事件监听就能工作。它会在用户交互时自动更新相机,然后在你的渲染函数中,通过 renderer.render(scene, camera) 来反映这些更新。

如果你的场景中确实需要响应用户交互以外的事件来触发渲染,或者你想要在特定条件下禁用某些控制行为,那么监听 change 事件会很有用。但在大多数情况下,对于基本的交互控制,OrbitControls 已经提供了所需的功能。

OrbitControls本质 

OrbitControls本质上就是改变相机的参数,比如相机的位置属性,改变相机位置也可以改变相机拍照场景中模型的角度,实现模型的360度旋转预览效果  

 完整版代码

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
//机器人脑袋
function createHead() {//SphereGeometry创建球形几何体const head = new THREE.SphereGeometry(4, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.5);const headMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const headMesh = new THREE.Mesh(head, headMaterial);return headMesh;
}
//触角
function generateHorn(y: number, z: number, angle: number) {//触角 CapsuleGeometry 创建胶囊形状的几何体。胶囊形状可以看作是一个圆柱体两端加上半球体const line = new THREE.CapsuleGeometry(0.1, 2);const lineMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const lineMesh = new THREE.Mesh(line, lineMaterial);lineMesh.position.y = y;lineMesh.position.z = z;lineMesh.rotation.x = angle;return lineMesh;
}
//机器人眼睛
function generateEye(x: number, y: number, z: number) {//SphereGeometry创建球形几何体const eye = new THREE.SphereGeometry(0.5, 32, 16, 0, Math.PI * 2, 0, Math.PI * 2);const eyeMaterial = new THREE.MeshStandardMaterial({color: 0x212121,roughness: 0.5,metalness: 1.0,});const eyeMesh = new THREE.Mesh(eye, eyeMaterial);eyeMesh.position.x = x;eyeMesh.position.y = y;eyeMesh.position.z = z;return eyeMesh;
}
//机器人身体
function generateBody() {//CylinderGeometry第一个参数是上部分圆的半径,第二个参数是下部分圆的半径,第三个参数是高度,材质使用的跟腿一样const body = new THREE.CylinderGeometry(4, 4, 6);const bodyMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const bodyMesh = new THREE.Mesh(body, bodyMaterial);return bodyMesh;
}
//胳膊、腿
function generateLegs(y: number, z: number) {const leg1 = new THREE.CapsuleGeometry(1, 4);const legMaterial1 = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const leg1Mesh = new THREE.Mesh(leg1, legMaterial1);leg1Mesh.position.y = y;leg1Mesh.position.z = z;return leg1Mesh;
}
//创建机器人
function generateRobot() {// 创建一个Three.js对象,用于存放机器人const robot = new THREE.Object3D();const headMesh = createHead();headMesh.position.y = 6.5;robot.add(headMesh);//眼睛const leftEye = generateEye(3, 8, -2);const rightEye = generateEye(3, 8, 2);robot.add(leftEye);robot.add(rightEye);const leftHorn = generateHorn(11, -1, (-Math.PI * 30) / 180);const rightHorn = generateHorn(11, 1, (Math.PI * 30) / 180);robot.add(leftHorn);robot.add(rightHorn);const body = generateBody();body.position.y = 4;robot.add(body);// 生成机器人左腿robot.add(generateLegs(0, -2));// 生成机器人右腿robot.add(generateLegs(0, 2));//胳膊robot.add(generateLegs(3, 5));robot.add(generateLegs(3, -5));//物体缩放robot.scale.x = 0.3;robot.scale.y = 0.3;robot.scale.z = 0.3;return robot;
}
//创建粒子星星
function generateStarts(num: number) {//制作粒子特效const starts = new THREE.Object3D();const obj = new THREE.SphereGeometry(0.2, 3, 3);const material = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 5,});const mesh = new THREE.Mesh(obj, material);for (let i = 0; i < num; i++) {const target = new THREE.Mesh();target.copy(mesh);target.position.x = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));target.position.y = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));target.position.z = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));starts.add(target);}return starts;
}
//创建文本
function createText(content: string, font: any) {const textGeometry = new TextGeometry(content, {font: font,size: 1,height: 0.1,curveSegments: 1,});textGeometry.center();const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // frontconst mesh = new THREE.Mesh(textGeometry, textMaterial);return mesh;
}
/*** 创建一个Three.js场景,包括相机和渲染器*/
function Robot() {// 创建一个div容器,用于存放渲染的Three.js场景const containerRef = useRef<HTMLDivElement>(null);const scene = new THREE.Scene();// 创建一个Three.js相机,包括透视投影、宽高比、近裁剪面和远裁剪面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(15, 12, 8);camera.lookAt(0, 0, 0);// 创建一个Three.js渲染器,包括抗锯齿const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);//添加坐标系const axisHelper = new THREE.AxesHelper(150);scene.add(axisHelper);//坐标系添加文字const loader = new FontLoader();let meshX = new THREE.Mesh();let meshY = new THREE.Mesh();let meshZ = new THREE.Mesh();loader.load("fonts/optimer_regular.typeface.json", function (font) {meshX = createText("X", font);meshY = createText("Y", font);meshZ = createText("Z", font);meshX.position.x = 12;meshY.position.y = 12;meshZ.position.z = 12;scene.add(meshX);scene.add(meshY);scene.add(meshZ);});const robot = generateRobot();const robot2 = generateRobot();robot2.position.x = 6;robot2.position.z = 6;// 将机器人身体添加到场景中scene.add(robot);scene.add(robot2);// 创建一个Three.js方向光,包括颜色、强度const straightLight = new THREE.DirectionalLight(0xffffff, 5);// 设置方向光的位置straightLight.position.set(20, 20, 20);// 将方向光添加到场景中scene.add(straightLight);const starts = generateStarts(200);scene.add(starts);//轨道控制器const controls = new OrbitControls(camera, renderer.domElement);controls.update();const animate = () => {requestAnimationFrame(animate);robot.rotation.y -= 0.005; //机器人旋转robot2.rotation.y -= 0.005;// 粒子旋转starts.rotation.y -= 0.001;starts.rotation.z += 0.001;starts.rotation.x += 0.001;//meshX.lookAt(camera.position);meshY.lookAt(camera.position);meshZ.lookAt(camera.position);renderer.render(scene, camera);};animate(); //添加动画// 监听组件挂载和卸载useEffect(() => {// 如果div存在,将渲染器dom元素添加到div中if (containerRef.current) {containerRef.current.appendChild(renderer.domElement);// 渲染场景renderer.render(scene, camera);}}, [containerRef]);// 返回div容器,用于存放渲染的Three.js场景return <div ref={containerRef} style={{ width: "100vw", height: "100vh" }}></div>;
}// 导出Robot组件
export default Robot;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

色彩搭配的艺术:打造和谐视觉体验的秘诀

当设计作品呈现给用户时首先映入眼帘的是视觉表达&#xff0c;色彩无疑是最关键的元素之一。色彩不仅是视觉艺术的一部分&#xff0c;也承载着情感文化甚至个人品味的多重含义。在设计领域&#xff0c;色彩设计可以极大地影响作品的整体感受和传达效果。那么什么是色彩设计&…

python拉取gitlab项目以及拉取报错处理

问题解决 问题1、unable to access https://gitlab.dome.com/web-dome/dome.git/: SSL certificate problem: self signed certificate 解决&#xff1a;打开本地git bash输入下面代码 git config --global http.sslVerify false; 问题2、Authentication failed for https:…

ArmPiPro-网络配置

说明 因为ubuntu18.04有点旧&#xff0c;这里同时用上了netplan和nm(nmcli)这两个网络工具&#xff0c;如果是ubuntu22.04&#xff0c;网络管理全部用nmcli和nmtui即可。 eth0有线一般用来连接电脑&#xff0c;wlan0即是用来连接WiFi热点。 设置Pi4Lubuntu的Wifi模式&#xff…

ComboBox控件如果有两个相同的项,并且你选择了第二个,再次打开下拉列表时,它可能不会定位到你选择的上面第一个项问题

一、MFC的ComBox绑定项,有两个项名称相同,选择第二个绑定项,再次打开下拉框会定位到第 在MFC中&#xff0c;ComboBox控件默认会在选择项改变时发送CBN_SELCHANGE通知&#xff0c;但如果ComboBox中有两个相同的项&#xff0c;并且你选择了第二个&#xff0c;再次打开下拉列表时…

CSS动画keyframes简单样例

一、代码部分 1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><link rel"stylesheet" href…

数据泄露时代的安全之道:访问认证的重要性

引言 想象一下&#xff1a;你一觉醒来&#xff0c;收到一条通知——你的公司遭遇了数据泄露。你感到恐惧&#xff0c;因为这意味着客户数据被曝光&#xff0c;公司声誉受损&#xff0c;还有巨额罚款在等着你。在当今的数字化环境中&#xff0c;这种情况太常见了。全球各地的组…

【分布式系统】监控平台Zabbix自定义模版配置

目录 一.添加Zabbix客户端主机 1.服务端跟客户端配置时间同步 2.安装 zabbix-agent2 3.修改 agent2 配置文件 4.服务端安装 zabbix-get验证客户端数据的连通性 5.Web 页面中添加 agent 主机 6.监控模板 二.自定义监控内容 1.客户端创建自定义key 1.1.明确需要执行的 …

优先级队列(堆)学的好,头发掉的少(Java版)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

问界3D-为什么在建模的过程中要先映射再展开呢

问题提出&#xff1a;为什么在建模的过程中要先映射再展开呢 在建模过程中先进行映射再展开的原因主要涉及到工作流程的效率和纹理质量的保证。具体来说&#xff0c;以下几点解释了为什么这一顺序是合理且常见的&#xff1a; 1. 初步确定UV布局 属 性描述映射通过不同类型的映…

如何改变网络ip地址?轻松掌握的实用方法

在数字化时代&#xff0c;网络IP地址作为设备在网络中的唯一标识&#xff0c;扮演着至关重要的角色。然而&#xff0c;在某些情况下&#xff0c;我们可能需要更改设备的IP地址&#xff0c;以满足特定的网络需求或保护隐私。本文将为您详细介绍如何改变网络IP地址的方法&#xf…

JL-杰理芯片-认识TA的SDK的第五天

如何区分左右耳我把烧录好了文件,连接手机后,发现对耳变成了两个设备,这个要怎么设置成一个设备? 一个左声道,一个右声道,就能解决 左耳、右耳、单耳耳机无法配对(对耳)如果AD6983D对耳无法配对 <

高通骁龙(Qualcomm Snapdragon)CDSP HVX HTP 芯片简介与开发入门

1. Hexagon DSP/HVX/HTP 硬件演进 说到高通骁龙芯片大家应该不会陌生&#xff0c;其作为最为广泛的移动处理器之一&#xff0c;几乎每一个品牌的智能手机都会使用高通骁龙的处理器。 高通提供了一系列骁龙芯片解决方案。根据性能强弱分为了5个产品系列&#xff1a;从最高端的…

【数学建模】 数据处理与拟合模型

文章目录 数据处理与拟合模型1. 数据与大数据1.1 什么是数&#xff1f;什么是数据&#xff1f;1.2 数据与大数据1.3 数据科学的研究对象 2. 数据的预处理2.1 为什么需要数据预处理2.2 使用pandas处理数据的基础2.3 pandas常用方法总结2.4 数据的规约1) 维度规约2) 数值规约3) 数…

WAF的新选择,雷池 SafeLine-安装动态防护使用指南

什么是 WAF WAF 是 Web Application Firewall 的缩写&#xff0c;也被称为 Web 应用防火墙。 区别于传统防火墙&#xff0c;WAF 工作在应用层&#xff0c;对基于 HTTP/HTTPS 协议的 Web 系统有着更好的防护效果&#xff0c;使其免于受到黑客的攻击&#xff1b; 通俗来讲&#…

推动高效能:东芝TB67H301FTG全桥直流电机驱动IC

在如今高度自动化的时代&#xff0c;电子产品的性能和效率成为了工程师们关注的焦点。东芝的TB67H301FTG全桥直流电机驱动IC应运而生&#xff0c;以其卓越的技术和可靠性&#xff0c;成为众多应用的理想选择。无论是在机器人、家用电器、工业自动化&#xff0c;还是在其他需要精…

小型语言模型SLM:趋势和用例

前言 近年来&#xff0c;GPT 和 BERT 等大型语言模型 (LLM) 不断发展&#xff0c;参数数量从数亿飙升至 GPT-4 等后继者的一万亿以上。然而&#xff0c;不断增长的参数规模引出了一个问题&#xff1a;对于企业应用来说&#xff0c;参数规模越大就一定越好吗&#xff1f; 答案…

35 智能指针

目录 为什么需要智能指针&#xff1f;内存泄露智能指针的使用及原理c11和boost中智能指针的关系RAII扩展学习 1. 为什么需要智能指针&#xff1f; 下面我们先分析一下下面这段程序有没有什么内存方面的问题&#xff1f; int div() {int a, b;cin >> a >> b;if (…

Ubuntu无法安全地用该源进行更新,所以默认禁用该源。

解决方案 1. 获取并添加缺失的 GPG 公钥 可以使用 apt-key 命令来添加缺失的公钥。根据错误信息&#xff0c;缺失的公钥是 3B4FE6ACC0B21F32。 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F322. 更新软件包列表 添加公钥后&#xff0c;更…

分享一款超火的的发型stable diffusion提示词!

前言 1、女性发型 Tag短发侧刘海高马尾麻花辫甜美卷发半扎发侧分卷发半扎马尾发波浪空气刘海波波头高马尾空气刘海自然波浪卷复古波浪卷发短发齐刘海矮扎丸子头露出额头小波浪刘海披肩卷发英文Short Hair with Side BangsHigh Ponytail BraidSweet CurlsHalf-Up HairSide-Part…

用Python轻松转换Markdown文件为PDF文档

Markdown&#xff0c;以其简洁的语法和易于阅读的特性&#xff0c;成为了许多作家、开发者和学生记录思想、编写教程或撰写报告的首选格式。然而&#xff0c;在分享或打印这些文档时&#xff0c;Markdown的纯文本形式可能无法满足对版式和布局的专业需求。而将Markdown转换为PD…