devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装_three鼠标画线

作者：Gausst松鼠会 | 2024-02-15 13:45:45

赞

踩

three鼠标画线

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装

目录

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、案例实现步骤

六、关键代码

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three.js （webgl） 中，PC 端移动通过鼠标移动物体，移动端通过手指交互移动物体的整理，主要是通过对应的touchstart、touchmove、touchend ，以及 Threejs 中的 Raycaster 。其中，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

二、实现原理

1、touchstart 点击屏幕，发射射线，选择物体

2、旋转对应移动物体，touchmove 中，发射射线，与地面交点的动态变化量，作为移动物体移动的移动量

3、touchend 取消物体选中，物体移动结束

三、注意事项

1、这里简单封装的是与地面交互移动，主要移动物体的 x 和 z 的值

2、其中，也添加了物体开始移动，和结束移动的事件，可以根据需要，在移动开始和结束的时候添加对应的事件处理

3、注意如果Threejs 渲染窗口不是全屏，需要注意 touch 触控点转换到对应的 container 中，作为Threejs 中的射线发射点

四、效果预览

 

五、案例实现步骤

1、为了方便学习，这里是基于 Github 代码，进行开发的，大家可以下载官网代码，很多值得学习的案例

GitHub - mrdoob/three.js: JavaScript 3D Library.

gitcode：mirrors / mrdoob / three.js · GitCode

2、在上面的基础上，添加一个 html ，用来实现案例效果，引入相关包     

3、初始化构建 3D 场景

4、其中， 场景中添加3个移动的 cube 、和一个地面 plane

 5、添加场景移动物体功能RayCasterMoveObjectsWrapper，然后把要移动和Cube组、交互移动的地面，开始结束移动事件传入，还有 Threejs 渲染的容器 container

6、并且在 animation 中 Update 更新移动

 7、一切准备好，运行场景、效果如下

六、关键代码

1、TestTouchRaycasterMoveObject.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<title>30TestTouchRaycasterMoveObject</title>
  5. 		<meta charset="utf-8">
  6. 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. 		<link type="text/css" rel="stylesheet" href="main.css">
  8. 	</head>
  9.  
  10. 	<body>
  11. 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - dashed lines example
  12. 		</div>
  13. 		<div id="container"></div>
  14.  
  15. 		<!-- Import maps polyfill -->
  16. 		<!-- Remove this when import maps will be widely supported -->
  17. 		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  18.  
  19. 		<script type="importmap">
  20. 			{
  21. 				"imports": {
  22. 					"three": "../../../build/three.module.js"
  23. 				}
  24. 			}
  25. 		</script>
  26.  
  27. 		<script type="module">
  28. 			import * as THREE from 'three';
  29.  
  30. 			import Stats from '../../jsm/libs/stats.module.js';
  31.  
  32. 			import * as GeometryUtils from '../../jsm/utils/GeometryUtils.js';
  33. 			import {
  34. 				OrbitControls
  35. 			} from './../../jsm/controls/OrbitControls.js';
  36. 			import {
  37. 				DashLinesBoxTool
  38. 			} from './DashLinesBoxTool.js'
  39. 			
  40. 			import {RayCasterMoveObjectsWrapper} from "./RayCasterMoveObjectsWrapper.js"
  41.  
  42. 			let renderer, scene, camera, stats, controls;;
  43. 			const moveObjectsMeshArray = [];
  44. 			const floorArray = []
  45. 			
  46.  
  47. 			const WIDTH = window.innerWidth,
  48. 				HEIGHT = window.innerHeight;
  49. 			let mRayCasterMoveObjectsWrapper = null
  50. 			init();
  51. 			animate();
  52.  
  53. 			function init() {
  54.  
  55. 				// 相机
  56. 				camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 1, 200);
  57. 				camera.position.z = 10;
  58. 				camera.position.y = 10;
  59.  
  60. 				// 场景 scene
  61. 				scene = new THREE.Scene();
  62. 				scene.background = new THREE.Color(0x111111);
  63. 				scene.fog = new THREE.Fog(0x111111, 150, 200);
  64.  
  65. 				// 渲染
  66. 				renderer = new THREE.WebGLRenderer({
  67. 					antialias: true
  68. 				});
  69. 				renderer.setPixelRatio(window.devicePixelRatio);
  70. 				renderer.setSize(WIDTH, HEIGHT);
  71.  
  72. 				// 添加到 html 中
  73. 				const container = document.getElementById('container');
  74. 				container.appendChild(renderer.domElement);
  75.  
  76. 				// 性能监测
  77. 				stats = new Stats();
  78. 				container.appendChild(stats.dom);
  79.  
  80. 				// 控制相机场景中的轨道控制器
  81. 				controls = new OrbitControls(camera, renderer.domElement);
  82.  
  83. 				// 窗口变化监控
  84. 				window.addEventListener('resize', onWindowResize);
  85.  
  86. 				createLight();
  87.  
  88. 				// 测试添加各种几何体绘制尺寸虚线框
  89. 				createObjects();
  90. 				
  91. 				// 添加射线移动物体功能
  92. 				AddRayCasterMoveObjectsFunc();
  93. 			}
  94.  
  95. 			// 绘制立方体
  96. 			function createObjects() {
  97. 				const geometry = new THREE.BoxGeometry(1, 1, 1);
  98. 				const material = new THREE.MeshPhongMaterial({
  99. 					color: 0x00ff00
  100. 				});
  101. 				const cube = new THREE.Mesh(geometry, material);
  102. 				cube.position.set(0, 0.5, 0);
  103. 				scene.add(cube);
  104. 				moveObjectsMeshArray.push(cube);
  105. 				
  106. 				const material1 = new THREE.MeshPhongMaterial({
  107. 					color: 0x00ffff
  108. 				});
  109. 				const cube1 = new THREE.Mesh(geometry, material1);
  110. 				cube1.position.set(4, 0.5, 0);
  111. 				scene.add(cube1);
  112. 				moveObjectsMeshArray.push(cube1);
  113. 				
  114. 				const material2 = new THREE.MeshPhongMaterial({
  115. 					color: 0xff0000
  116. 				});
  117. 				const cube2 = new THREE.Mesh(geometry, material2);
  118. 				cube2.position.set(-4, 0.5, 0);
  119. 				scene.add(cube2);
  120. 				moveObjectsMeshArray.push(cube2);
  121.  
  122. 				const geometryP = new THREE.PlaneGeometry(10, 10, 10);
  123. 				const materialP = new THREE.MeshPhongMaterial({
  124. 					color: 0xffffff
  125. 				});
  126. 				const plane = new THREE.Mesh(geometryP, materialP);
  127. 				plane.position.set(0, 0, 0);
  128. 				plane.rotation.x = -Math.PI/2;
  129. 				scene.add(plane);
  130. 				floorArray.push(plane);
  131. 			}
  132.  
  133. 			// 创建光源
  134. 			function createLight() {
  135. 				// 添加环境光
  136. 				scene.add( new THREE.AmbientLight( 0x222222 ) );
  137. 				
  138. 				// 添加方向光
  139. 				const light = new THREE.DirectionalLight( 0xffffff );
  140. 				light.position.set( 1, 1, 1 );
  141. 				scene.add( light );
  142. 			}
  143. 			
  144. 			// 添加射线移动物体功能
  145. 			function AddRayCasterMoveObjectsFunc(){
  146. 				mRayCasterMoveObjectsWrapper =
  147. 				new RayCasterMoveObjectsWrapper (moveObjectsMeshArray, container, floorArray,()=>{
  148. 					// 移动开始的时候，停止OrbitControls轨道控制器功能
  149. 					controls.enabled = false;
  150. 				},
  151. 				()=>{
  152. 					// 移动结束的时候，使能OrbitControls轨道控制器功能 
  153. 					controls.enabled = true;
  154. 				});
  155. 				
  156. 				// 使能点击移动功能
  157. 				mRayCasterMoveObjectsWrapper.enableMouseMoveObjs();
  158. 			}
  159.  
  160. 			// 窗口尺寸变化监听
  161. 			function onWindowResize() {
  162.  
  163. 				camera.aspect = window.innerWidth / window.innerHeight;
  164. 				camera.updateProjectionMatrix();
  165.  
  166. 				renderer.setSize(window.innerWidth, window.innerHeight);
  167.  
  168. 			}
  169.  
  170. 			// 动画
  171. 			function animate() {
  172.  
  173. 				requestAnimationFrame(animate);
  174.  
  175. 				render();
  176. 				stats.update();
  177. 				controls.update()
  178. 				
  179. 				// 实时监听射线移动功能
  180. 				mRayCasterMoveObjectsWrapper?.raycaseterUpdate(camera);
  181. 			}
  182.  
  183. 			// 渲染
  184. 			function render() {
  185.  
  186. 				renderer.render(scene, camera);
  187.  
  188. 			}
  189.  
  190. 			
  191. 		</script>
  192.  
  193. 	</body>
  194.  
  195. </html>

2、RayCasterMoveObjectsWrapper.js

  1. import {
  2. 	Raycaster,
  3. 	BufferGeometry,
  4. 	Line,
  5. 	LineBasicMaterial,
  6. 	Vector3
  7.  
  8. } from 'three'
  9.  
  10. /*
  11. * 射线移动物体封装
  12. * PC 端鼠标操作移动，移动端手指点击操作移动
  13. * 使用说明
  14. * 1、new 创建 RayCasterMoveObjectsWrapper 实例
  15. * 2、disableMouseMoveObjs 使能移动功能，disableMouseMoveObjs 禁用移动功能
  16. * 3、raycaseterUpdate 在 Updata 中实时监听移动
  17. */
  18. export class RayCasterMoveObjectsWrapper {
  19.  
  20. 	/**
  21. 	 * 构造函数
  22. 	 * moveObjsDataArray 要移动的物体数组
  23. 	 * container threejs渲染的 容器
  24. 	 * floorArray 物体移动交互的地面
  25. 	 * onMoveStart 开始移动的事件
  26. 	 * onMoveEnd 移动结束的事件
  27. 	 */
  28. 	constructor(moveObjsDataArray, container, floorArray = [], onMoveStart = null, onMoveEnd = null) {
  29.  
  30. 		this.container = container;
  31. 		this.raycaster;
  32. 		// 开始把初始的鼠标位置设置到屏幕外，避免干扰
  33. 		this.mouse = {
  34. 			x: -10000,
  35. 			y: -10000
  36. 		}
  37. 		this.INTERSECTED;
  38. 		this.moveObjsDataArray = moveObjsDataArray
  39.  
  40. 		this.isCanMoveObject = false;
  41. 		this.curMouseX = null;
  42. 		this.curMouseY = null;
  43.  
  44. 		this.onDocumentTouchStart = null
  45. 		this.onDocumentTouchEnd = null
  46. 		this.onDocumentTouchMove = null
  47. 		this.isEnableMoveObjs = false
  48.  
  49. 		// 特殊处理的 Dining -table
  50. 		this.diningTable = null
  51. 		this.diningChairArray = []
  52. 		this.floor = null
  53.  
  54. 		// 使用射线进行移动家具
  55. 		this.raycasterForMove = null
  56. 		this.floorArray = floorArray // 射线交互的地板
  57.  
  58. 		// 移动事件
  59. 		this.mOnMoveStart = onMoveStart
  60. 		this.mOnMoveEnd = onMoveEnd
  61.  
  62.  
  63. 		this.initRayccaster();
  64. 	}
  65.  
  66. 	/**
  67. 	 * 使能射线移动功能
  68. 	 */
  69. 	enableMouseMoveObjs() {
  70. 		this.isEnableMoveObjs = true
  71. 		this.container.addEventListener('touchmove', this.onDocumentTouchMove, true);
  72. 		this.container.addEventListener('touchstart', this.onDocumentTouchStart, true);
  73. 		this.container.addEventListener('touchend', this.onDocumentTouchEnd, true);
  74. 	}
  75.  
  76. 	/**
  77. 	 * 禁用射线移动功能
  78. 	 */
  79. 	disableMouseMoveObjs() {
  80.  
  81. 		this.container.removeEventListener('touchmove', this.onDocumentTouchMove, true);
  82. 		this.container.removeEventListener('touchstart', this.onDocumentTouchStart, true);
  83. 		this.container.removeEventListener('touchend', this.onDocumentTouchEnd, true);
  84. 		this.isEnableMoveObjs = false
  85. 	}
  86.  
  87. 	/**
  88. 	 * 射线移动的更新函数
  89. 	 * @param {Object} curCamera 当前场景的相机
  90. 	 */
  91. 	raycaseterUpdate(curCamera) {
  92.  
  93. 		if (this.isEnableMoveObjs === false) {
  94. 			return
  95. 		}
  96.  
  97. 		if (this.isCanMoveObject === false) {
  98. 			return
  99. 		}
  100.  
  101. 		this.raycasterSelectObject(curCamera)
  102. 		this.raycasterMoveObject(curCamera)
  103. 	}
  104.  
  105. 	/**
  106. 	 * 初始化射线
  107. 	 */
  108. 	initRayccaster() {
  109. 		//  创建射线
  110. 		this.raycaster = new Raycaster();
  111.  
  112. 		this.raycasterForMove = new Raycaster();
  113.  
  114. 		this.initTouchMoveFunction();
  115. 	}
  116.  
  117. 	/**
  118. 	 * 初始化移动交互事件
  119. 	 */
  120. 	initTouchMoveFunction() {
  121.  
  122. 		this.onDocumentTouchMove = (event) => {
  123.  
  124. 			var touch = event.touches[0];
  125. 			//  取消默认动作
  126. 			// event.preventDefault();
  127. 			//  数值归一化 介于 -1 与 1之间  这是一个固定公式
  128. 			if (this.container == null) {
  129. 				// 全屏幕的
  130. 				this.mouse.x = (parseInt(touch.pageX) / window.innerWidth) * 2 - 1;
  131. 				this.mouse.y = -(parseInt(touch.pageY) / window.innerHeight) * 2 + 1;
  132. 			} else {
  133.  
  134. 				// 局部的
  135. 				this.mouse.x = ((parseInt(touch.pageX) - this.container.offsetLeft) / this.container
  136. 					.clientWidth) * 2 - 1
  137. 				this.mouse.y = -((parseInt(touch.pageY) - this.container.offsetTop) / this.container
  138. 					.clientHeight) * 2 + 1
  139. 			}
  140.  
  141. 			if (this.isCanMoveObject && this.INTERSECTED) {
  142. 				// let x = parseInt(touch.pageX) - this.curMouseX
  143. 				// let z = parseInt(touch.pageY)- this.curMouseY
  144. 				// let smooth =2
  145. 				if (this.curMouseX === null || this.curMouseY === null) {
  146. 					if (this.floorRaycasterInfo) {
  147. 						this.curMouseX = this.floorRaycasterInfo.point.x
  148. 						this.curMouseY = this.floorRaycasterInfo.point.z
  149. 					}
  150. 					// console.error("ddd xxx ")
  151. 					return
  152. 				}
  153.  
  154. 				let x = 0
  155. 				let z = 0
  156. 				if (this.floorRaycasterInfo) {
  157. 					x = this.floorRaycasterInfo.point.x - this.curMouseX
  158. 					z = this.floorRaycasterInfo.point.z - this.curMouseY
  159. 				}
  160. 				let smooth = 1.0
  161. 				if (this.INTERSECTED !== null) {
  162. 					this.INTERSECTED.position.x += x * smooth
  163. 					this.INTERSECTED.position.z += z * smooth
  164. 				}
  165.  
  166. 				if (this.floorRaycasterInfo) {
  167. 					this.curMouseX = this.floorRaycasterInfo.point.x
  168. 					this.curMouseY = this.floorRaycasterInfo.point.z
  169. 				}
  170. 			}
  171.  
  172. 		};
  173.  
  174. 		this.onDocumentTouchStart = (event) => {
  175. 			//  取消默认动作
  176. 			event.preventDefault();
  177. 			var touch = event.touches[0];
  178. 			if (this.container == null) {
  179. 				// 全屏幕的
  180. 				this.mouse.x = (parseInt(touch.pageX) / window.innerWidth) * 2 - 1;
  181. 				this.mouse.y = -(parseInt(touch.pageY) / window.innerHeight) * 2 + 1;
  182. 			} else {
  183.  
  184. 				// 局部的
  185. 				this.mouse.x = ((parseInt(touch.pageX) - this.container.offsetLeft) / this.container
  186. 					.clientWidth) * 2 - 1
  187. 				this.mouse.y = -((parseInt(touch.pageY) - this.container.offsetTop) / this.container
  188. 					.clientHeight) * 2 + 1
  189. 			}
  190.  
  191. 			this.isCanMoveObject = true
  192. 			// console.log('dddd move down ')
  193. 		};
  194.  
  195. 		this.onDocumentTouchEnd = (event) => {
  196. 			//  取消默认动作
  197. 			event.preventDefault();
  198.  
  199. 			// console.log('dddd move up ')
  200. 			this.mouse = {
  201. 				x: -10000,
  202. 				y: -10000
  203. 			}
  204. 			this.curMouseX = null;
  205. 			this.curMouseY = null;
  206. 			this.isCanMoveObject = false
  207. 			//	恢复上一个对象颜色并置空变量
  208. 			if (this.INTERSECTED) this.INTERSECTED.material.color.setHex(this.INTERSECTED.currentHex);
  209. 			this.INTERSECTED = null;
  210. 			//	恢复上一个对象颜色并置空变量
  211. 			if (this.floor) this.floor.material.color.setHex(this.floor.currentHex);
  212. 			this.floor = null;
  213.  
  214. 			if (this.mOnMoveEnd) {
  215. 				this.mOnMoveEnd()
  216. 			}
  217. 		};
  218. 	}
  219.  
  220.  
  221. 	/**
  222. 	 * 射线旋转移动物体功能
  223. 	 * @param {Object} curCamera
  224. 	 */
  225. 	raycasterSelectObject(curCamera) {
  226. 		this.raycaster.setFromCamera(this.mouse, curCamera);
  227.  
  228. 		/**
  229. 		 *   intersectObjects 检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），相交部分和.intersectObject所返回的格式是相同的。
  230. 		 *   objects —— 检测和射线相交的一组物体。
  231. 		 *   recursive —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为false。
  232. 		 *   optionalTarget —— （可选）（可选）设置结果的目标数组。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。
  233. 		 */
  234. 		// var intersects = raycaster.intersectObjects( scene.children );
  235. 		var intersects = this.raycaster.intersectObjects(this.moveObjsDataArray);
  236. 		if (intersects.length > 0) {
  237. 			if (this.INTERSECTED != intersects[0].object) {
  238. 				//emissive：该材质发射的属性
  239. 				if (this.INTERSECTED) this.INTERSECTED.material.color.setHex(this.INTERSECTED.currentHex);
  240. 				//	记录当前对象
  241. 				this.INTERSECTED = intersects[0].object;
  242. 				//	记录当前对象本身颜色
  243. 				this.INTERSECTED.currentHex = this.INTERSECTED.material.color.getHex();
  244. 				//	设置颜色为红色
  245. 				this.INTERSECTED.material.color.setHex(0xffff00);
  246. 				// console.log(" INTERSECTED ", this.INTERSECTED)
  247. 				// console.log(" intersects[ 0 ] ", intersects[ 0 ])
  248. 				if (this.mOnMoveStart) {
  249. 					this.mOnMoveStart()
  250. 				}
  251. 			}
  252. 		} else {
  253. 			//	恢复上一个对象颜色并置空变量
  254. 			// if ( this.INTERSECTED ) this.INTERSECTED.material.color.setHex( this.INTERSECTED.currentHex );
  255. 			// this.INTERSECTED = null;
  256.  
  257. 		}
  258. 	}
  259.  
  260. 	/**
  261. 	 * 射线移动物体
  262. 	 * @param {Object} curCamera
  263. 	 */
  264. 	raycasterMoveObject(curCamera) {
  265. 		this.raycaster.setFromCamera(this.mouse, curCamera);
  266.  
  267. 		/**
  268. 		 *   intersectObjects 检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），相交部分和.intersectObject所返回的格式是相同的。
  269. 		 *   objects —— 检测和射线相交的一组物体。
  270. 		 *   recursive —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为false。
  271. 		 *   optionalTarget —— （可选）（可选）设置结果的目标数组。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。
  272. 		 */
  273. 		// var intersects = raycaster.intersectObjects( scene.children );
  274. 		var intersects = this.raycaster.intersectObjects(this.floorArray);
  275. 		if (intersects.length > 0) {
  276. 			if (this.floor != intersects[0].object) {
  277. 				//emissive：该材质发射的属性
  278. 				if (this.floor) this.floor.material.color.setHex(this.floor.currentHex);
  279. 				//	记录当前对象
  280. 				this.floor = intersects[0].object;
  281.  
  282. 				//	记录当前对象本身颜色
  283. 				this.floor.currentHex = this.floor.material.color.getHex();
  284. 				//	设置颜色为红色
  285. 				this.floor.material.color.setHex(0xff00ff);
  286. 				// console.log(" intersects.point ", intersects[0].point)
  287.  
  288. 			}
  289.  
  290. 			this.floorRaycasterInfo = intersects[0]
  291. 		} else {
  292. 			//	恢复上一个对象颜色并置空变量
  293. 			if (this.floor) this.floor.material.color.setHex(this.floor.currentHex);
  294. 			this.floor = null;
  295. 			this.floorRaycasterInfo = null
  296. 		}
  297. 	}
  298.  
  299.  
  300.  
  301.  
  302.  
  303. 	/**
  304. 	 * 射线辅助线
  305. 	 * @constructor
  306. 	 */
  307. 	rayLinePaintHelper(scene) {
  308. 		const ori = this.raycaster.ray.origin
  309. 		const dir = this.raycaster.ray.direction
  310. 		const dirT = new Vector3(
  311. 			ori.x + dir.x * 10000,
  312. 			ori.y + dir.y * 10000,
  313. 			ori.z + dir.z * 10000
  314. 		)
  315. 		// console.log(' mRaycaster.dirT  ' + dirT.x + ' ' + dirT.y)
  316. 		const material = new LineBasicMaterial({
  317. 			color: 0x0000ff,
  318. 		})
  319.  
  320. 		const points = []
  321. 		points.push(ori)
  322. 		points.push(dirT)
  323.  
  324. 		const geometry = new BufferGeometry().setFromPoints(points)
  325.  
  326. 		const line = new Line(geometry, material)
  327. 		scene.add(line)
  328. 	}
  329.  
  330. 	/**
  331. 	 * 资源释放
  332. 	 */
  333. 	dispose() {
  334. 		this.container = null
  335. 		this.raycaster = null
  336. 		this.mouse = null
  337. 		this.INTERSECTED = null
  338. 		this.canMoveObjectArray = null
  339. 		this.dashLinesBoxArray = null
  340.  
  341. 		this.diningTable = null
  342. 		this.diningChairArray = null
  343.  
  344. 		this.isCanMoveObject = false
  345. 		this.curMouseX = 0
  346. 		this.curMouseY = 0
  347. 	}
  348. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/84974
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号