用Three.js实现简单布局的3D房间

最新推荐文章于 2024-03-13 09:53:19 发布
最新推荐文章于 2024-03-13 09:53:19 发布
阅读量2.6w 收藏 94
点赞数 20
分类专栏： Three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mxdmojingqing/article/details/78044520
版权

废话不说了，直接上成果图。

 代码如下

<!doctype html>
<html lang="en">
<head>
<title>房间布局</title>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>


	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/Three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/ThreeBSP.js"></script>
	<script src="js/Detector.js"></script>
	<script src="js/Stats.js"></script>


	<script src="js/THREEx.KeyboardState.js"></script>
	<script src="js/THREEx.FullScreen.js"></script>
	<script src="js/THREEx.WindowResize.js"></script>


	<!-- people -->
	<script src="people/js/three.js"></script>
	<script src="people/js/DDSLoader.js"></script>
	<script src="people/js/MTLLoader.js"></script>
	<script src="people/js/OBJLoader.js"></script>
	<script src="people/js/Detector.js"></script>
	<script src="people/js/stats.min.js"></script>
	<script src="people/js/PathControls.js"></script>
	<script src="people/js/Tween.js"></script>
	<script src="people/js/RequestAnimationFrame.js"></script>


	<div id="ThreeJS" style="position: absolute; left: 0px; top: 0px"></div>


	<script>
		// 设置全局变量
		var scene, camera, renderer, controls, tween, door;
		var keyboard = new THREEx.KeyboardState();//保持键盘的当前状态，可以随时查询
		var clock = new THREE.Clock();
		var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
		//var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
		var VIEW_ANGLE = 75, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 10000;
		var materialArrayA = [];
		var materialArrayB = [];
		var matArrayA = [];//内墙
		var matArrayB = [];//外墙
		var dummy = new THREE.Object3D();//仿制品
		init();
		animate();

		//1.场景         
		function initScene() {
			scene = new THREE.Scene();
		}

		//2.相机
		function initCamera() {
			camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
			camera.position.set(0, 1000, 1800);
			camera.lookAt(scene.position);
			camera.lookAt(0, 0, 0);
			scene.add(camera);
		}

		//3.渲染器
		function initRender() {
			if (Detector.webgl)
				renderer = new THREE.WebGLRenderer({
					antialias : true
				});
			else
				renderer = new THREE.CanvasRenderer();
			//设置渲染器的大小为窗口的内宽度，也就是内容区的宽度。
			renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
			container = document.getElementById('ThreeJS');
			container.appendChild(renderer.domElement);
			renderer.setClearColor(0x4682B4, 1.0);
		}

		//4.事件
		function initEvent() {
			THREEx.WindowResize(renderer, camera);
			THREEx.FullScreen.bindKey({
				charCode : 'm'.charCodeAt(0)
			});
		}

		//5.控制
		function initControls() {
			controls = new THREE.OrbitControls(camera, renderer.domElement);
		}

		//6.光源
		function initLight() {
			// 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不同 
			// A start, 第二个参数是光源强度
			var directionalLight = new THREE.DirectionalLight(0xffffff, 1);//模拟远处类似太阳的光源
			directionalLight.position.set(0, 100, 0).normalize();
			scene.add(directionalLight);
			//A end
			var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
			ambient.position.set(0, 0, 0);
			scene.add(ambient);
			//var pointlight = new THREE.PointLight(0x000000,1.5,2000);
			//scene.add(pointlight); 
		}

		//创建地板  
		function createFloor() {
			var loader = new THREE.TextureLoader();
			loader.load("images/floor.jpg", function(texture) {
				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
				texture.repeat.set(10, 10);
				var floorGeometry = new THREE.BoxGeometry(1600, 1100, 1);
				var floorMaterial = new THREE.MeshBasicMaterial({
					map : texture,
					side : THREE.DoubleSide
				});
				var floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.position.y = -0.5;
				floor.rotation.x = Math.PI / 2;
				scene.add(floor);
			});

			//茶色：0x58ACFA   透明玻璃色：0XECF1F3
			var glass_material = new THREE.MeshBasicMaterial({
				color : 0XECF1F3
			});
			glass_material.opacity = 0.4;
			glass_material.transparent = true;

			var left_wall = returnWallObject(20, 200, 1100, 0, matArrayB, -801,
					100, 0);
			var left_cube = returnWallObject(20, 110, 1100, 0, matArrayB, -801,
					100, 0);
			createResultBsp(left_wall, left_cube, 1);
			createCubeWall(1, 110, 1100, 0, glass_material, -801, 100, 0);

			var right_wall = returnWallObject(20, 200, 1100, 1, matArrayB, 801,
					100, 0);
			var right_cube = returnWallObject(20, 110, 1100, 0, matArrayB, 801,
					100, 0);
			createResultBsp(right_wall, right_cube, 1);
			createCubeWall(1, 110, 1100, 0, glass_material, 801, 100, 0);
		}

		//墙上挖门，通过两个几何体生成BSP对象
		function createResultBsp(bsp, less_bsp, mat) {
			switch (mat) {
			case 1:
				var material = new THREE.MeshPhongMaterial({
					color : 0x9cb2d1,
					specular : 0x9cb2d1,
					shininess : 30,
					transparent : true,
					opacity : 1
				});
				break;
			case 2:
				var material = new THREE.MeshPhongMaterial({
					color : 0xafc0ca,
					specular : 0xafc0ca,
					shininess : 30,
					transparent : true,
					opacity : 1
				});
				break;
			default:
			}

			var sphere1BSP = new ThreeBSP(bsp);
			var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 淡紫,0xC3C3C3 白灰 , 0xafc0ca灰
			var resultBSP = sphere1BSP.subtract(cube2BSP);
			var result = resultBSP.toMesh(material);
			result.material.flatshading = THREE.FlatShading;
			result.geometry.computeFaceNormals(); //重新计算几何体侧面法向量
			result.geometry.computeVertexNormals();
			result.material.needsUpdate = true; //更新纹理
			result.geometry.buffersNeedUpdate = true;
			result.geometry.uvsNeedUpdate = true;
			scene.add(result);
		}

		//创建墙
		function createCubeWall(width, height, depth, angle, material, x, y, z) {
			var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
			var cube = new THREE.Mesh(cubeGeometry, material);
			cube.position.x = x;
			cube.position.y = y;
			cube.position.z = z;
			cube.rotation.y += angle * Math.PI; //-逆时针旋转,+顺时针
			scene.add(cube);
		}

		//返回墙对象
		function returnWallObject(width, height, depth, angle, material, x, y,
				z) {
			var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
			var cube = new THREE.Mesh(cubeGeometry, material);
			cube.position.x = x;
			cube.position.y = y;
			cube.position.z = z;
			cube.rotation.y += angle * Math.PI;
			return cube;
		}

		//创建墙纹理
		function createWallMaterail() {
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //前  0xafc0ca :灰色
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //后  
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xd6e4ec
			})); //上  0xd6e4ec： 偏白色
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xd6e4ec
			})); //下  
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //左    0xafc0ca :灰色
			matArrayA.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //右

			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //前  0xafc0ca :灰色
			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0x9cb2d1
			})); //后  0x9cb2d1：淡紫
			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0xd6e4ec
			})); //上  0xd6e4ec： 偏白色
			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0xd6e4ec
			})); //下  
			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //左   0xafc0ca :灰色
			matArrayB.push(new THREE.MeshPhongMaterial({
				color : 0xafc0ca
			})); //右

		}

		//创建房间布局
		function createLayout() {

			// 墙面1 立方体比较长的面  左一
			createCubeWall(10, 200, 900, 0, matArrayB, -651, 100, 0);
			// 墙面2  立方体比较长的面   右一
			createCubeWall(10, 200, 900, 1, matArrayB, 651, 100, 0);
			// 墙面3 门对面的墙 立方体比较短的面  
			createCubeWall(10, 200, 1310, 1.5, matArrayB, 0, 100, -451);

			// 墙面4   带门的面  
			var wall = returnWallObject(1310, 200, 10, 0, matArrayB, 0, 100,
					455);
			// 门框 
			var door_cube = returnWallObject(100, 180, 10, 0, matArrayB, 0, 90,
					455);
			createResultBsp(wall, door_cube, 1);

			//为墙面安装门,右门
			var loader = new THREE.TextureLoader();
			loader.load("images/door_right.png", function(texture) {
				var doorgeometry = new THREE.BoxGeometry(100, 180, 2);
				var doormaterial = new THREE.MeshBasicMaterial({
					map : texture,
					color : 0xffffff
				});
				doormaterial.opacity = 1.0;
				doormaterial.transparent = true;
				door = new THREE.Mesh(doorgeometry, doormaterial);
				door.position.set(-50, 0, 0);
				var door1 = door.clone();
				door1.position.set(50, 0, 0);
				door1.visible = false;
				dummy.add(door);
				dummy.add(door1);
				dummy.position.set(50, 90, 451)
				scene.add(dummy);
			});

			// 房间A:隔墙1 
			createCubeWall(10, 200, 250, 0, matArrayA, -151, 100, 325);
			//房间A:隔墙2  无门
			createCubeWall(10, 200, 220, 0.5, matArrayA, -256, 100, 201);
			// 厨房：隔墙3 
			createCubeWall(350, 200, 10, 0, matArrayA, 481, 100, 131);
			// 厨房：隔墙4 无门
			createCubeWall(10, 200, 200, 0, matArrayA, 301, 100, 225);
			// 房间B 
			createCubeWall(350, 200, 10, 0, matArrayA, -471, 100, -50);
			//房间B  无门
			createCubeWall(200, 200, 10, 0.5, matArrayA, 0, 100, -350);
			// 房间C
			createCubeWall(220, 200, 10, 0, matArrayA, 540, 100, -50);
			//房间C 无门
			createCubeWall(200, 200, 10, 0.5, matArrayA, 250, 100, -350);
			//厕所
			var cube = returnWallObject(10, 200, 260, 0.5, matArrayA, 125, 100,
					-250);
			//厕所门框
			var door_cube1 = returnWallObject(10, 160, 80, 0.5, matArrayA, 155,
					90, -250);
			createResultBsp(cube, door_cube1, 2);

			//茶色：0x58ACFA   透明玻璃色：0XECF1F3
			var glass_material = new THREE.MeshBasicMaterial({
				color : 0x58ACFA
			});
			glass_material.opacity = 0.6;
			glass_material.transparent = true;
			createCubeWall(1, 180, 80, 0.5, glass_material, 155, 90, -250);
		}

		//7.初始化OBJ对象
		function initObject() {
			//墙纹理
			createWallMaterail();
			createFloor();
			createLayout();
		}

		//初始化函数
		function init() {
			initScene();
			initCamera();
			initRender();
			initEvent();
			initControls();
			initLight();
			initObject();
			//监听键盘按键
			document.addEventListener("keydown", onkeyDown, false);
		}

		var door_state = true;//默认是门是关闭的
		//Enter=13,Space=32;
		function onkeyDown(event) {
			switch (event.keyCode) {
			case 13:
				console.log(event.keyCode);
				if (door_state) {
					dummy.rotation.y += 0.5 * Math.PI;
					door_state = false;
				} else {
					dummy.rotation.y -= 0.5 * Math.PI;
					door_state = true;
				}
				break;
			default:
				console.log(event.keyCode);
				break;
			}
		}

		function animate() {
			requestAnimationFrame(animate);
			renderer.render(scene, camera);
			TWEEN.update();
			update();
		}

		function update() {
			var delta = clock.getDelta();
			var moveDistance = 200 * delta;
			var rotateAngle = Math.PI / 2 * delta;
			controls.update();
		}
	</script>
</body>
</html>

 

通过Enter键可控制开门和关门动作。门的旋转是通过，把门克隆一份，把克隆的那个设置为不可见，然后把两个门打个组 ，这个时候中旋转组就可以了。

 此时的旋转中心实际是在组的中心，但设置一半不可见 ，看起来就像是门在旋转了。注意的是，组内的东西的坐标是相对于组的组内，两个门的坐标应该分别是x轴的正负轴上，整个组的位置应该是原来门应该在的位置。

（这也是我向一位大神请教的，真的很感谢他那么耐心的教我，O(∩_∩)O）

 

运行方式：

在支持webgl的浏览器上打开room.html,即可看到效果图。如果加载不出来，打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式， 选择“属性”，在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格。修改完成，点击应用，确定后，关闭所有chrome上的窗口，重启chrome。再找到该资源room.html文件，以Google Chrome浏览器方式打开即可。

 

错误解决。

如果出现地板和门的两张图片加载不出来时，提示已被跨源资源共享策略阻止加载。解决办法第一种是如上图所示在Chrome的属性加"--allow-file-access-from-files"；第二种就是把图片位置的相对路径改成绝对路径。

原demo发邮件索取的太多了，都从网盘自取吧。就是个demo，不喜勿喷，渣渣博主很玻璃心。

链接：https://pan.baidu.com/s/1UmBcjFCQ5QzdLcfGp-gpug 密码：r5c8

Mo_JingQing
关注
  • 20
    点赞
  • 踩
  • 94
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
three.js实现楼宇扫描效果(three.js练习)
weixin_40856652的博客
06-09 1801
智慧城市、酷炫动效,threejs、webgl、shader、3D、光墙效果。使用shader实现楼宇扫描效果
Three.js实现3D机房效果
10-17
主要为大家详细介绍了Three.js实现3D机房效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue项目中使用Three.js开发三维IT机房
最新发布
u012148903的博客
03-13 1265
为了便于访问和区分模型，需要对模型进行规范命名，如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。假设IT机柜的名称都是唯一的，那我们便可以基于这个名称从后端获取相应机柜的详细信息。GLTF 模型文件包含了整个场景的数据，比如几何体、材质、动画、相机等。在建模软件中，同一类型的模型文件可以放入一个数组里，数组可以多层嵌套。当前的机房模型比较简单，没有使用数组，所有的Mesh对象都是平展开的。简化模型，能用贴图表现的细节，就用贴图。建模和导出gltf。
threeJS如何实现智慧楼宇管理平台
知屋安砖
06-28 4912
智慧楼宇管理平台示例描述与操作指南示例效果展示应用场景实现步骤第一步 初始化设置功能第二步 初始化查看设备信息功能第三步 初始化重点区域监控功能第四步 初始化热力分布功能相关接口相关示例 示例描述与操作指南 点击示例内各个功能，可以查看到建筑中的监控图像，了解各个楼层的热力分布，同时可查看各层建筑的构件详情，楼层剖切，也可观察楼层中各系统的占比，更快速的处理建筑中突发情况，实现智慧楼宇的意义。 示例效果展示 应用场景 智慧楼宇管理平台管理系统是智能建筑的主要组成部分之一。 智能建筑通过楼宇自动化系统实现建
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
1,智慧楼宇楼层设施动态装载 2,基于threejs分步加载减少初始化压力。
Three.js开发实现3D地图的实践过程总结
10-18
主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
web3D构建三维房间空间（three.js）
12-04
web3D构建，根据房间二维平面图构建了三维空间图，可实现房间开关门，移动，旋转，可各个角度观察房屋，使用了threejs库
这个户型设计前端图形化技术，你可能一辈子也学不会！
MMKJSH的博客
11-30 316
这个户型设计前端图形化技术，你可能一辈子也学不会！
threeJS 根据户型图绘制 3D模型 1
笑望灬星辰
01-31 3315
户型图 效果图 核心代码 <script> var vm = new Vue({ el: "#app", data: { test: "改变相机位置", scene: '', renderer: "", camera: "", controls: "", // 鼠标控件 fh: 2, // 地面高度
three.js实现3D室内全景看房
qq_60976312的博客
03-08 2531
three.js实现3D室内全景看房
记一次three.js 布局3D室内简易地图
acheng
09-14 4920
随着html5 canvas的流行，酷炫的web端效果层出不穷，搭载基于webgl 的three.js的图形库可以做出基于web的3D效果。最近应对客户需求，2D平面地图已经不太满足客户的口味，3D的效果更让人接受，先看一下成果图。 对应室内地图CAD图纸 进行3D立体效果拉伸，再加上一些实景模型的搭配，使得整体效果更好。 地图地板墙体的依据cad 尺寸制定的json数据协议： { title: '', x: 480, y: 80,
vue页面引入three.js实现3d动画场景操作
10-14
主要介绍了vue页面引入three.js实现3d动画场景操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于three.js实现的3D粒子动效实例代码
10-17
主要给大家介绍了关于如何基于three.js实现的3D粒子动效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
使用Three.js 实现虎年春节3D创意源码
01-19
使用Three.js 实现虎年春节3D创意源码，更多源码请登录星火在线（http://www.sparkonline.cn）。 考研： 考研政治、考研英语、考研数学、考研专业课 一网打尽 专升本： 专升本数学、专升本专业课 有效提升 本硕论文： 软件论文、硬件论文 更为专注 软考： 系统架构师、系统分析师、项目管理师 打造人才 源代码： JAVA源代码、PYTHON源代码、GO源代码、C/C++源代码、FLUTTER源代码、WEBGL特效源代码 探本溯源 技术教程： 微服务、WEBGL、THREE.JS、区块链、边缘计算、大数据、人工智能 应有尽有 文档方案： 智慧校园、医疗健康、宠物商城、MBA资料 量身定制 故事板： 星火燎原的故事天天都在上演。我愿做一颗星，带您走入浩瀚无垠的天空。在这里，把您的理想告诉我，我来帮您实现。 夜九时后，一切星散，一所很大的洋楼里，除你我以外，没有别人。慢慢沉静下去。寂静浓到如酒，令人微醺。 知识就是力量。知识能够丰富人的思想，发挥人的聪明才智，挖掘人的潜能。 点滴的知识，人生的鼎峰，从这里开始！
creams-pixi:基于pixiJs实现户型图绘制
05-31
creams-pixi 基于pixi.js封装的楼层剖面图组件 代码打包指令 npm install //安装依赖 npm run build //编译代码 发布代码 crnpm安装步骤参照： crnpm publish//发布 记得改版本号：version（在package.json文件内）！！！ 层级结构及其绑定事件 思维导图 文件说明 分类： action：实现撤销重做 app：组件初始化 common：公共方法 event：绑定外部传入事件 graph：创建图形 operation：处理外部调用功能接口 state：状态管理 后缀： API：外部调用方法 Interface：内部调用方法 数据格式： 设置画布 GraphCache = { background: { url: string, // 背景图地址 alpha?: number
Three.js实现简单3D房间布局
10-17
主要为大家详细介绍了Three.js实现简单3D房间布局的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于纯three.js实现的3D地图方案源码+项目说明.zip
11-23
基于纯three.js实现的3D地图方案源码+项目说明.zip 由于案例的地图范围有75km,图片资源第一次加载需要较长时间,请耐心等待 如需提高地图瓦片清晰度,可以修改`src/components/Map`组件的配置项,案例的瓦片层级是12,...
js室内地图开发_three.js搭建室内场景教程
weixin_33724759的博客
12-23 1719
公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。1.创建地板地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放...
threejs创建平面几何形状
热门推荐
目尽地平线
02-16 1万+
平面几何形状有三种：点，线，面三种，下面说说用threejs创建这几种形状的方法。
使用three.js 实现3D地图
06-13
使用three.js可以很方便的实现3D地图，具体步骤如下： 1. 创建一个场景对象 ```javascript var scene = new THREE.Scene(); ``` 2. 创建一个透视相机 ```javascript var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); ``` 3. 创建一个渲染器，并将其添加到DOM中 ```javascript var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 创建一个平面几何体作为地图 ```javascript var geometry = new THREE.PlaneGeometry(100, 100, 32); ``` 5. 创建一个材质，并设置其颜色或纹理 ```javascript var texture = new THREE.TextureLoader().load('texture.jpg'); var material = new THREE.MeshBasicMaterial({map: texture}); ``` 6. 创建一个网格对象，将上面的几何体和材质作为参数传入 ```javascript var plane = new THREE.Mesh(geometry, material); ``` 7. 将网格对象添加到场景中 ```javascript scene.add(plane); ``` 8. 设置相机位置和目标点 ```javascript camera.position.z = 5; camera.lookAt(scene.position); ``` 9. 渲染场景 ```javascript renderer.render(scene, camera); ``` 以上就是使用three.js实现3D地图的主要步骤。具体可以根据需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值