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

学习threejs，使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

news 2025/11/5 17:52:55

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.MeshPhongMaterial高光材质
    • 1.2 normalMap 法向量贴图
  • 二、🍀使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.MeshPhongMaterial高光材质

THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的光照效果，包括漫反射（diffuse）和镜面反射（specular）。这种材质遵循 Phong 反射模型，可以模拟出光滑表面的高光效果，因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。
常用属性：
THREE.MeshPhongMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：

color：材质的基本颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111）。高光颜色定义了镜面反射的颜色。
shininess：高光强度，默认为 30。高光强度定义了高光区域的锐度，数值越高，高光越集中。
opacity：材质的全局透明度，默认为 1（不透明）。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
reflectivity：环境光反射率，默认为 1。
refractionRatio：折射率，默认为 0.98。
combine：环境贴图的组合方式，默认为 THREE.MixOperation。
bumpMap：凹凸贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
bumpScale：凹凸贴图的比例，默认为 1。
normalMap：法线贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
normalScale：法线贴图的比例，默认为 Vector2(1, 1)。
displacementMap：置换贴图，可以用来改变表面的高度。可以是一个 THREE.Texture 对象。
displacementScale：置换贴图的比例，默认为 1。
displacementBias：置换贴图的偏移，默认为 0。

1.2 normalMap 法向量贴图

概念：
normalMap 法向量贴图‌是一种在3D图形渲染中使用的技术，主要用于增强模型表面的细节和真实感。它通过使用一张特殊的纹理贴图来模拟物体表面的凹凸效果，从而在视觉上增加模型的细节和复杂度。
原理：
法线贴图的基本原理是将物体的法线信息存储在一张RGB纹理中。每个像素的RGB值代表该位置法线的方向，通过这种方式，可以在渲染时利用这些法线信息来模拟表面的凹凸效果。这种方法可以显著降低渲染时需要的面数和计算量，从而优化渲染效果‌。
与Bump Mapping（凹凸贴图）的区别：
法线贴图与Bump Mapping（凹凸贴图）是两种不同的技术，尽管它们在某些情况下可以相互替代。Bump Mapping需要计算每个像素的法线信息，而法线贴图则通过预计算的法线贴图来实现，简化了计算过程。此外，法线贴图能够提供更丰富的细节和更真实的视觉效果‌23。

二、🍀使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源，创建THREE.PointLight点光源，设置点光源位置，给点光源添加模型，scene添加点光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.PlaneBufferGeometry平面几何体、THREE.GridHelper地板割线，scene场景中加入创建的平面几何体和地板割线。创建正常纹理贴图对象normal和法向量纹理贴图对象bump，根据创建的纹理创建两个THREE.MeshPhongMaterial高光材质对象material1（使用normal和bump贴图）、material2（使用normal贴图），创建立方体THREE.BoxGeometry对象geometry，根据立方体geometry和材质THREE.MeshPhongMaterial对象创建两个THREE.Mesh网格对象cube1（使用material1材质）、cube2（使用material2材质）并设置位置，scene场景中加入cube1和cube2。具体实现参考代码样例。
  • 6、加入gui、controls控制，加入stats监控器，监控帧数信息。
  • 7、定义render方法，执行点光源动画以及其他渲染动画，具体代码参考代码样例。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn53(使用设置NORMALMAP法向量贴图创建更加细致的凹凸和褶皱)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/js/Detector.js"></script><script src="lib/js/ImageUtils.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderer, camera, scene, gui, light, stats, controls, cube1, cube2, pointLightvar angle = 0, radian, r = 5var initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)renderer.setClearColor(0xeeeeee)renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var initScene = () => {scene = new THREE.Scene()scene.backgroundColor = new THREE.Color(0xa0a0a0)scene.fog = new THREE.Fog(0xa0a0a0, 5, 50)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 12, 15)}var initGui = () => {gui = {normalScale: 1,animation: false,changeTexture: () => {var image = new Image()image.src = 'data/texture/normalmap/crate.gif'image.onload = (ev) => {var texture = new THREE.Texture(image)texture.needsUpdate = truecube1.material.map = texturevar normal = new THREE.Texture(THREE.ImageUtils.getNormalMap(image))normal.needsUpdate = truecube1.material.normalMap = normalcube2.material.map = texture}}}var datGui = new dat.GUI()datGui.add(gui, 'normalScale', -2, 30).onChange(e => {cube1.material.normalScale.set(e, e)cube1.material.needsUpdate = true})datGui.add(gui, 'animation')datGui.add(gui, 'changeTexture')}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 10)light.castShadow = truescene.add(light)pointLight = new THREE.PointLight(0x00ffff)pointLight.position.set(0, 5, 0)scene.add(pointLight)// 点光源添加模型，显示位置pointLight.add(new THREE.Mesh(new THREE.SphereGeometry(0.05, 20, 20), new THREE.MeshBasicMaterial({color: 0x00ffff})))}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)// 地板var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({color: 0xffffff,depthWrite: false}))mesh.rotation.x = -0.5 * Math.PImesh.receiveShadow = truescene.add(mesh)// 格网var grid = new THREE.GridHelper(200, 50, 0x000000, 0x000000)grid.material.opacity = 0.2grid.material.transparent = truescene.add(grid)// 凹凸纹理var bump = new THREE.TextureLoader().load('data/texture/normalmap/plaster-normal.jpg')// 正常纹理var normal = new THREE.TextureLoader().load('data/texture/normalmap/plaster.jpg')var material1 = new THREE.MeshPhongMaterial({map: normal})material1.normalMap = bumpvar geometry = new THREE.BoxGeometry(6, 6, 6)cube1 = new THREE.Mesh(geometry, material1)cube1.position.set(-5, 5, 0)cube1.rotation.y += Math.PI / 6scene.add(cube1)var material2 = new THREE.MeshPhongMaterial({map: normal})cube2 = new THREE.Mesh(geometry, material2)cube2.position.set(5, 5, 0)cube2.rotation.y -= Math.PI / 6scene.add(cube2)}var initStats = () => {stats = new Stats()document.body.appendChild(stats.domElement)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.target.set(0, 5, 0)controls.enableDamping = true}var render = () => {if (gui.animation) {cube1.rotation.y += 0.01cube2.rotation.y -= 0.01}angle += 1radian = angle / 180 * Math.PIvar x = Math.sin(radian)var y = Math.cos(radian)if (angle % 720 > 360) {y = -y + 2}pointLight.position.z = x * rpointLight.position.x = y * r - r}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)}var draw = () => {if (!Detector.webgl) Detector.addGetWebGLMessage()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…...

编程日记 2024/11/26 6:51:30

Hive构建日搜索引擎日志数据分析系统

1.数据预处理 根据自己或者学校系统预制的数据 使用less sogou.txt可查看 wc -l sogou.txt 能够查看总行数 2.数据扩展部分 我的数据位置存放在 /data/bigfiles 点击q退出 将一个文件的内容传递到另一个目录文件下 原数据在 /data/bigfiles ->传递 到/data/workspac…...

编程日记 2024/11/26 6:46:25

Vue 3 defineModel: 简化组件的双向绑定

1. 引言 在 Vue 3.4 版本中,引入了一个新的组合式 API 函数 defineModel。这个函数大大简化了自定义组件中实现 v-model 的过程,使得创建具有双向绑定功能的组件变得更加直观和简洁。 © ivwdcwso (ID: u012172506) 2. defineModel 的基本概念 defineModel 是一个宏,它简…...

编程日记 2024/11/26 6:41:20

【Flutter】搭建Flutter开发环境，安卓开发

Flutter是谷歌开源的一个跨平台开发的框架&#xff0c;方便好用&#xff0c;这里以Windows 上构建 Flutter Android 应用为例&#xff0c;记录下我搭建环境时碰到的一些问题以及解决。 第一步&#xff1a;参考官网&#xff1a;开发 Android 应用 | Flutter 中文文档 - Flutter …...

编程日记 2024/11/26 6:40:20

Linux中的共享内存

在Linux中&#xff0c;共享内存是一种高效的进程间通信&#xff08;IPC&#xff09;机制&#xff0c;允许多个进程共享一块内存区域&#xff0c;从而实现数据的快速传递和共享。它的特点是可以直接访问共享的内存&#xff0c;无需额外的拷贝操作&#xff0c;因此速度非常快。 共…...

编程日记 2024/11/26 6:39:18

SpringBoot中忽略实体类中的某个属性不返回给前端的方法

使用Jackson的方式&#xff1a; //第一种方式&#xff0c;使用JsonIgnore注解标注在属性上&#xff0c;忽略指定属性 public class PropertyDTO {JsonProperty("disable")private Integer disable;JsonProperty("placeholder")private String placeholde…...

编程日记 2024/11/26 6:38:17

ubuntu 安装proxychains

在Ubuntu上安装Proxychains&#xff0c;你可以按照以下步骤操作&#xff1a; 1、更新列表 sudo apt-update 2、安装Proxychains sudo apt-get install proxychains 3、安装完成后&#xff0c;你可以通过编辑/etc/proxychains.conf文件来配置代理规则 以下是一个简单的配置示例&…...

编程日记 2024/11/26 6:36:15

pytorch四种单机多卡分布式训练方法

文章目录 1、原生pytorch&#xff08;mp.spawn)2、pytorch ddp (torchrun)3、lightning fabric4、Hugging Face Accelerate4、总结与对比4.1 mp.spawn4.2 torchrun4.3 Lightning Fabric4.4 Hugging face accelerate pytorch 分布式训练的四种方法。 我将会产生一份伪数据0到19共…...

编程日记 2024/11/26 6:35:14

archlinux 触摸板手势配置

文章目录 [toc]libinput-gestures安装 libinput-gestures加入 input 组创建配置文件可用手势 启动 libinput-gestures停止 libinput-gestures自启动 libinput-gestures Touchpad Synapticssynaptics.4 在 /etc/X11/xorg.conf.d/ 目录下会有默认的触摸板配置文件&#xff0c;如果…...

编程日记 2024/11/26 6:33:12

djinn:1 靶场学习小记

一、测试环境&#xff1a; kail攻击机&#xff1a;Get Kali | Kali Linux 靶场镜像&#xff1a;https://download.vulnhub.com/djinn/djinn.ova 描述&#xff1a; 该机器与 VirtualBox 和 VMWare 兼容。DHCP 将自动分配一个 IP。您将在登录屏幕上看到 IP。您必须找到并读取分…...

编程日记 2024/11/26 6:31:10

kafka消费者组和分区数之间的关系是怎样的？

消费者组和分区数之间的关系决定了Kafka中消息的消费方式和负载均衡。合理配置分区数和消费者数量对于优化Kafka的性能和资源利用率至关重要。以下是这种关系的几个关键点&#xff1a; 一个分区只能被同一组的一个消费者消费&#xff1a;这是为了保证消息的顺序性。在同一个消费…...

编程日记 2024/11/26 6:30:09

【go】查询某个依赖是否存在于这个代理

1. 使用 go list 命令 go list -m -versions github.com/gin-gonic/gin 如果模块存在&#xff0c;该命令会返回模块及其可用版本&#xff1a; github.com/gin-gonic/gin v1.7.0 v1.7.1 v1.8.0如果模块不存在或无法找到&#xff0c;会返回错误。 2. 使用 curl 查询代理服务 …...

编程日记 2024/11/26 6:29:08

如何从postman中导出所有集合Collection

项目场景&#xff1a; 有时候需要备份或迁移到其他平台&#xff0c;我们需要在postman中将这些集合数据导出。导出 Postman 集合是为了备份、团队共享或平台迁移等目的的重要步骤。此过程可分为导出单个集合和批量导出所有集合两部分&#xff0c;确保已保存和更新集合后&#x…...

编程日记 2024/11/26 6:28:06

在 Spring Boot 中实现多种方式登录（用户名、手机号、邮箱等）的不正经指南

欢迎来到一场技术与幽默交织的冒险&#xff01;今天&#xff0c;我们将跳进 Spring Boot 的世界&#xff0c;探索如何通过 用户名、手机号、邮箱 等多种方式实现登录。想象一下&#xff0c;用户在登录时可以随心所欲地选择——就像你今天早上纠结到底是要喝美式咖啡还是拿铁&am…...

编程日记 2024/11/26 6:27:05

.NET平台用C#添加动作到PDF文档

使用C#语言在.NET框架下向PDF文档中添加动作&#xff0c;不仅能够提升文档的交互性和用户体验&#xff0c;还能够在自动化工作流中发挥关键作用&#xff0c;例如自动跳转至特定页面、链接外部资源或播放音频资源等操作。这种能力使得开发者能够根据具体需求定制PDF文档的互动操…...

编程日记 2024/11/26 6:26:04

大数据治理：概念、框架与实践应用

摘要： 随着大数据时代的到来，数据量呈爆炸式增长，数据来源和类型日益多样化。大数据治理作为确保数据质量、安全性、合规性以及有效利用数据资产的关键领域，已成为企业和组织在数字化转型过程中面临的重要挑战和机遇。本文深入探讨了大数据治理的概念，详细阐述了其涵盖的主…...

编程日记 2024/11/26 6:25:04

Vue.observable 全解析：Observable 是什么及使用场景剖析

Vue.observable 详解 Vue.observable 是 Vue 2.x 中的一个 API，用于将普通对象转化为响应式对象，类似于 Vue 组件中的 data 对象，可以实现数据的双向绑定。它允许你将任何普通对象转化为 Vue 响应式系统管理的对象，使得该对象的属性变化时能够自动触发视图更新。 什么是 …...

编程日记 2024/11/26 6:24:01

MySQL基础知识大总结

一&#xff0c;介绍 数据库是什么&#xff0c;我们在学习其他编程语言的时候会使用数组呀&#xff0c;链表&#xff0c;二叉树等等一些数据结构来存储我们的数据&#xff0c;但是大家有没有发现我们一旦关闭程序&#xff0c;所有的数据都没有了&#xff0c;这在发行的软件来看是…...

编程日记 2024/11/26 6:22:59

池化技术、Commons Pool介绍

概述 池化技术&#xff0c;一种通过重复利用对象实例而非频繁创建和销毁的技术。 常见的可池化对象&#xff1a; 数据库连接(Connection)&#xff1a;数据库连接创建和销毁代价高&#xff0c;连接池广泛用于管理JDBC连接&#xff1b;线程(Thread)&#xff1a;线程的创建和销…...

编程日记 2024/11/26 6:19:53

下载并安装Visual Studio 2017过程

一、下载 1、下载链接 下载链接&#xff1a;官方网址 先登录 往下滑找到较早的下载 2、进行搜索下载 或者直接点击&#x1f517;网站跳转 3、确认系统信息进行下载 二、安装 下载完成后右键使用管理员身份运行 1、点击同意后安装 2、若报错—设置失败 打开控制面板-&g…...

编程日记 2024/11/26 6:18:51

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/10/30 20:34:49

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/4 20:04:49

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/1 23:39:16

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/11/2 8:55:38

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/10/27 7:19:52

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/10/28 19:50:22

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/11/2 18:21:56

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...

编程新知 2025/11/5 3:40:54

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/9/29 3:08:51