wallMethod.js 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  1. // const util = require('@/static/utils/util.js');
  2. // const config = require('@/static/config.js');
  3. import wallType from '@/static/wallData.js';
  4. // import requestConfig from '@/services/requestConfig.js';
  5. import * as THREE from 'three';
  6. import TWEEN from 'three/addons/libs/tween.module.js';
  7. export default {
  8. data() {
  9. return {
  10. // gltfUrl:"https://dm.static.elab-plus.com/3d/model/230519/floor01.glb",//模型地址
  11. // gltfName:"地板", //模型名称
  12. // gltfWidth:10, //模型宽度 10米
  13. // gltfHeight:10, //模型高度 10米
  14. }
  15. },
  16. watch: {},
  17. methods: {
  18. // 加载所有墙体模型
  19. // modelItem 变化后的
  20. // wallObj 变化前的
  21. drawModelOld(modelItem, spaceObj, wallObj, isAnimate=false){
  22. let cube = wallObj.obj;
  23. let that = this;
  24. // console.log("模型参数", wallPositionX, wallPositionY, wallScaleX, wallScaleY, lastWallPosition, wallDirection)
  25. console.log("墙体动画", modelItem, spaceObj, wallObj, isAnimate,spaceObj.rightCenter);
  26. if(!wallObj.obj){//新的逻辑
  27. //无变化则不需要启动动画
  28. if(modelItem.wallPositionX == wallObj.wallPositionX
  29. && modelItem.wallPositionY == wallObj.wallPositionY
  30. && modelItem.wallScaleX == wallObj.wallScaleX
  31. && modelItem.wallScaleY == wallObj.wallScaleY){
  32. return false;
  33. }
  34. wallObj.instancedMeshIndexList.forEach(item=>{
  35. let _index = item.instancedMeshIndex;
  36. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  37. let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
  38. let endMatrix = new THREE.Matrix4();//定义一个四维矩阵
  39. instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
  40. let position = new THREE.Vector3();//当前几何体的位置参数
  41. let position1 = new THREE.Vector3();//计算后的位移参数
  42. let scale = new THREE.Vector3();//当前几何体的位置参数
  43. let scale1 = new THREE.Vector3();//计算后的形变参数
  44. let quaternion = new THREE.Quaternion();//四元数
  45. stratMatrix.decompose(position,quaternion,scale);//从当前几何体提取相关参数
  46. // 计算变化后的位置:位移后的位置 是 当前几何体的位置参数 加上 模型移动后的位置偏移量
  47. let x = position.x + modelItem.wallPositionX - wallObj.wallPositionX;
  48. let z = position.z + modelItem.wallPositionY - wallObj.wallPositionY;
  49. // 计算变化后的缩放:缩放后的值 是 当前几何体的缩放比例 同步 模型缩放后缩放比例
  50. let scalex = scale.x * (modelItem.wallScaleX/ wallObj.wallScaleX);
  51. let scaley = scale.z * (modelItem.wallScaleY/ wallObj.wallScaleY);
  52. //x轴放大,则需要移动多一倍的距离
  53. if(modelItem.wallScaleX!=wallObj.wallScaleX){
  54. if(modelItem.wallRotateY>0){//说明旋转了
  55. let _ch = modelItem.wallPositionY - wallObj.wallPositionY;
  56. if(spaceObj.rightCenter){//即形变几何体是右侧不变,由于中心点在左侧,所以要再加一倍变化的值
  57. z = z + _ch;
  58. }else{//形变几何体是左侧不变,由于中心点在左侧,所以要减去变化的值
  59. z = z - _ch;
  60. }
  61. // z = z + modelItem.wallPositionY - wallObj.wallPositionY
  62. }else{
  63. let _ch = modelItem.wallPositionX - wallObj.wallPositionX;
  64. if(spaceObj.rightCenter){
  65. x = x + _ch;
  66. }else{
  67. x = x - _ch;
  68. }
  69. }
  70. }
  71. //Y轴缩小(这里理解是Z轴,映射原因),则需要移动多一倍的距离
  72. //因为几何体的操作原点是左边中心点,不是几何中心点 所以计算的时候需要在多移动一倍
  73. if(modelItem.wallScaleY!=wallObj.wallScaleY){
  74. if(modelItem.wallRotateY>0){//说明旋转了
  75. let _ch = modelItem.wallPositionX - wallObj.wallPositionX;
  76. if(spaceObj.rightCenter){
  77. x = x + _ch;
  78. }else{
  79. x = x - _ch;
  80. }
  81. // x = x + modelItem.wallPositionX - wallObj.wallPositionX;
  82. }else{
  83. let _ch = modelItem.wallPositionY - wallObj.wallPositionY;
  84. if(spaceObj.rightCenter){
  85. z = z + _ch;
  86. }else{
  87. z = z - _ch;
  88. }
  89. // z = z + modelItem.wallPositionY - wallObj.wallPositionY
  90. }
  91. }
  92. position1.set(x, position.y, z);
  93. scale1.set(scalex,scale.y,scaley);
  94. //获取最终的几何体四维变化矩阵
  95. endMatrix = endMatrix.compose(position1,quaternion,scale1);
  96. // console.warn("***drawModel-isAnimate0***",JSON.stringify(position),JSON.stringify(scale),wallObj.name,modelItem,wallObj);
  97. // console.warn(JSON.stringify(stratMatrix.elements),JSON.stringify(endMatrix.elements));
  98. // instancedMesh.instanceMatrix.needsUpdate = true;
  99. // instancedMesh.setMatrixAt(item.instancedAtIndex,endMatrix);//更新几何体的世界矩阵
  100. var tween = new TWEEN.Tween(stratMatrix.elements)
  101. .to(endMatrix.elements, 2000)
  102. .easing(TWEEN.Easing.Quadratic.InOut)
  103. .onUpdate((matrixWorld)=> {
  104. let m4 = new THREE.Matrix4();//定义一个四维矩阵
  105. m4.set(...matrixWorld);//注意:四维矩阵的显示和实际计算的行列优先规则不同
  106. instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
  107. instancedMesh.setMatrixAt(item.instancedAtIndex,m4.transpose());//更新几何体的世界矩阵
  108. }).onComplete(()=>{
  109. instancedMesh.setMatrixAt(item.instancedAtIndex,endMatrix);//更新几何体的世界矩阵
  110. this.tweenCameraAnmaChange(false)
  111. });
  112. // 开始动画
  113. tween.start();
  114. this.tweenCameraAnmaChange(true)
  115. })
  116. //更新模型的最新位置,确保计算结果正确
  117. setTimeout(()=>{
  118. let gltfWall = that.gltfWalls.find(gltfWall=>gltfWall.uniId==wallObj.uniId);//判断是否已经添加过
  119. gltfWall.wallPositionX = modelItem.wallPositionX;
  120. gltfWall.wallPositionY = modelItem.wallPositionY;
  121. gltfWall.wallScaleX = modelItem.wallScaleX;
  122. gltfWall.wallScaleY = modelItem.wallScaleY;
  123. gltfWall.wallRotateY = modelItem.wallRotateY;
  124. }, 2000);
  125. }else{
  126. console.warn("***drawModel-isAnimate-2***",JSON.stringify(cube.position),JSON.stringify(cube.scale),modelItem);
  127. var tween = new TWEEN.Tween({
  128. x: cube.position.x,
  129. z: cube.position.z,
  130. sx:cube.scale.x,
  131. sz:cube.scale.z
  132. })
  133. .to({
  134. x: modelItem.wallPositionX,
  135. z: modelItem.wallPositionY,
  136. sx:modelItem.wallScaleX
  137. }, 2000)
  138. .easing(TWEEN.Easing.Quadratic.InOut)
  139. .onUpdate((object)=> {
  140. cube.position.x = object.x;
  141. cube.position.z = object.z;
  142. cube.scale.x = object.sx;
  143. cube.scale.z = object.sz;
  144. }).onComplete(()=>{
  145. this.tweenCameraAnmaChange(false)
  146. });
  147. // 开始动画
  148. tween.start();
  149. this.tweenCameraAnmaChange(true)
  150. }
  151. },
  152. // modelItem 变化后的
  153. // wallObj 变化前的-一面墙下的某一段墙体
  154. drawModel(modelItem, spaceObj, wallObj, isAnimate=false){
  155. let that = this;
  156. //无变化则不需要启动动画
  157. if(modelItem.wallPositionX == wallObj.wallPositionX
  158. && modelItem.wallPositionY == wallObj.wallPositionY
  159. && modelItem.wallScaleX == wallObj.wallScaleX
  160. && modelItem.wallScaleY == wallObj.wallScaleY){
  161. return false;
  162. }
  163. let tx = wallObj.wallPositionX;
  164. let tz = wallObj.wallPositionY;
  165. let scaleX = wallObj.wallScaleX;
  166. let wallWidth = wallObj.wallWidth;//初始的墙体宽度-单位m
  167. //最终形变值
  168. let toPx = modelItem.wallPositionX;
  169. let toPz = modelItem.wallPositionY;
  170. let toScaleX = modelItem.wallScaleX;
  171. if(modelItem.wallType !=0 && parseFloat(modelItem.wallWidth) == 0){
  172. toScaleX = 0
  173. }
  174. if(isAnimate){//需要动画
  175. // console.log("墙体动画----", tx, tz, scaleX,toPx, toPz, toScaleX,);
  176. // console.log("墙体动画----", scaleX, toScaleX, wallObj.wallScaleX, wallObj);
  177. //初始形变值
  178. let spaceInitMatrix = [];//记录下动画创建时的初始变换矩阵
  179. wallObj.instancedMeshIndexList.forEach(item=>{
  180. let _index = item.instancedMeshIndex;
  181. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  182. let startMatrix = new THREE.Matrix4();//定义一个四维矩阵
  183. instancedMesh.getMatrixAt(item.instancedAtIndex,startMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
  184. spaceInitMatrix.push({
  185. index:_index,
  186. matrix:startMatrix.clone(),
  187. })
  188. });
  189. var tween = new TWEEN.Tween({
  190. x: tx,
  191. z: tz,
  192. sx:scaleX,
  193. })
  194. .to({
  195. x: toPx,
  196. z: toPz,
  197. sx:toScaleX,
  198. }, 2000)
  199. .easing(TWEEN.Easing.Quadratic.InOut)
  200. .onUpdate((object)=> {
  201. wallObj.instancedMeshIndexList.forEach(item=>{
  202. let _index = item.instancedMeshIndex;
  203. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  204. let tmp = spaceInitMatrix.find(it=>it.index==_index);
  205. let stratMatrix = tmp.matrix.clone(); //获取初始变换矩阵
  206. // // 计算变化后的位置:位移后的位置 是 当前几何体的位置参数 加上 模型移动后的位置偏移量
  207. let moveX = object.x - tx;
  208. let moveZ = object.z - tz;
  209. let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵
  210. let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵
  211. scaleMatrix.makeScale(object.sx / scaleX,1,1); //获得缩放变化矩阵
  212. panMatrix.makeTranslation(moveX,0,moveZ); //获得平移变化矩阵
  213. stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
  214. instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
  215. instancedMesh.setMatrixAt(item.instancedAtIndex,stratMatrix);//更新几何体的世界矩阵
  216. // console.warn("***drawModel-isAnimate0***",JSON.stringify(position),JSON.stringify(scale),wallObj.name,modelItem,wallObj);
  217. })
  218. }).onComplete(()=>{
  219. this.tweenCameraAnmaChange(false);
  220. let gltfWall = this.gltfWalls.find(gltfWall=>gltfWall.uniId==wallObj.uniId);//判断是否已经添加过
  221. if(gltfWall){
  222. gltfWall.wallPositionX = modelItem.wallPositionX;
  223. gltfWall.wallPositionY = modelItem.wallPositionY;
  224. gltfWall.wallScaleX = modelItem.wallScaleX;
  225. gltfWall.wallScaleY = modelItem.wallScaleY;
  226. gltfWall.wallRotateY = modelItem.wallRotateY;
  227. gltfWall.wallWidth = modelItem.wallWidth;
  228. }else{
  229. console.warn("***changeSpacesAnim-over-wall***", wallObj.uniId,wallObj)
  230. }
  231. // console.warn("***changeSpacesAnim-over-wall***", modelItem)
  232. });
  233. // 开始动画
  234. tween.start();
  235. this.tweenCameraAnmaChange(true)
  236. }else{
  237. // console.log("墙体变化", modelItem, wallObj, wallObj.wallWidth);
  238. wallObj.instancedMeshIndexList.forEach(item=>{
  239. let _index = item.instancedMeshIndex;
  240. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  241. // let tmp = spaceInitMatrix.find(it=>it.index==_index);
  242. // let stratMatrix = tmp.matrix.clone(); //获取初始变换矩阵
  243. let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
  244. instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
  245. // // 计算变化后的位置:位移后的位置 是 当前几何体的位置参数 加上 模型移动后的位置偏移量
  246. let moveX = toPx - tx;
  247. let moveZ = toPz - tz;
  248. let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵
  249. let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵
  250. scaleMatrix.makeScale(toScaleX / scaleX,1,1); //获得缩放变化矩阵
  251. panMatrix.makeTranslation(moveX,0,moveZ); //获得平移变化矩阵
  252. stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
  253. instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
  254. instancedMesh.setMatrixAt(item.instancedAtIndex,stratMatrix);//更新几何体的世界矩阵
  255. // console.warn("***drawModel-isAnimate0***",JSON.stringify(position),JSON.stringify(scale),wallObj.name,modelItem,wallObj);
  256. })
  257. let gltfWall = this.gltfWalls.find(gltfWall=>gltfWall.uniId==wallObj.uniId);//判断是否已经添加过
  258. gltfWall.wallPositionX = modelItem.wallPositionX;
  259. gltfWall.wallPositionY = modelItem.wallPositionY;
  260. gltfWall.wallScaleX = modelItem.wallScaleX;
  261. gltfWall.wallScaleY = modelItem.wallScaleY;
  262. gltfWall.wallRotateY = modelItem.wallRotateY;
  263. gltfWall.wallWidth = modelItem.wallWidth;
  264. gltfWall.lastWallType = 50;
  265. }
  266. },
  267. //预处理需要加载墙体模型的数据-减少模型请求数
  268. preWallData(wallArr){
  269. let realWallArr = [];
  270. wallArr && wallArr.forEach((item, index) => {
  271. item.uniId = Date.now() + index;//唯一标识
  272. //获取墙体对应的gltb模型的相关信息
  273. let modelTypeItem = wallType.find(it=>it.type == item.wallModelData.wallType) //wallType[item.wallModelData.wallType];
  274. let object = realWallArr.find(it=>it.index==item.wallModelData.wallType);
  275. //列表中还没有这个数据
  276. if(!object){
  277. let it = {
  278. url:modelTypeItem.url,
  279. list:[item],
  280. name:modelTypeItem.name,
  281. index:item.wallModelData.wallType,//在模型当中的类型编码
  282. }
  283. realWallArr.push(it)
  284. }else{
  285. object.list.push(item);
  286. }
  287. });
  288. return realWallArr;
  289. },
  290. // 加载墙体模型
  291. loadWallModels(realData, wallList, arrLength,resolve){
  292. var that = this;
  293. if(!realData.url){
  294. console.warn("***模型wallType不存在***",realData);
  295. return false;
  296. }
  297. that.loader.load(realData.url, ( gltf ) => {
  298. that.progress = parseInt(100/arrLength) + that.progress;
  299. if(that.progress>100){
  300. that.progress = 100;
  301. }
  302. this.$store.state.loadingMsg="加载中..." + that.progress+'%';
  303. // console.log("模型加载成功",that.progress,realData,gltf);
  304. // 第一个方案:递归获取模型-并一一实例化,减少渲染次数,提高性能;因为实例化了几何体复用了geometry 和 material
  305. // DrawCall和内存都很低
  306. gltf.scene.traverse((child)=> {
  307. if (child.isMesh && child.visible) {
  308. let instancedMesh = new THREE.InstancedMesh(child.geometry.clone(), child.material.clone(), realData.list.length);
  309. this.instancedMeshList.push(instancedMesh);
  310. //realData 该模型被重复使用时的每一次的形变参数等
  311. realData.list && realData.list.forEach((it,i)=>{
  312. let modelItem = JSON.parse(JSON.stringify(it.wallModelData));
  313. gltf.scene.position.set(modelItem.wallPositionX, 0, modelItem.wallPositionY);
  314. gltf.scene.scale.set(modelItem.wallScaleX, 1, modelItem.wallScaleY);
  315. gltf.scene.rotation.y = modelItem.wallRotateY;
  316. gltf.scene.updateMatrixWorld();//更新世界坐标-这样,子模型也同步更新了
  317. instancedMesh.setMatrixAt(i, child.matrixWorld);
  318. instancedMesh.instanceMatrix.needsUpdate = true;
  319. // instancedMesh.setColorAt(i, child.material.color);
  320. // instancedMesh.instanceColor.needsUpdate = true;
  321. // console.log("***matrixWorld***",child.matrixWorld);
  322. let gltfWall = that.gltfWalls.find(gltfWall=>gltfWall.uniId==it.uniId);//判断是否已经添加过
  323. if(!gltfWall){
  324. let md = {
  325. uniId:it.uniId,//模型实例的唯一标识
  326. spaceId:it.spaceId,
  327. instancedMeshIndexList:[//标识网格实例数组的序号 以及 当前几何体 在网格实例的序号
  328. {instancedMeshIndex:this.instancedMeshList.length-1,instancedAtIndex:i},
  329. ],
  330. // id:child.id,//几何体的id
  331. // name:child.name,//几何体的id
  332. wallPositionX:modelItem.wallPositionX,
  333. wallPositionY:modelItem.wallPositionY,
  334. wallScaleX:modelItem.wallScaleX,
  335. wallScaleY:modelItem.wallScaleY,
  336. wallRotateY:modelItem.wallRotateY,
  337. wallWidth:modelItem.wallWidth,
  338. // lastWallType:51,
  339. wallModelData:modelItem,
  340. wallModelInitData:modelItem, // 保留初始化墙体数据,方便空间变形计算缩放比例
  341. wallDirection:it.wallDirection,
  342. willCurWallType: -1, // 即将成为当前模型,作用于动画加载完替换
  343. lastWallType: -1 // 上一次墙体模型
  344. };
  345. that.gltfWalls.push(md);
  346. }else{
  347. gltfWall.instancedMeshIndexList.push({
  348. instancedMeshIndex:this.instancedMeshList.length-1,instancedAtIndex:i
  349. })
  350. }
  351. })
  352. instancedMesh.userType = "mesh";
  353. instancedMesh.receiveShadow = true;//材质是否接收阴影
  354. that.scene.add(instancedMesh);
  355. }
  356. });
  357. resolve();
  358. });
  359. },
  360. //计算墙体对应位置和形变参数-提前计算
  361. computeWallHandleOld(spaceObj,wallObj){
  362. // let cube = wallObj.obj;
  363. let list = wallObj.wallData;//墙体列表
  364. let scale = 100;
  365. let spaceWallInfo = {wallN:false, wallS:false, wallW:false, wallE:false};
  366. spaceObj.spaceWallInfo = spaceWallInfo;
  367. list.forEach((item)=>{//空间下的四面墙壁
  368. let lastWallPosition = 0;
  369. let wallDirection = item.wallDirection;
  370. item.wallModelData.forEach((modelItem,index)=>{//每个墙壁下的位置计算
  371. // 默认空间中心点
  372. let wallPositionX = spaceObj.centerX / 100;
  373. let wallPositionY = spaceObj.centerY / 100;
  374. let wallRotateY = 0;
  375. let wallHeight = 10;//item.wallHeight // 墙体厚度模型10cm
  376. if(wallDirection=="N"){
  377. wallPositionY = wallPositionY *-1 - spaceObj.spaceHeight / 2 / scale;
  378. let wallHeight2 = wallHeight / 2 / scale;
  379. wallPositionY = wallPositionY + wallHeight2;
  380. spaceWallInfo.wallN = true;
  381. }
  382. else if(wallDirection=="S"){
  383. wallPositionY = wallPositionY *-1 + spaceObj.spaceHeight / 2 / scale;
  384. let wallHeight2 = wallHeight / 2 / scale;
  385. wallPositionY = wallPositionY - wallHeight2;
  386. spaceWallInfo.wallS = true;
  387. }
  388. if(wallDirection=="E"){
  389. // console.log("模型参数", wallPositionX, spaceObj.spaceWidth)
  390. wallPositionY = wallPositionY * -1;
  391. wallPositionX = wallPositionX + spaceObj.spaceWidth / 2 / scale;
  392. let wallHeight2 = wallHeight / 2 / scale;
  393. wallPositionX = wallPositionX - wallHeight2; // 减去墙体本身的厚度
  394. wallRotateY = Math.PI/2; // 东西墙 模型旋转90度
  395. spaceWallInfo.wallE = true;
  396. }else if(wallDirection=="W"){
  397. wallPositionY = wallPositionY *-1;
  398. wallPositionX = wallPositionX - spaceObj.spaceWidth / 2 / scale;
  399. let wallHeight2 = wallHeight / 2 / scale;
  400. wallPositionX = wallPositionX + wallHeight2; // 减去墙体本身的厚度
  401. wallRotateY = Math.PI/2; // 东西墙 模型旋转90度
  402. spaceWallInfo.wallW = true;
  403. }
  404. let wallScaleX = 1;
  405. let wallScaleY = 1;
  406. let modelWidth = 10;
  407. if(modelItem.wallType == '7') {
  408. modelWidth = 150
  409. }else if(modelItem.wallType == '21'){
  410. modelWidth = 100
  411. }else if(modelItem.wallType == '22'){
  412. modelWidth = 200
  413. }else if(modelItem.wallType == '23'){
  414. modelWidth = 300
  415. }else if(modelItem.wallType == '24'){
  416. modelWidth = 400
  417. }else if(modelItem.wallType == '25'){
  418. modelWidth = 500
  419. }else if(modelItem.wallType == '26'){
  420. modelWidth = 600
  421. }
  422. let tmdWidth = modelItem.wallWidth;//记录
  423. // console.log("XXXXXXXXXXXXXXXX", modelWidth, spaceObj)
  424. // 计算墙体的 X Y W H
  425. //说明该面墙壁只使用了一个模型-独占形式
  426. if(modelItem.isStepAsideTopRight == 'true' && modelItem.isStepAsideBottomLeft == 'true'){
  427. if(wallDirection=="S" || wallDirection=="N"){//南北
  428. wallScaleX = spaceObj.spaceWidth / modelWidth;
  429. }else{//东西
  430. wallScaleX = spaceObj.spaceHeight / modelWidth;
  431. }
  432. if((parseInt(modelItem.wallType) >=21 && parseInt(modelItem.wallType) <=26) || parseInt(modelItem.wallType)== 7){
  433. }else{
  434. modelItem.wallWidth = wallScaleX * modelWidth; // 解决模型行拉伸定位问题, 先注释
  435. }
  436. }else{//墙面是多端墙体组合而成的
  437. if(modelItem.isFixedWidth == 'true'){//该墙体锁定宽度-即不可缩放
  438. let wallWidth = modelItem.wallWidth; // 墙体宽度
  439. // console.log("模型的尺寸",wallWidth, spaceObj.spaceWidth, spaceObj.centerX)
  440. //起始墙体-南北从左侧算,东西则从上侧计算
  441. if(modelItem.isStepAsideBottomLeft == 'true' || modelItem.isStepAsideTopRight == 'true'){
  442. if(wallDirection=="S" || wallDirection=="N"){//南北
  443. wallPositionX = spaceObj.centerX - (spaceObj.spaceWidth - wallWidth) / 2;
  444. wallPositionX = wallPositionX / scale; // 转换成m
  445. }else{
  446. wallPositionY = -spaceObj.centerY - (spaceObj.spaceHeight - wallWidth) / 2;
  447. wallPositionY = wallPositionY / scale; // 转换成m
  448. }
  449. }else{
  450. if(wallDirection=="S" || wallDirection=="N"){//南北
  451. wallPositionX = lastWallPosition + (wallWidth / 2 / scale);
  452. }else{
  453. wallPositionY = lastWallPosition + (wallWidth / 2 / scale);
  454. }
  455. }
  456. // console.log("模型的尺寸",wallWidth, wallPositionX)
  457. if(modelItem.wallType == 0){
  458. wallScaleX = modelItem.wallWidth / wallHeight;
  459. }
  460. //计算当前墙体占据的整面墙体的大小-方便下一段墙体的计算
  461. if(wallDirection=="S" || wallDirection=="N"){//南北
  462. lastWallPosition = wallPositionX + wallWidth / 2 / scale;
  463. }else{
  464. lastWallPosition = wallPositionY + wallWidth / 2 / scale;
  465. }
  466. }else{//可变墙体-UE编辑器通常把它放到最后一段墙体
  467. let wallWidth = 0;
  468. //墙体的宽度是计算得出的
  469. if(wallDirection=="S" || wallDirection=="N"){//南北
  470. wallWidth = (spaceObj.centerX + spaceObj.spaceWidth / 2) - lastWallPosition * scale; // 墙体宽度
  471. // console.log("最后一个模型",spaceObj.centerX, spaceObj.spaceWidth / 2, lastWallPosition)
  472. }else{
  473. wallWidth = (-spaceObj.centerY + spaceObj.spaceHeight / 2) - lastWallPosition * scale; // 墙体宽度
  474. }
  475. wallWidth = wallWidth / scale; // cm转换成m
  476. if(modelItem.wallType == 0){
  477. wallScaleX = wallWidth * wallHeight;
  478. if(wallDirection=="S" || wallDirection=="N"){//南北
  479. wallPositionX = lastWallPosition + wallWidth / 2;
  480. }else{
  481. wallPositionY = lastWallPosition + wallWidth / 2;
  482. }
  483. }
  484. modelItem.wallWidth = wallWidth*scale;//确保单位一致
  485. }
  486. }
  487. //计算得出墙体相应的位置和变形属性
  488. modelItem.wallPositionX = wallPositionX;
  489. modelItem.wallPositionY = wallPositionY;
  490. modelItem.wallScaleX = wallScaleX;
  491. modelItem.wallScaleY = wallScaleY;
  492. modelItem.wallRotateY = wallRotateY;
  493. // console.log("XXXXXXXXXXXXXXXX", modelWidth, modelItem)
  494. //新版下,符合条件的不止一个了,因为新版下是以模型里面的几何体为单元,个数较多
  495. this.gltfWalls.forEach(gltfItem=>{
  496. if(gltfItem.spaceId == spaceObj.spaceId
  497. && wallDirection == gltfItem.wallDirection
  498. && modelItem.id == gltfItem.wallModelData.id){
  499. gltfItem.wallModelData = JSON.parse(JSON.stringify(modelItem));
  500. }
  501. })
  502. })
  503. spaceObj.spaceWallInfo = spaceWallInfo;
  504. })
  505. },
  506. // 新计算墙体逻辑
  507. computeWallHandle(oldSpaceObj, spaceObj, wallObj, moveOut, direction){
  508. var that = this;
  509. let list = wallObj.wallData;//墙体列表
  510. let scale = 100;
  511. console.log("墙体数据1",direction, list, moveOut, that.gltfWalls, wallObj);
  512. console.log("旧空间+++", oldSpaceObj.spaceId, oldSpaceObj.centerX, oldSpaceObj.centerY,oldSpaceObj.spaceWidth, oldSpaceObj.spaceHeight);
  513. console.log("新空间+++", spaceObj.spaceId, spaceObj.centerX, spaceObj.centerY,spaceObj.spaceWidth, spaceObj.spaceHeight);
  514. list.forEach((item)=>{//空间下的四面墙壁
  515. let lastWallPosition = 0;
  516. let wallDirection = item.wallDirection;
  517. let spaceSize = 0
  518. let oldSpaceSize = 0
  519. let minWallWidth = 10; // 实墙最小宽度
  520. let wallCount = item.wallModelData.length;
  521. let isCurWall = true;
  522. let isCreateNewWall = false;
  523. let newWallType = null;
  524. if(wallDirection=="N" || wallDirection=="S"){
  525. spaceSize = spaceObj.spaceWidth;
  526. oldSpaceSize = oldSpaceObj.spaceWidth;
  527. }else{
  528. spaceSize = spaceObj.spaceHeight;
  529. oldSpaceSize = oldSpaceObj.spaceHeight;
  530. }
  531. let isComputeWall = true;
  532. if((direction=="S" || direction=="N") && (wallDirection == "S" || wallDirection == "N")){
  533. isComputeWall = false;
  534. }
  535. if((direction=="E" || direction=="W") && (wallDirection == "E" || wallDirection == "W")){
  536. isComputeWall = false;
  537. }
  538. if(wallCount > 2 && isComputeWall){ // 墙体个数,判断是否有墙体模型
  539. const modelItem0 = item.wallModelData[0]; // 固定尺寸实体墙
  540. const modelItem1 = item.wallModelData[1]; // 取出模型的宽度
  541. const modelItem2 = item.wallModelData[2]; // 伸缩实体墙
  542. const leftWallChangeValue = spaceSize - minWallWidth - parseFloat(modelItem1.wallWidth) - parseFloat(modelItem0.wallWidth);
  543. console.log("当前模型的类型信息", modelItem1, leftWallChangeValue)
  544. if(moveOut){ // 放大
  545. // 1.判断是否是从无到有
  546. // 是
  547. // 2 先还原窗户,找到最合适的窗户
  548. // 3 最后还原第一面实体墙
  549. // 否
  550. // 4 找到最合适的窗户
  551. // 5 最后还原第一面实体墙
  552. const curWallType = wallType.find(it=>it.type == modelItem1.wallType)
  553. const wallTypeGroups = wallType.filter(it=>it.group == curWallType.group)
  554. const wallWidth = spaceSize - 2 * minWallWidth;
  555. if(wallWidth > curWallType.width){
  556. newWallType = curWallType;
  557. }
  558. for (let index = 0; index < wallTypeGroups.length; index++) {
  559. const element = wallTypeGroups[index];
  560. if(!newWallType){
  561. if(element.width <= wallWidth){
  562. newWallType = element;
  563. }
  564. }else{
  565. if(element.width <= wallWidth && newWallType.width <= element.width ){
  566. newWallType = element;
  567. }
  568. }
  569. try{
  570. console.log("寻找最大的窗户",index, wallWidth, newWallType.width,element.width)
  571. }catch(e){
  572. console.error("***rrrrr***",e,element,newWallType)
  573. }
  574. }
  575. item.wallModelData[1].wallWidth = newWallType.width;
  576. if(newWallType != curWallType){ // 新模型
  577. console.log("添加新模型")
  578. item.wallModelData[1].willCurWallType = newWallType.type;
  579. item.wallModelData[1].lastWallType = curWallType.type;
  580. isCreateNewWall = true;
  581. }else{
  582. console.log("还原老模型")
  583. }
  584. // 初始化模型的尺寸
  585. const initWallModel = this.gltfWalls.find(it=>{
  586. return it.spaceId == spaceObj.spaceId && it.wallDirection == wallDirection && it.wallModelData.wallType == 0 && it.wallModelData.isFixedWidth == 'true'
  587. })
  588. const item0Width = Math.min((spaceSize - newWallType.width - minWallWidth), initWallModel.wallModelInitData.wallWidth);
  589. item.wallModelData[0].wallWidth = item0Width
  590. console.log("还原第一面墙的宽度", item0Width ,spaceSize, newWallType.width, minWallWidth);
  591. }else{ // 缩小
  592. // 初始化模型的尺寸
  593. const initWallModel = this.gltfWalls.find(it=>{
  594. return it.spaceId == spaceObj.spaceId && it.wallDirection == wallDirection && it.wallModelData.wallType == 0 && it.wallModelData.isFixedWidth == 'true'
  595. })
  596. const firstWallW = initWallModel.wallModelInitData.wallWidth;
  597. // 计算最右边墙体尺寸
  598. const modelItem2W = oldSpaceSize - parseFloat(firstWallW) - parseFloat(modelItem1.wallWidth);
  599. if(modelItem2W > 10){
  600. }
  601. // 计算最右边墙体的比例
  602. const modelItem0Scale = firstWallW / oldSpaceSize;
  603. const modelItem2Scale = modelItem2W / oldSpaceSize;
  604. const modelItem0NewW = modelItem0Scale * spaceSize;
  605. const modelItem2NewW = modelItem2Scale * spaceSize;
  606. console.log("墙体模型比例数据", oldSpaceSize,spaceSize, initWallModel.wallModelInitData.wallWidth,modelItem0Scale, modelItem0NewW, modelItem2NewW);
  607. if(leftWallChangeValue < 0){
  608. const newWallWidth = Math.max(parseFloat(modelItem0.wallWidth) + leftWallChangeValue, minWallWidth);
  609. item.wallModelData[0].wallWidth = Math.floor(newWallWidth)
  610. console.log("缩放左边实体墙",spaceObj.spaceId, newWallWidth, leftWallChangeValue);
  611. if(modelItem1.wallWidth > spaceSize - 2 * minWallWidth){
  612. console.log("无法放置墙体模型", newWallWidth, leftWallChangeValue);
  613. // 寻找合适的模型
  614. const curWallType = wallType.find(it=>it.type == modelItem1.wallType)
  615. // 可显示的最大模型
  616. if(curWallType){
  617. const wallTypeGroups = wallType.filter(it=>it.group == curWallType.group)
  618. const wallWidth = spaceSize - 2 * minWallWidth;
  619. for (let index = 0; index < wallTypeGroups.length; index++) {
  620. const element = wallTypeGroups[index];
  621. if(!newWallType){
  622. if(element.width <= wallWidth && element.width <= curWallType.width){
  623. newWallType = element;
  624. }
  625. }else{
  626. if(newWallType.width <= element.width && element.width <= wallWidth && element.width <= curWallType.width){
  627. newWallType = element;
  628. }
  629. }
  630. }
  631. console.log("是否需要替换墙体模型",spaceObj.spaceHeight, wallDirection, newWallType, curWallType.type)
  632. if(newWallType){
  633. if(curWallType.type != newWallType.type){
  634. console.log("最合适的墙体模型", spaceObj.spaceId, wallWidth, direction, wallDirection)
  635. item.wallModelData[1].wallWidth = newWallType.width;
  636. item.wallModelData[1].willCurWallType = newWallType.type;
  637. item.wallModelData[1].lastWallType = curWallType.type;
  638. item.wallModelData[0].wallWidth = Math.floor((spaceSize - newWallType.width) / 2)
  639. isCurWall = false;
  640. // 添加新模型
  641. const index = this.gltfWalls.findIndex(it=>{
  642. // console.log("最合适的墙体模型", it.spaceId, spaceObj.spaceId, it.wallDirection, wallDirection, newWallType.wallType, it.wallModelData.wallType)
  643. return it.spaceId == spaceObj.spaceId && it.wallDirection == wallDirection && newWallType.wallType == it.wallModelData.wallType
  644. })
  645. if(index!=-1){
  646. console.log("不需要加载新模型", spaceObj.spaceId, direction, wallDirection)
  647. isCreateNewWall = false;
  648. }else{
  649. console.log("需要加载新模型", index)
  650. isCreateNewWall = true;
  651. }
  652. }else{
  653. console.log("保持当前模型的尺寸", spaceObj.spaceHeight, direction, wallDirection)
  654. item.wallModelData[1].wallWidth = 0.0001;
  655. item.wallModelData[1].willCurWallType = -1;
  656. }
  657. }else{
  658. console.log("没有合适的模型替换", spaceObj.spaceId, direction, wallDirection)
  659. item.wallModelData[1].wallWidth = 0.0001;
  660. item.wallModelData[1].willCurWallType = -1;
  661. }
  662. }
  663. }else{
  664. console.log("不需要添加");
  665. }
  666. }else{
  667. item.wallModelData[0].wallWidth = Math.floor(modelItem0NewW)
  668. console.log("等比缩放");
  669. }
  670. }
  671. }else{
  672. console.log("没有缩放墙体")
  673. }
  674. // 判断是否有下一级
  675. item.wallModelData.forEach((modelItem,index)=>{//每个墙壁下的位置计算
  676. // 默认空间中心点
  677. let wallPositionX = spaceObj.centerX / 100;
  678. let wallPositionY = spaceObj.centerY / 100;
  679. let wallRotateY = 0;
  680. let wallHeight = 10;//item.wallHeight // 墙体厚度模型10cm
  681. if(wallDirection=="N"){
  682. wallPositionY = wallPositionY *-1 - spaceObj.spaceHeight / 2 / scale;
  683. let wallHeight2 = wallHeight / 2 / scale;
  684. wallPositionY = wallPositionY + wallHeight2;
  685. }
  686. else if(wallDirection=="S"){
  687. wallPositionY = wallPositionY *-1 + spaceObj.spaceHeight / 2 / scale;
  688. let wallHeight2 = wallHeight / 2 / scale;
  689. wallPositionY = wallPositionY - wallHeight2;
  690. }
  691. if(wallDirection=="E"){
  692. // console.log("模型参数", wallPositionX, spaceObj.spaceWidth)
  693. wallPositionY = wallPositionY * -1;
  694. wallPositionX = wallPositionX + spaceObj.spaceWidth / 2 / scale;
  695. let wallHeight2 = wallHeight / 2 / scale;
  696. wallPositionX = wallPositionX - wallHeight2; // 减去墙体本身的厚度
  697. wallRotateY = Math.PI/2; // 东西墙 模型旋转90度
  698. }else if(wallDirection=="W"){
  699. wallPositionY = wallPositionY *-1;
  700. wallPositionX = wallPositionX - spaceObj.spaceWidth / 2 / scale;
  701. let wallHeight2 = wallHeight / 2 / scale;
  702. wallPositionX = wallPositionX + wallHeight2; // 减去墙体本身的厚度
  703. wallRotateY = Math.PI/2; // 东西墙 模型旋转90度
  704. }
  705. let wallScaleX = 1;
  706. let wallScaleY = 1;
  707. let modelWidth = 10;
  708. if(modelItem.wallType == '7') {
  709. modelWidth = 150
  710. }else if(modelItem.wallType == '21'){
  711. modelWidth = 100
  712. }else if(modelItem.wallType == '22'){
  713. modelWidth = 200
  714. }else if(modelItem.wallType == '23'){
  715. modelWidth = 300
  716. }else if(modelItem.wallType == '24'){
  717. modelWidth = 400
  718. }else if(modelItem.wallType == '25'){
  719. modelWidth = 500
  720. }else if(modelItem.wallType == '26'){
  721. modelWidth = 600
  722. }
  723. let tmdWidth = modelItem.wallWidth;//记录
  724. // console.log("XXXXXXXXXXXXXXXX", modelWidth, spaceObj)
  725. let wallWidth = 0; // 墙体宽度
  726. // 计算墙体的 X Y W H
  727. //说明该面墙壁只使用了一个模型-独占形式
  728. if(modelItem.isStepAsideTopRight == 'true' && modelItem.isStepAsideBottomLeft == 'true'){
  729. if(wallDirection=="S" || wallDirection=="N"){//南北
  730. wallScaleX = spaceObj.spaceWidth / modelWidth;
  731. }else{//东西
  732. wallScaleX = spaceObj.spaceHeight / modelWidth;
  733. }
  734. if((parseInt(modelItem.wallType) >=21 && parseInt(modelItem.wallType) <=26) || parseInt(modelItem.wallType)== 7){
  735. }else{
  736. modelItem.wallWidth = wallScaleX * modelWidth; // 解决模型行拉伸定位问题, 先注释
  737. }
  738. }else{//墙面是多端墙体组合而成的
  739. if(modelItem.isFixedWidth == 'true'){//该墙体锁定宽度-即不可缩放
  740. wallWidth = modelItem.wallWidth; // 墙体宽度
  741. // console.log("模型的尺寸",wallWidth, spaceObj.spaceWidth, spaceObj.centerX)
  742. //起始墙体-南北从左侧算,东西则从上侧计算
  743. if(modelItem.isStepAsideBottomLeft == 'true' || modelItem.isStepAsideTopRight == 'true'){
  744. if(wallDirection=="S" || wallDirection=="N"){//南北
  745. wallPositionX = spaceObj.centerX - (spaceObj.spaceWidth - wallWidth) / 2;
  746. wallPositionX = wallPositionX / scale; // 转换成m
  747. }else{
  748. wallPositionY = -spaceObj.centerY - (spaceObj.spaceHeight - wallWidth) / 2;
  749. wallPositionY = wallPositionY / scale; // 转换成m
  750. }
  751. }else{
  752. if(wallDirection=="S" || wallDirection=="N"){//南北
  753. wallPositionX = lastWallPosition + (wallWidth / 2 / scale);
  754. }else{
  755. wallPositionY = lastWallPosition + (wallWidth / 2 / scale);
  756. }
  757. }
  758. // console.log("模型的尺寸",wallWidth, wallPositionX)
  759. if(modelItem.wallType == 0){
  760. wallScaleX = modelItem.wallWidth / wallHeight;
  761. }else{
  762. console.log("墙体模型的缩放", spaceObj.spaceId,wallDirection, modelItem);
  763. // if(!moveOut){
  764. const curWallType = wallType.find(it=>it.type == modelItem.wallType)
  765. wallScaleX = modelItem.wallWidth / curWallType.width;
  766. console.log("墙体模型的缩小", wallScaleX);
  767. // }else{
  768. // console.log("墙体模型的放大", wallScaleX);
  769. // }
  770. }
  771. //计算当前墙体占据的整面墙体的大小-方便下一段墙体的计算
  772. if(wallDirection=="S" || wallDirection=="N"){//南北
  773. lastWallPosition = wallPositionX + wallWidth / 2 / scale;
  774. }else{
  775. lastWallPosition = wallPositionY + wallWidth / 2 / scale;
  776. }
  777. // wallPositionY = 1;
  778. }else{//可变墙体-UE编辑器通常把它放到最后一段墙体
  779. wallWidth = 0;
  780. //墙体的宽度是计算得出的
  781. if(wallDirection=="S" || wallDirection=="N"){//南北
  782. wallWidth = (spaceObj.centerX + spaceObj.spaceWidth / 2) - lastWallPosition * scale; // 墙体宽度
  783. // console.log("最后一个模型",spaceObj.centerX, spaceObj.spaceWidth / 2, lastWallPosition)
  784. }else{
  785. wallWidth = (-spaceObj.centerY + spaceObj.spaceHeight / 2) - lastWallPosition * scale; // 墙体宽度
  786. }
  787. wallWidth = wallWidth / scale; // cm转换成m
  788. if(modelItem.wallType == 0){
  789. wallScaleX = wallWidth * wallHeight;
  790. if(wallDirection=="S" || wallDirection=="N"){//南北
  791. wallPositionX = lastWallPosition + wallWidth / 2;
  792. }else{
  793. wallPositionY = lastWallPosition + wallWidth / 2;
  794. }
  795. }
  796. modelItem.wallWidth = wallWidth*scale;//确保单位一致
  797. // wallPositionY = 1;
  798. }
  799. }
  800. console.log("移动墙体模型-空间信息", spaceObj.spaceWidth, spaceObj.centerX, spaceObj.centerY, spaceObj)
  801. console.log("移动墙体模型-墙体信息",spaceObj.spaceId,direction, wallDirection, modelItem.wallType, wallWidth, this.wallList)
  802. //计算得出墙体相应的位置和变形属性
  803. modelItem.wallPositionX = wallPositionX;
  804. modelItem.wallPositionY = wallPositionY;
  805. modelItem.wallScaleX = wallScaleX;
  806. modelItem.wallScaleY = wallScaleY;
  807. modelItem.wallRotateY = wallRotateY;
  808. modelItem.wallWidth = wallWidth;
  809. // 更新数据
  810. if(isComputeWall || direction == wallDirection){
  811. this.gltfWalls.forEach(gltfItem=>{
  812. if(gltfItem.spaceId == spaceObj.spaceId && wallDirection == gltfItem.wallDirection && modelItem.id == gltfItem.wallModelData.id){
  813. console.log("墙体更新", gltfItem.spaceId, spaceObj.spaceId, wallDirection, gltfItem.wallDirection, modelItem.id, gltfItem.wallModelData.id, isComputeWall, direction)
  814. gltfItem.wallModelData = JSON.parse(JSON.stringify(modelItem));
  815. gltfItem.willCurWallType = modelItem.willCurWallType
  816. if(gltfItem.wallModelData.wallType != 0){
  817. gltfItem.isDidWall = isCreateNewWall;
  818. }
  819. }
  820. })
  821. }
  822. console.log("移动墙体模型-墙体信息++++++++",spaceObj.spaceId, direction, wallDirection, isComputeWall, modelItem)
  823. //数据更新到wallList中,确保数据一致性
  824. this.wallList.forEach(wallItem=>{
  825. const walls = JSON.parse(wallItem.wallJson);
  826. // console.log("墙体数据2----------", walls, modelItem);
  827. walls.wallData.forEach(wall=>{
  828. wall.wallModelData.forEach(wallmodel=>{
  829. //从wallList找到这段墙体
  830. if(wall.wallDirection == wallDirection && wallmodel.id == modelItem.id && walls.spaceId == spaceObj.spaceId){
  831. if(wallmodel.wallType == 0 && wallmodel.isFixedWidth == 'true'){
  832. wallmodel.wallWidth = modelItem.wallWidth;
  833. console.log("墙体数据31----实体墙------",spaceObj.spaceId, modelItem.wallWidth, modelItem);
  834. }
  835. if(wallmodel.wallType != 0){
  836. wallmodel.wallWidth = modelItem.wallWidth;
  837. const curWallType = wallType.find(it=>it.type == modelItem.willCurWallType)
  838. if(curWallType){
  839. wallmodel.wallType = curWallType.type;
  840. }
  841. }
  842. }
  843. })
  844. })
  845. wallItem.wallJson = JSON.stringify(walls);
  846. })
  847. })
  848. })
  849. // console.log("墙体数据2", this.gltfWalls, this.wallList);
  850. },
  851. //更新墙体模型的位置
  852. updateAllWallHandle(){//spaceList gltfSpaces
  853. console.warn("***updateAllWallHandle***")
  854. this.spaceList.forEach((spaceObj)=>{
  855. // 根据空间,更新前提数据
  856. let wallObj = this.wallList.find((item)=>{
  857. return item.id == spaceObj.wallId;
  858. })
  859. if(wallObj){
  860. let element = JSON.parse(wallObj.wallJson);
  861. // console.warn("****wallObj**",element)
  862. this.computeWallHandleOld(spaceObj, element); // 重新计算-并把空间的计算结果同步到gltfWalls中
  863. }
  864. })
  865. for (let index = 0; index < this.gltfWalls.length; index++) {
  866. const element = this.gltfWalls[index];
  867. this.drawModel(element.wallModelData, null, element, false)
  868. }
  869. },
  870. loadChangeWallModels(item, resolve){
  871. var that = this;
  872. let wallObj = item;
  873. // console.log("处理模型替换", item.wallModelData);
  874. if(item.wallModelData.wallWidth == 0){ // 模型隐藏
  875. return resolve();
  876. }
  877. if(item.wallModelData.willCurWallType && item.wallModelData.willCurWallType != -1){
  878. const curWallType = wallType.find(it=>it.type == item.wallModelData.willCurWallType)
  879. // console.log("加载的模型", item, item.wallModelData.willCurWallType, curWallType);
  880. if(!curWallType){
  881. return resolve();
  882. }
  883. that.loader.load(curWallType.url, ( gltf ) => {
  884. // 旧的模型
  885. let spaceInitMatrix = [];//记录下动画创建时的初始变换矩阵
  886. wallObj.instancedMeshIndexList.forEach(it=>{
  887. let _index = it.instancedMeshIndex;
  888. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  889. let startMatrix = new THREE.Matrix4();//定义一个四维矩阵
  890. instancedMesh.getMatrixAt(it.instancedAtIndex,startMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
  891. spaceInitMatrix.push({
  892. index:_index,
  893. matrix:startMatrix.clone(),
  894. })
  895. });
  896. wallObj.instancedMeshIndexList.forEach(it=>{
  897. let _index = it.instancedMeshIndex;
  898. let instancedMesh = this.instancedMeshList[_index];//获取网格实例
  899. let tmp = spaceInitMatrix.find(it=>it.index==_index);
  900. let stratMatrix = tmp.matrix.clone(); //获取初始变换矩阵
  901. // // 计算变化后的位置:位移后的位置 是 当前几何体的位置参数 加上 模型移动后的位置偏移量
  902. let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵
  903. let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵
  904. scaleMatrix.makeScale(0,0,0); //获得缩放变化矩阵
  905. panMatrix.makeTranslation(0,0,0); //获得平移变化矩阵
  906. stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
  907. instancedMesh.instanceMatrix.needsUpdate = true;//更新之前,必须开启开关
  908. instancedMesh.setMatrixAt(it.instancedAtIndex,stratMatrix);//更新几何体的世界矩阵
  909. })
  910. let newWallObj = JSON.parse(JSON.stringify(item))
  911. const wallType = item.wallModelData.willCurWallType;
  912. console.log("重新组合新模型数据", newWallObj, item.wallModelData, wallType);
  913. newWallObj.willCurWallType = -1;
  914. let wallModelData = newWallObj.wallModelData;
  915. wallModelData.wallScaleX = 1;
  916. wallModelData.wallScaleY = 1;
  917. wallModelData.lastWallType = item.wallModelData.wallType;
  918. wallModelData.wallType = wallType;
  919. wallModelData.willCurWallType = -1;
  920. newWallObj.wallModelData = wallModelData;
  921. newWallObj.wallScaleX = 1;
  922. newWallObj.wallScaleY = 1;
  923. let realWallArr = this.preWallData([newWallObj]);
  924. const realData = realWallArr[0];
  925. // 新的模型
  926. gltf.scene.traverse((child)=> {
  927. if (child.isMesh && child.visible) {
  928. let instancedMesh = new THREE.InstancedMesh(child.geometry.clone(), child.material.clone(), realData.list.length);
  929. this.instancedMeshList.push(instancedMesh);
  930. //realData 该模型被重复使用时的每一次的形变参数等
  931. realData.list && realData.list.forEach((it,i)=>{
  932. gltf.scene.position.set(item.wallPositionX, 0, item.wallPositionY);
  933. gltf.scene.scale.set(1, 1, 1);
  934. gltf.scene.rotation.y = item.wallRotateY;
  935. gltf.scene.updateMatrixWorld();//更新世界坐标-这样,子模型也同步更新了
  936. instancedMesh.setMatrixAt(i, child.matrixWorld);
  937. instancedMesh.instanceMatrix.needsUpdate = true;
  938. // instancedMesh.setColorAt(i, child.material.color);
  939. // instancedMesh.instanceColor.needsUpdate = true;
  940. // console.log("***matrixWorld***",child.matrixWorld);
  941. let gltfWall = that.gltfWalls.find(gltfWall=>gltfWall.uniId==it.uniId);//判断是否已经添加过
  942. if(!gltfWall){
  943. let md = {
  944. uniId:it.uniId,//模型实例的唯一标识
  945. spaceId:it.spaceId,
  946. instancedMeshIndexList:[//标识网格实例数组的序号 以及 当前几何体 在网格实例的序号
  947. {instancedMeshIndex:this.instancedMeshList.length-1,instancedAtIndex:i},
  948. ],
  949. // id:child.id,//几何体的id
  950. // name:child.name,//几何体的id
  951. wallPositionX:item.wallPositionX,
  952. wallPositionY:item.wallPositionY,
  953. wallScaleX:1,
  954. wallScaleY:1,
  955. wallRotateY:item.wallRotateY,
  956. wallWidth:item.wallWidth,
  957. wallModelData:wallModelData,
  958. wallModelInitData:item, // 保留初始化墙体数据,方便空间变形计算缩放比例
  959. wallDirection:it.wallDirection,
  960. willCurWallType: -1, // 即将成为当前模型,作用于动画加载完替换
  961. lastWallType:wallModelData.lastWallType // 上一次墙体模型
  962. };
  963. that.gltfWalls.push(md);
  964. }else{
  965. gltfWall.instancedMeshIndexList.push({
  966. instancedMeshIndex:this.instancedMeshList.length-1,instancedAtIndex:i
  967. })
  968. }
  969. })
  970. instancedMesh.userType = "mesh";
  971. that.scene.add(instancedMesh);
  972. }
  973. });
  974. resolve();
  975. })
  976. }
  977. resolve();
  978. }
  979. }
  980. }