Three.js相机类型与应用详解（ 这介详解是根据我自己的代码来的）

原创 于 2025-10-20 09:47:16 发布 · 839 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#数码相机 #javascript #webgl #前端

Three.js 相机完整指南 - 修正版

1. 相机基础概念

相机决定了场景如何被渲染到屏幕上，相当于观察者的"眼睛"。在 Three.js 中，相机主要分为两种类型：透视相机和正交相机。

2. 两种主要相机类型

2.1 透视相机 (PerspectiveCamera)

const camera = new THREE.PerspectiveCamera(
  75, // 视野角度 (FOV)
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  100  // 远平面
);

特点：

  • 模拟人眼视觉，有"近大远小"的效果
  • 参数直观，适合大多数3D场景
  • 更符合真实世界的视觉感受

2.2 正交相机 (OrthographicCamera)

const aspect = window.innerWidth / window.innerHeight;
const d = 3;

const camera = new THREE.OrthographicCamera(
  -d * aspect, // 左边界
  d * aspect,  // 右边界
  d,           // 上边界
  -d,          // 下边界
  0.1,         // 近平面
  100          // 远平面
);

特点：

  • 无透视效果，物体大小不随距离改变
  • 保持物体的实际尺寸比例
  • 常用于工程制图、2.5D游戏、UI界面等

3. 相机的重要属性和方法

3.1 基本属性设置

// 设置相机位置
camera.position.set(4, 2, 5);

// 让相机看向某个点
camera.lookAt(0, 0, 0);

// 相机的缩放（两种相机都有效）
camera.zoom = 1;

3.2 投影矩阵更新

// 当修改相机参数后必须调用
camera.updateProjectionMatrix();

3.3 窗口大小调整处理

window.addEventListener("resize", () => {
  // 透视相机的更新方式
  camera.aspect = window.innerWidth / window.innerHeight;
  
  // 或者正交相机的更新方式
  const aspect = window.innerWidth / window.innerHeight;
  const d = 3;
  camera.left = -d * aspect;
  camera.right = d * aspect;
  camera.top = d;
  camera.bottom = -d;
  
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

4. camera.zoom 详解

4.1 基本概念

camera.zoom 是一个数值，用于控制相机的缩放级别：

  • 默认值：1（无缩放）
  • 大于1：放大效果（如 2 表示2倍放大）
  • 小于1：缩小效果（如 0.5 表示缩小到一半）

重要更正：camera.zoom 在两种相机中都有效！

4.2 在不同相机类型中的行为

正交相机 (OrthographicCamera)：

camera.zoom = 2; // 2倍放大
camera.updateProjectionMatrix(); // 必须调用！

效果：

  • zoom = 2：视锥体缩小一半，场景看起来放大2倍
  • zoom = 0.5：视锥体扩大一倍，场景看起来缩小一半

透视相机 (PerspectiveCamera)：

camera.zoom = 1.5; // 1.5倍放大
camera.updateProjectionMatrix(); // 必须调用！

效果：

  • 通过调整投影矩阵实现缩放效果
  • 保持透视关系不变
  • 相当于改变视野范围，但不改变实际FOV值

4.3 重要注意事项

必须调用 updateProjectionMatrix()：

// ❌ 错误：修改zoom后不更新
camera.zoom = 2;

// ✅ 正确：修改zoom后必须更新投影矩阵
camera.zoom = 2;
camera.updateProjectionMatrix();

4.4 与 OrbitControls 的配合

OrbitControls 会自动管理相机的 zoom：

orbitControls = new OrbitControls(camera, renderer.domElement);

// 可以设置zoom的限制
orbitControls.minZoom = 0.5;   // 最小缩放
orbitControls.maxZoom = 3;     // 最大缩放

// 启用或禁用缩放
orbitControls.enableZoom = true; // 默认true

5. 相机动画

5.1 基础动画原理

相机动画通过不断更新相机的位置、旋转或其他属性来实现：

function animate() {
  const time = clock.getElapsedTime();
  
  // 相机绕Y轴旋转
  camera.position.x = Math.sin(time) * 5;
  camera.position.z = Math.cos(time) * 5;
  camera.lookAt(0, 0, 0);
  
  // 更新投影矩阵（如果修改了zoom等属性）
  camera.updateProjectionMatrix();
  
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

5.2 平滑动画技术

使用 GSAP 库实现平滑动画：

import gsap from 'gsap';

// 相机移动到新位置
function moveCameraTo(position, target, duration = 1) {
  gsap.to(camera.position, {
    x: position.x,
    y: position.y,
    z: position.z,
    duration: duration,
    ease: "power2.inOut"
  });
  
  gsap.to(camera, {
    lookAt: target,
    duration: duration,
    ease: "power2.inOut",
    onUpdate: () => {
      camera.lookAt(target.x, target.y, target.z);
    }
  });
}

// 使用示例
moveCameraTo(
  { x: 10, y: 5, z: 8 },
  { x: 0, y: 0, z: 0 }
);

程序化缩放动画：

function zoomIn() {
  gsap.to(camera, {
    zoom: 2,
    duration: 1,
    onUpdate: () => camera.updateProjectionMatrix()
  });
}

function zoomOut() {
  gsap.to(camera, {
    zoom: 1,
    duration: 1,
    onUpdate: () => camera.updateProjectionMatrix()
  });
}

5.3 相机路径动画

使用曲线定义相机路径：

// 创建相机运动路径
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(10, 5, 10),
  new THREE.Vector3(5, 8, -5),
  new THREE.Vector3(-5, 3, 0),
  new THREE.Vector3(0, 5, 10)
]);

function animateCameraAlongPath() {
  const time = clock.getElapsedTime();
  const t = (time * 0.1) % 1; // 循环动画
  
  // 获取路径上的点
  const position = curve.getPoint(t);
  camera.position.copy(position);
  
  // 让相机看向路径上的下一个点，创造平滑的朝向
  const lookAtT = (t + 0.01) % 1;
  const lookAtPoint = curve.getPoint(lookAtT);
  camera.lookAt(lookAtPoint);
}

5.4 重要注意事项：与 OrbitControls 的冲突

当使用程序化相机动画时，需要特别注意与 OrbitControls 的冲突：

// ❌ 错误做法：同时使用程序化动画和OrbitControls
function animate() {
  // 程序化改变相机lookAt
  camera.lookAt(movingTarget);
  
  // OrbitControls也在控制相机
  orbitControls.update();
  
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

// ✅ 正确做法1：在程序化动画期间禁用OrbitControls
function animateCameraToTarget(target) {
  // 禁用控制器
  orbitControls.enabled = false;
  
  // 执行相机动画
  gsap.to(camera.position, {
    x: target.x,
    y: target.y,
    z: target.z,
    duration: 1,
    onComplete: () => {
      // 动画完成后重新启用控制器
      orbitControls.enabled = true;
    }
  });
}

// ✅ 正确做法2：修改OrbitControls的target而不是直接修改相机
function changeOrbitControlsTarget(newTarget) {
  orbitControls.target.set(newTarget.x, newTarget.y, newTarget.z);
  orbitControls.update();
}

// ✅ 正确做法3：完全分离控制模式
let cameraMode = 'auto'; // 'auto' 或 'manual'

function toggleCameraMode() {
  if (cameraMode === 'auto') {
    // 自动模式：禁用OrbitControls，启用程序化动画
    orbitControls.enabled = false;
    startCameraAnimation();
  } else {
    // 手动模式：启用OrbitControls，停止程序化动画
    orbitControls.enabled = true;
    stopCameraAnimation();
  }
}

关键点：当 lookAt 的值改变时，应该临时禁用 OrbitControls！

6. Z-Fighting 问题详解

6.1 什么是 Z-Fighting？

Z-Fighting（深度冲突）是指当两个或多个表面在深度缓冲区（Z-Buffer）中具有相同或非常接近的深度值时，出现的闪烁或交替显示的现象。

6.2 产生原因

  1. 深度缓冲区精度有限：深度缓冲区使用有限精度（通常是24位或32位浮点数）
  2. 共面或近平面的几何体：当两个面距离非常近时，深度值可能无法区分

6.3 解决方案

1. 增加距离（推荐）：

// 将第二个平面抬高足够距离
plane2.position.y = 0.1; // 增加到0.1，避免深度冲突

2. 使用多边形偏移（Polygon Offset）：

const material = new THREE.MeshStandardMaterial({
  color: 0xff0000,
  polygonOffset: true,        // 启用多边形偏移
  polygonOffsetFactor: 1,     // 偏移因子
  polygonOffsetUnits: 1       // 偏移单位
});

3. 调整渲染顺序：

// 强制后渲染的平面在深度测试中胜出
plane2.renderOrder = 1;

4. 修改深度测试函数：

// 较少使用，但也是解决方案之一
material.depthFunc = THREE.LessEqualDepth;

6.4 最佳实践

  • 为不同物体预留足够的间距（建议至少0.1个单位）
  • 保持场景在合理的尺度范围内（0.1-1000单位）
  • 避免使用极小的数值

7. 相机选择建议

7.1 使用透视相机当：

  • 需要真实的3D视觉效果
  • 制作第一人称/第三人称游戏
  • 产品展示、建筑可视化

7.2 使用正交相机当：

  • 需要保持物体尺寸一致
  • 制作2D游戏或UI界面
  • 工程制图、CAD应用
  • 等距视角游戏

8. 与 OrbitControls 的配合

orbitControls = new OrbitControls(camera, containerRef.value);
orbitControls.enableDamping = true; // 平滑阻尼效果
orbitControls.dampingFactor = 0.05; // 阻尼系数

// 限制控制范围
orbitControls.minDistance = 2;
orbitControls.maxDistance = 10;
orbitControls.maxPolarAngle = Math.PI / 2; // 限制垂直旋转角度

9. 实际应用示例

9.1 完整的相机设置

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
// Controls鼠标交互
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";
import * as dat from "dat.gui";

const containerRef = ref(null);
const stat = new Stats();

// 场景、相机、渲染器
const scene = new THREE.Scene();

// 环境光

scene.add(new THREE.AmbientLight(0xffffff, 0.2));

//方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
directionalLight.castShadow = true; // 开启阴影投射
//阴影更光滑优化
directionalLight.shadow.mapSize.set(2048, 2048);
scene.add(directionalLight);

// gui
const gui = new dat.GUI();
gui.add(directionalLight.position, "x", -5, 5, 0.01).name("X灯光的位置");
gui.add(directionalLight.position, "y", -5, 5, 0.01).name("Y灯光的位置");
gui.add(directionalLight.position, "z", -5, 5, 0.01).name("z灯光的位置");

// 只有三种光能产生阴影   DirectionalLight  PointLight  SpotLight
// Plane
const planeG = new THREE.PlaneGeometry(4, 4,10,10);
const planeM = new THREE.MeshStandardMaterial({
  color: 0xcccccc,
  side: THREE.DoubleSide,
  // wireframe: true,这个看近大远小用的
});

const plane = new THREE.Mesh(planeG, planeM);
plane.receiveShadow = true; // 接收阴影
plane.rotation.x = -Math.PI / 2;

scene.add(plane);

//再加一个平面
const planeG2 = new THREE.PlaneGeometry(1,4);
const planeM2 = new THREE.MeshStandardMaterial({
  color: 0xff0000, // 添加颜色以便区分
  polygonOffset: true, // 启用多边形偏移
  polygonOffsetFactor: 1, // 偏移因子
  polygonOffsetUnits: 1  // 偏移单位


});

const plane2 = new THREE.Mesh(planeG2, planeM2);

scene.add(plane2);




// z-flighting的问题

plane2.position.y = 0.01; // 在 Y 轴方向偏移，而不是 Z 轴
plane2.rotation.x = -0.5 * Math.PI;

// 添加一个球体作为示例
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
  color: 0xffff00,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0, 0.5, 0);
// sphere.position.y = 1; // 将球体稍微抬高，避免与平面重合
sphere.castShadow = true; // 投射阴影
scene.add(sphere);

// 第一种相机，透视相机
// const camera = new THREE.PerspectiveCamera(
//   75,
//   window.innerWidth / window.innerHeight,
//   0.1,
//   100
// );

// 第二种相机，正交相机
const aspect = window.innerWidth / window.innerHeight;
const d = 3;

const camera = new THREE.OrthographicCamera(
  -d * aspect,
  d * aspect,
  d,
  -d,
  0.1,
  100
);

camera.position.set(4, 2, 5);
camera.lookAt(0, 0, 0);
camera.zoom = 1;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影映射

// 坐标轴
const axes = new THREE.AxesHelper(50);
scene.add(axes);

// 控制器和动画
let orbitControls;
const clock = new THREE.Clock();

function animate() {
  const time = clock.getElapsedTime();
  sphere.position.y = Math.abs(Math.sin(time)) + 0.5;
  //  camera.position.x = Math.sin(time) * 5;
  //  camera.position.z = Math.cos(time) * 5;

  //和上边的camera.zoom 配合使用
  camera.updateProjectionMatrix();
  // 更新控制器
  if (orbitControls) {
    orbitControls.update();
  }

  // 渲染
  renderer.render(scene, camera);
  stat.update();

  requestAnimationFrame(animate);
}

// 挂载
onMounted(() => {
  // 初始化轨道控制器
  orbitControls = new OrbitControls(camera, containerRef.value);
  orbitControls.enableDamping = true;

  // 添加到DOM
  containerRef.value.appendChild(renderer.domElement);
  containerRef.value.appendChild(stat.domElement);

  // 开始动画
  animate();
});

// 窗口大小调整
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

10. 总结与最佳实践

  1. 相机类型选择：根据项目需求选择合适的相机类型
  2. 参数更新：修改相机参数后一定要调用 updateProjectionMatrix()
  3. zoom 属性：在两种相机中都有效，但行为略有不同
  4. 控制器冲突：程序化相机动画与 OrbitControls 会冲突，需要适当处理
  5. 深度冲突：注意 Z-Fighting 问题，合理设置物体间距或使用多边形偏移
  6. 性能优化：合理设置近平面和远平面，避免过大比例影响深度精度
  7. 响应式设计：正确处理窗口大小变化，保持正确的宽高比

特别提醒：

  • camera.zoom 在透视相机和正交相机中都有效
  • 当使用程序化 lookAt() 时，应该临时禁用 OrbitControls 避免冲突
  • 修改任何相机参数后都必须调用 updateProjectionMatrix()

掌握 Three.js 相机的使用是创建优秀3D应用的关键。理解不同类型相机的特点、学会处理常见问题、掌握相机动画技术，能够让你更好地控制3D场景的视觉表现。

丫丫723734
关注
Three.js引擎开发：Three.js输入与交互系统_（4）.Three.js相机系统详解
chenlz2007的博客
06-11 966
对于更复杂的游戏控制逻辑，可以通过监听键盘和鼠标事件来实现自定义的相机控制。通过本节的详细介绍，我们可以看到Three.js的相机系统非常强大和灵活。无论是基本的相机创建和配置，还是复杂的移动、旋转和交互控制，Three.js都提供了丰富的工具和方法。此外，Three.js还支持多种高级功能，如景深效果、运动模糊效果、HDR和环境光效果以及多视角渲染，这些功能可以显著提升虚拟现实游戏的视觉效果和玩家体验。
透视相机（PerspectiveCamera）
liuhao9999的博客
12-08 6496
透视相机（PerspectiveCamera） 这一摄像机使用perspective projection（透视投影）来进行投影。 这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。 示例 var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); scene.add( camera ); 构造器 PerspectiveCamera( fov :Number, aspect :.
基于threejs的2.5D地图项目.zip
05-30
基于threejs的2.5D地图项目.zip
如何将three.js坐标体系中的坐标转换为二维坐标
Think More 的博客
05-21 1312
背景： 线条是three.js开发的，每条线条的开始位置需要放一个2.5D的图标，所以就需要把三维的坐标转为二维 const myObj = document.getElementById(dom); const width = myObj.clientWidth; const height = myObj.clientHeight; const pos = {x:10,y:10,z:10}; function getPosition(pos = {}) { let a = new THREE.Ve
2d与2.5d坐标转换_Three.js 地理坐标和三维空间坐标的转换
weixin_39743357的博客
11-23 1130
奇技指南本文作者高峰，360奇舞团前端工程师，W3C性能工作组/WOT工作组成员本文转载自奇舞周刊引言在实现3D地球时，球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换，是指将地理贴图上的坐标，转换为球面坐标(https://en.wikipedia.org/wiki/Spherical_coordinate_system)，即three.js中的三维坐标。在介绍他们之间如何转...
全面体验2.5D WebGIS系统构建与应用
weixin_28913879的博客
10-02 2181
本文还有配套的精品资源，点击获取 简介：WebGIS是基于Web技术的地理信息系统，允许用户通过浏览器操作地理信息。2.5D WebGIS结合了二维和三维特点，以较低的计算成本提供丰富的地理环境展示。本项目文件包含基础WebGIS应用框架及示例页面，展示地图显示、图层管理、数据交互、空间分析等核心功能。开发者可利用源码深入学习WebGIS开发，包括JavaScript编程、...
Three.js 快速入门教程【二】透视投影相机
前端领域技术分享
02-19 1727
在 Three.js 创建的 3D 虚拟世界中，相机是我们观察场景的窗口。而透视投影相机（PerspectiveCamera）是 Three.js 里常用的相机类型之一，它模拟了人眼观察物体的方式，即近大远小，能为场景带来逼真的深度感。本篇文章将介绍透视投影相机在 Three.js 中的使用。透视投影相机是 Three.js 创建逼真 3D 场景的重要工具。通过掌握其创建、位置与方向控制以及与场景的交互，我们能为用户带来更丰富、沉浸式的 3D 体验。
【threejs】透视相机，实现相机根据模型大小自适应，将模型放置在视角内
hzqzzz的博客
06-07 1962
透视相机，实现相机根据模型大小自适应，将模型放置在视角内。
Vue使用Three.js加载glTF模型的方法详解
10-15
Vue结合Three.js加载glTF模型的方法详解主要介绍的是如何在Vue项目中使用Three.js这个三维图形库加载glTF格式的模型。Three.js是一个JavaScript库，它简化了WebGL的使用，使得开发者可以更容易地在网页中创建和展示...
Three.js的使用及绘制基础3D图形详解
10-19
Three.js为开发者提供了一种高效且易用的方式，来创建复杂的3D场景和交互式应用。通过理解并熟练掌握Three.js的基本要素，可以创建出各种各样的3D图形，如3D图片、自定义图形，甚至可以绘制地图。在选择Three.js作为...
基于three.js实现的3D粒子动效实例代码
10-17
【基于three.js实现3D粒子动效实例代码详解】 在Web开发中，为了创建引人入胜的交互式3D体验，three.js是一个强大的JavaScript库，它利用WebGL技术为浏览器提供高性能的3D渲染。本篇文章将深入探讨如何利用three.js...
SVG-Three-Map:使用Three.js将SVG映射转换为2.5D
04-29
SVG三图 使用Three.js将SVG映射转换为2.5D 文献资料 将SVG转换为Three.js 使用SVGLoader将所有SVG形状转换为Three.js 为Astar生成网格 使用第一个形状作为地板。 将所有形状的SVG添加为墙。 与三个物体的相互作用 通过使用三个的Raycaster突出显示鼠标移动时的状态。 单击鼠标以选择源和目标时添加精灵。 寻找路径 通过使用Astar.js查找路径（ ） 用THREE.MeshLine（ ）绘制路径线
【Three.js】第七章 Cameras 相机
m0_68324632的博客
05-25 1853
我们已经创建过了一个`PerspectiveCamera`，但还有其他类型的相机，如您在文档中所见。
Three.js - 透视相机（PerspectiveCamera）（三）
热门推荐
小小的前端
04-25 1万+
简介 在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。 透视相机(PerspectiveCamera) 根据视锥的范围给渲染器提供需要渲染的场景范围。 实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内
从零开始学习three.js（2）：一文详解three.js中各类相机Camera
最新发布
前端小崔的博客
04-23 541
Three.js 提供了多种相机类型，每种相机都有其独特的用途和属性。透视相机适合创建沉浸式的 3D 场景，正交相机适合创建平面化的 2D 效果，而立方体相机和数组相机则用于更复杂的渲染需求。通过合理选择和配置相机，我们可以实现丰富的视觉效果和交互体验。一文详解three.js中的相机。
Three.js第三章——透视投影相机
00后的程序员
12-21 3140
生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。想象为一个房间，然后根据相机位置和长方体位置尺寸对比，判断两者相对位置。你可以发现设置相机坐标(200, 200, 200)，位于长方体外面一处位置。，具体说相机镜头对准哪个物体或说哪个坐标。，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。你用相机拍照你需要控制相机的。
【ThreeJS基础教程-初识Threejs】1.5 Threejs透视相机和正交相机介绍
qq_42760477的博客
10-17 2720
ThreeJS基础教程：Threejs透视相机和正交相机介绍，本文主要介绍两个在Threejs常用的相机
Three.js相机Camera控件知识梳理
xichji的专栏
12-17 1795
在透视投影中，物体的大小会随着距离的增加而减小，这使得远离相机的物体看起来更小，符合现实世界中的透视效果。OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。较小的视角值则会产生更窄的视野和更低的畸变。课件案例源码是一个工厂模型，相机在空中俯视工厂，如果在渲染循环中不停地改变相机位置，这时候产生的视觉效果，就好比你在天上运动，看地面的效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值