基于webgl_threejs技术的3D模型测量入门
发布时间: 2024-01-11 02:55:12 阅读量: 115 订阅数: 27 
# 1. 理解WebGL和Three.js
## 1.1 什么是WebGL
WebGL是一种基于Web的图形渲染技术，它使用JavaScript API在浏览器中实现硬件加速的3D图形渲染。WebGL允许开发者在Web应用程序中创建高性能的交互式3D图形，而无需使用专门的插件或扩展。
WebGL的核心是OpenGL ES（OpenGL for Embedded Systems）标准，它是一种广泛用于嵌入式系统和移动设备的图形渲染API。通过将OpenGL ES嵌入到Web浏览器中，WebGL可以让开发者使用JavaScript来编写高性能的3D图形应用。
## 1.2 Three.js简介
Three.js是一个流行的用于创建和展示WebGL图形的JavaScript库。它为开发者提供了简化WebGL编程的接口和工具，使得创建复杂的3D场景变得更加容易。
Three.js提供了丰富的功能，包括几何体的创建、灯光设置、材质贴图、动画效果等。它还支持加载和渲染多种模型格式，如OBJ、Collada、glTF等。通过使用Three.js，开发者可以快速构建出精美的3D场景，为用户提供更加沉浸式的体验。
## 1.3 WebGL和Three.js在3D模型测量中的应用
WebGL和Three.js不仅仅可以用于创建酷炫的3D动画和游戏，它们也在3D模型测量中发挥着重要的作用。在工程、建筑、医学等领域，准确测量3D模型的尺寸和形状是非常重要的。
使用WebGL和Three.js，开发者可以创建交互式的测量工具，通过鼠标点击或拖动测量3D模型中的距离、角度、体积等参数。这些测量工具可以帮助用户进行精确的模型分析和设计评估，提高工作效率和准确性。
总结：WebGL是一种基于Web的图形渲染技术，而Three.js是一个方便开发者使用WebGL的JavaScript库。它们在3D模型测量中的应用可以帮助开发者实现交互式的测量工具，提高工作效率和准确性。
# 2. 搭建基础环境
### 2.1 安装Three.js
在开始使用Three.js之前，我们需要先安装它。安装Three.js非常简单，只需要将相关的库文件下载并引入到HTML文件中即可。
首先，你可以在[Three.js官方网站](https://threejs.org/)上下载最新版本的库文件。选择适合你项目的版本，通常可以选择压缩版本。
然后，在HTML文件中引入所需的库文件。你可以将以下代码插入到`<head>`标签内：
```html
<script src="js/three.min.js"></script>
```
其中，`js/three.min.js`是你下载的Three.js库文件所在的路径。
### 2.2 创建一个简单的3D场景
现在，我们来创建一个简单的3D场景，并在其中添加一个立方体模型。
首先，在HTML文件中添加一个`<div>`元素作为渲染区域：
```html
<div id="canvas"></div>
```
接下来，在JS文件中创建一个场景、相机和渲染器，并将渲染器的输出添加到页面上的`<div>`元素中：
```javascript
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的输出添加到页面上的canvas元素中
const canvas = document.getElementById("canvas");
canvas.appendChild(renderer.domElement);
```
现在，我们已经创建了一个简单的3D场景，并在页面上显示出来了。
### 2.3 导入模型文件
在Three.js中，可以通过加载模型文件的方式来添加外部的3D模型到场景中。
例如，我们可以使用`GLTFLoader`来加载glTF格式的模型文件。首先，需要将`GLTFLoader.js`文件引入到HTML文件中：
```html
<script src="js/GLTFLoader.js"></script>
```
然后，在JS文件中加载模型文件并添加到场景中：
```javascript
// 创建一个模型加载器
const loader = new THREE.GLTFLoader();
// 加载模型文件
loader.load('models/model.gltf', function (gltf) {
// 获取模型对象
const model = gltf.scene;
// 将模型对象添加到场景中
scene.add(model);
// 渲染场景
renderer.render(scene, camera);
});
```
这样，我们就成功地将模型文件加载到了场景中，并在页面上显示出来了。
通过这样的方式，我们可以搭建起基础的Three.js环境，并将外部的3D模型添加到场景中。接下来，我们将在第三章中实现测量工具的功能。
# 3. 测量工具的实现
### 3.1 了解测量工具的需求
在实现测量工具之前，我们首先需要确定测量工具的需求。在一个3D场景中，我们希望能够通过测量工具来获取物体的尺寸、距离、角度等信息。基本的需求如下：
- 点测量：用户可以点击场景中的任意两个点，测量它们之间的距离。
- 线测量：用户可以在场景中绘制一条直线，测量线的长度。
- 面积测量：用户可以选择一个闭合的面，测量面的面积。
- 垂直角测量：用户可以点击两条线，测量它们之间的垂直角度。
### 3.2 创建可交互的测量工具
为了实现测量功能，我们需要创建一个可交互的测量工具。首先，我们需要为场景添加一个测量工具的操作界面，用户可以通过该界面进行测量操作。下面是创建操作界面的代码实现：
```javascript
// 创建测量工具的操作界面
function createMeasureControls() {
// 创建测量工具容器
var measureContainer = document.createElement('div');
measureContainer.id = 'measure-container';
document.body.appendChild(measureContainer);
// 创建测量按钮
var measureButton = document.createElement('button');
measureButton.innerHTML = '开始测量';
measureButton.addEventListener('click', function() {
startMeasure();
});
measureContainer.appendChild(measureButton);
// 创建清除按钮
var clearButton = document.createElement('button');
clearButton.innerHTML = '清除测量';
clearButton.addEventListener('click', function() {
clearMeasure();
});
measureContainer.appendChild(clearButton);
}
```
上述代码中，我们创建了一个`measureContainer`作为测量工具的容器，并在其中创建了一个`measureButton`和一个`clearButton`分别用于开始测量和清除测量结果的操作。
接下来，我们需要实现鼠标点击事件来选择测量点。下面是实现鼠标点击事件的代码：
```javascript
// 监听场景的鼠标点击事件
function listenMouseClick() {
document.addEventListener('mousedown', onMouseDown, false);
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('mouseup', onMouseUp, false);
}
// 鼠标点击事件处理函数
function onMouseDown(event) {
// 记录鼠标点击的坐标
var mouseLocation = getMouseLocation(event.clientX, event.clientY);
// 根据鼠标点击坐标在场景中找到最近的物体
var intersect = getIntersect(mouseLocation);
// 如果找到了物体，则将其存储为一个测量点
if (intersect) {
addMeasurePoint(intersect.point);
}
}
// 鼠标移动事件处理函数
function onMouseMove(event) {
// 更新当前鼠标位置
var mouseLocation = getMouseLocation(event.clientX, event.clientY);
// 如果正在测量，更新尺寸信息
if (isMeasuring) {
updateMeasureSize(mouseLocation);
}
}
// 鼠标松开事件处理函数
function onMouseUp(event) {
// 如果当前在测量中，结束测量
if (isMeasuring) {
endMeasure();
}
}
```
在上述代码中，我们通过`mousedown`事件处理函数来记录鼠标点击的坐标，并根据坐标在场景中找到最近的物体。然后，我们通过`mousemove`事件处理函数来更新测量尺寸信息。最后，我们通过`mouseup`事件处理函数来结束测量。
### 3.3 实现基本的测量功能
在了解了测量工具的需求和创建了可交互的测量工具之后，接下来我们需要实现基本的测量功能。下面是实现基本测量功能的代码：
```javascript
// 开始测量
function startMeasure() {
// 初始化测量数据
measureData = {
points: [], // 测量点数组
lines: [], // 测量线数组
areas: [], // 测量面数组
angles: [] // 测量角度数组
};
// 标记测量开始
isMeasuring = true;
}
// 添加测量点
function addMeasurePoint(position) {
// 创建测量点网格
var pointGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var pointMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
pointMesh.position.copy(position);
scene.add(pointMesh);
// 将测量点添加到测量数据中
measureData.points.push(pointMesh);
}
// 更新测量尺寸信息
function updateMeasureSize(mouseLocation) {
// 如果没有选定起点，则返回
if (!measureData.startPoint) return;
// 根据鼠标位置计算当前尺寸
var startPoint = measureData.startPoint;
var currentPoint = {
x: mouseLocation.x,
y: mouseLocation.y,
z: mouseLocation.z
};
var distance = calculateDistance(startPoint, currentPoint);
// 如果正在测量直线，则更新直线长度
if (isMeasuringLine) {
// 更新直线长度
var line = measureData.lines[measureData.lines.length - 1];
line.length = distance;
line.label.innerHTML = 'Length: ' + distance.toFixed(2) + 'cm';
}
}
// 结束测量
function endMeasure() {
// 如果没有选定起点，则返回
if (!measureData.startPoint) return;
// 如果正在测量直线，则结束直线测量
if (isMeasuringLine) {
// 标记测量结束
isMeasuring = false;
// 清除起点标记
measureData.startPoint.material.color.set(0xff0000);
measureData.startPoint = null;
// 标记直线测量结束
isMeasuringLine = false;
}
}
// 清除测量结果
function clearMeasure() {
// 移除测量点
measureData.points.forEach(function(point) {
scene.remove(point);
});
// 清空测量数据
measureData = {};
// 标记测量结束
isMeasuring = false;
}
```
上述代码中，我们定义了一系列函数来实现测量功能。`startMeasure`函数用于初始化测量数据并标记测量开始，`addMeasurePoint`函数用于在场景中添加测量点，`updateMeasureSize`函数用于根据鼠标位置实时更新测量尺寸信息，`endMeasure`函数用于结束测量，`clearMeasure`函数用于清除测量结果。
接下来，我们需要在场景中添加一些物体来进行测量。可以使用Three.js提供的基本几何体，例如立方体、球体等。下面是添加物体的代码示例：
```javascript
// 创建立方体
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cubeMesh);
// 创建球体
var sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphereMesh.position.set(2, 0, 0);
scene.add(sphereMesh);
```
上述代码中，我们分别创建了一个立方体和一个球体，并将它们添加到场景中。
最后，在浏览器中渲染场景，我们就可以使用测量工具进行测量了。下面是渲染场景的代码示例：
```javascript
// 渲染场景
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
// 调用渲染函数开始渲染场景
render();
```
以上就是基本的测量功能的实现方法。通过以上代码，我们可以在Three.js中实现一个简单的测量工具，用于测量物体的尺寸、距离、角度等信息。
**代码总结：**
- 我们通过创建测量工具的操作界面，为用户提供了开始测量和清除测量结果的操作按钮。
- 监听鼠标点击事件，通过记录鼠标点击的坐标和在场景中找到最近的物体，并将其存储为一个测量点。
- 通过鼠标移动事件实时更新测量尺寸信息，用于测量直线的长度。
- 在结束测量时，清除测量点和测量数据。
- 通过添加物体来进行测量，例如立方体和球体。
- 渲染场景，开始使用测量工具进行测量。
# 4. 增强测量功能
在本章中，我们将介绍如何增强测量工具的功能，包括添加多种测量单位、实现角度和体积测量等。我们还将讨论如何提高精度和准确性，使测量工具更加实用和全面。
### 4.1 添加多种测量单位
当我们进行测量时，除了默认的长度单位外，有时还需要考虑到不同的测量标准。因此，在测量工具中，我们可以添加支持多种测量单位的功能，比如厘米、英寸、米等。我们可以通过下拉菜单或者按钮切换不同的测量单位，方便用户根据实际需求进行测量。
```javascript
function switchUnit(unit) {
switch (unit) {
case 'cm':
// 切换为厘米单位
break;
case 'inch':
// 切换为英寸单位
break;
case 'm':
// 切换为米单位
break;
default:
// 默认为米单位
}
}
```
### 4.2 实现角度和体积测量
除了长度测量，有时我们也需要测量物体之间的角度或者体积。在测量工具中，我们可以新增角度测量和体积测量的功能，通过用户交互和选择物体点位来计算角度和体积信息，并在界面上进行展示。
```javascript
function measureAngle(pointA, pointB, pointC) {
// 根据三个点的坐标计算夹角
// 返回角度值
}
function measureVolume(geometry) {
// 根据几何体计算体积
// 返回体积值
}
```
### 4.3 提高精度和准确性
在测量工具中，精度和准确性是非常重要的指标。为了提高测量结果的精度和准确性，我们可以采用以下方法：
- 使用更精细的网格和坐标系统
- 利用数值计算方法优化测量算法
- 增加用户交互和校准功能，提高使用者参与度
通过不断优化精度和准确性，可以使测量工具更加可靠和实用。
在接下来的章节中，我们将继续讨论如何设计用户友好的界面，优化交互细节，并进行性能优化与移动端适配。希望这些内容能够帮助您更好地实现一个全功能的测量工具。
# 5. 界面优化与交互设计
在本章中，我们将讨论如何通过优化界面设计和增强交互效果来提升用户体验。一个好的测量工具不仅需要功能强大，还需要界面友好、交互便利。
### 5.1 设计用户友好的界面
用户界面设计是测量工具的重要组成部分。我们需要确保界面布局合理，按钮功能清晰易懂。同时，色彩搭配和字体选择也需要符合用户的审美和习惯，这样能够提升用户体验。
```java
// 代码示例：创建一个简单的界面
Button measureButton = new Button("开始测量");
Dropdown unitDropdown = new Dropdown();
unitDropdown.addOptions("厘米", "米", "英寸");
Textbox resultTextbox = new Textbox();
Label resultLabel = new Label("测量结果：");
// 将组件添加到界面布局中
Layout layout = new Layout();
layout.add(measureButton);
layout.add(unitDropdown);
layout.add(resultLabel);
layout.add(resultTextbox);
```
### 5.2 交互细节的优化
除了界面设计，交互细节也是至关重要的。例如，鼠标悬停在测量点上时显示详细信息，拖动模型时实时更新测量结果等等，这些细节都能够让用户感受到产品的贴心与用心。
```java
// 代码示例：添加鼠标悬停交互效果
measurePoint.setOnMouseHover(() -> {
showTooltip(measurePoint.tooltipText);
});
```
### 5.3 用户反馈与提示设计
用户反馈和提示是用户使用过程中的重要环节。当用户进行测量时，需要即时展示测量结果，并给予清晰的提示信息，以便用户能够准确地使用测量工具。
```java
// 代码示例：实现测量结果的实时展示
measureButton.onClick(() -> {
MeasurementResult result = performMeasurement();
resultTextbox.setText(result.getValue() + unitDropdown.getSelectedUnit());
});
```
通过以上界面优化与交互设计，我们能够提升测量工具的易用性和用户体验，让用户能够更加便捷和舒适地使用测量工具。
# 6. 性能优化与移动端适配
在本章中，我们将讨论如何对我们的WebGL和Three.js应用进行性能优化，并且适配移动端设备。这将包括一系列的技术策略，以确保应用在不同设备上都能够流畅运行，并且保持良好的用户体验。
#### 6.1 优化渲染性能
为了提高渲染的性能，我们需要关注以下几个方面：
- **减少绘制调用：** 避免在每帧中重复渲染相同的物体，优化渲染顺序以及使用合并几何体等技术。
- **使用WebGL着色器：** 通过定制着色器来执行一些复杂的计算，以减轻渲染引擎的压力。
- **LOD（细节层次）：** 实现LOD技术，根据对象与相机的距离，选择不同细节级别的模型。
下面是一个简单的性能优化示例代码：
```javascript
// 减少绘制调用的示例
function animate() {
requestAnimationFrame(animate);
// 渲染代码
}
// 使用WebGL着色器的示例
const customShaderMaterial = new THREE.ShaderMaterial({
uniforms: {
// 自定义uniform变量
},
vertexShader: `
// 自定义顶点着色器代码
`,
fragmentShader: `
// 自定义片元着色器代码
`,
});
// LOD示例
const geometry = new THREE.LOD();
geometry.addLevel( meshHighDetail, distance );
geometry.addLevel( meshLowDetail, distance * 2 );
```
#### 6.2 移动端适配策略
对于移动端适配，我们需要考虑以下内容：
- **响应式设计：** 使用媒体查询和弹性布局，以适配不同尺寸的移动设备屏幕。
- **触摸交互：** 调整交互方式，例如使用触摸手势替代鼠标操作，以提供更好的用户体验。
- **性能优化：** 进行性能测试和优化，确保应用在移动设备上能够稳定运行。
以下是一个简单的移动端适配示例代码：
```javascript
// 基于屏幕尺寸的响应式设计
@media only screen and (max-device-width: 768px) {
// 移动设备样式
}
// 触摸交互示例
const touchControls = new THREE.OrbitControls(camera, renderer.domElement);
touchControls.enableDamping = true;
touchControls.dampingFactor = 0.25;
touchControls.screenSpacePanning = false;
```
#### 6.3 兼容性与性能测试
最后，我们需要进行兼容性测试，确保我们的应用能够在不同设备和不同浏览器上正常运行。同时，进行性能测试可以帮助我们找出并解决可能存在的性能瓶颈，从而进一步优化我们的应用。
在进行兼容性与性能测试时，我们可以使用一些工具例如Chrome开发者工具的性能面板，以及一些第三方的性能测试工具，来评估我们应用的性能表现。
通过以上的性能优化和移动端适配策略的实施，我们可以使我们的WebGL和Three.js应用在不同的设备上都能够获得良好的性能和用户体验。
希望这些内容能够帮助到你！
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
0
0
相关推荐
专栏简介
本专栏基于webgl/threejs技术，以模型测量为项目实战，涵盖多个相关主题。其中的文章包括：基于webgl/threejs技术的3D模型测量入门，使用three.js创建自定义3D模型，理解WebGL 3D图形渲染基础，three.js中的视图和相机控制技术，模型测量中的场景构建与渲染，基于three.js的3D模型交互设计，three.js中的光照与材质技术详解，使用Shader在three.js中进行定制化的渲染，three.js中模型坐标系的转换与操作，用WebGL实现3D模型的加载和显示技术，three.js中的虚拟现实（VR）技术应用，three.js中的动画设计与实现，基于three.js的3D空间测量算法实现，WebGL中的缓冲区对象优化技术，使用Three.js进行3D模型的碰撞检测，基于three.js的虚拟现实用户交互技术，three.js中的场景导航与控制技术，three.js中的文本和标注技术应用，以及基于webgl的数据可视化与多维度参数测量。通过这些文章，读者将获得有关使用webgl/threejs技术进行模型测量的全面指导和实践经验，学习如何构建、渲染、交互和设计3D模型，并了解各种技术和算法的详细解释与应用案例。
专栏目录
最低0.47元/天 解锁专栏
买1年送3月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
最新推荐
【统计学意义的验证集】：理解验证集在机器学习模型选择与评估中的重要性
# 1. 验证集的概念与作用
在机器学习和统计学中，验证集是用来评估模型性能和选择超参数的重要工具。**验证集**是在训练集之外的一个独立数据集，通过对这个数据集的预测结果来估计模型在未见数据上的表现，从而避免了过拟合问题。验证集的作用不仅仅在于选择最佳模型，还能帮助我们理解模型在实际应用中的泛化能力，是开发高质量预测模型不可或缺的一部分。
```markdown
## 1.1 验证集与训练集、测试集的区
自然语言处理中的独热编码：应用技巧与优化方法
# 1. 自然语言处理与独热编码概述
自然语言处理（NLP）是计算机科学与人工智能领域中的一个关键分支，它让计算机能够理解、解释和操作人类语言。为了将自然语言数据有效转换为机器可处理的形式，独热编码（One-Hot Encoding）成为一种广泛应用的技术。
## 1.1 NLP中的数据表示
在NLP中，数据通常是以文本形式出现的。为了将这些文本数据转换为适合机器学习模型的格式，我们需要将单词、短语或句子等元
测试集在兼容性测试中的应用：确保软件在各种环境下的表现
# 1. 兼容性测试的概念和重要性
## 1.1 兼容性测试概述
兼容性测试确保软件产品能够在不同环境、平台和设备中正常运行。这一过程涉及验证软件在不同操作系统、浏览器、硬件配置和移动设备上的表现。
## 1.2 兼容性测试的重要性
在多样的IT环境中，兼容性测试是提高用户体验的关键。它减少了因环境差异导致的问题，有助于维护软件的稳定性和可靠性，降低后
过拟合的统计检验：如何量化模型的泛化能力
# 1. 过拟合的概念与影响
## 1.1 过拟合的定义
过拟合(overfitting)是机器学习领域中一个关键问题，当模型对训练数据的拟合程度过高，以至于捕捉到了数据中的噪声和异常值，导致模型泛化能力下降，无法很好地预测新的、未见过的数据。这种情况下的模型性能在训练数据上表现优异，但在新的数据集上却表现不佳。
## 1.2 过拟合产生的原因
过拟合的产生通常与模
【特征工程稀缺技巧】：标签平滑与标签编码的比较及选择指南
# 1. 特征工程简介
## 1.1 特征工程的基本概念
特征工程是机器学习中一个核心的步骤，它涉及从原始数据中选取、构造或转换出有助于模型学习的特征。优秀的特征工程能够显著提升模型性能，降低过拟合风险，并有助于在有限的数据集上提炼出有意义的信号。
## 1.2 特征工程的重要性
在数据驱动的机器学习项目中，特征工程的重要性仅次于数据收集。数据预处理、特征选择、特征转换等环节都直接影响模型训练的效率和效果。特征工程通过提高特征与目标变量的关联性来提升模型的预测准确性。
## 1.3 特征工程的工作流程
特征工程通常包括以下步骤：
- 数据探索与分析，理解数据的分布和特征间的关系。
- 特
【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征
# 1. 交互特征在分类问题中的重要性
在当今的机器学习领域，分类问题一直占据着核心地位。理解并有效利用数据中的交互特征对于提高分类模型的性能至关重要。本章将介绍交互特征在分类问题中的基础重要性，以及为什么它们在现代数据科学中变得越来越不可或缺。
## 1.1 交互特征在模型性能中的作用
交互特征能够捕捉到数据中的非线性关系，这对于模型理解和预测复杂模式至关重要。例如
【时间序列分析】：如何在金融数据中提取关键特征以提升预测准确性
# 1. 时间序列分析基础
在数据分析和金融预测中，时间序列分析是一种关键的工具。时间序列是按时间顺序排列的数据点，可以反映出某
探索性数据分析：训练集构建中的可视化工具和技巧
# 1. 探索性数据分析简介
在数据分析的世界中，探索性数据分析（Exploratory Dat
【PCA算法优化】：减少计算复杂度，提升处理速度的关键技术
# 1. PCA算法简介及原理
## 1.1 PCA算法定义
主成分分析（PCA）是一种数学技术，它使用正交变换来将一组可能相关的变量转换成一组线性不相关的变量，这些新变量被称为主成分。
## 1.2 应用场景概述
PCA广泛应用于图像处理、降维、模式识别和数据压缩等领域。它通过减少数据的维度，帮助去除冗余信息，同时尽可能保
【特征选择工具箱】：R语言中的特征选择库全面解析
# 1. 特征选择在机器学习中的重要性
在机器学习和数据分析的实践中，数据集往往包含大量的特征，而这些特征对于最终模型的性能有着直接的影响。特征选择就是从原始特征中挑选出最有用的特征，以提升模型的预测能力和可解释性，同时减少计算资源的消耗。特征选择不仅能够帮助我
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
专栏目录
最低0.47元/天 解锁专栏
买1年送3月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )