webgl_rxdz.vue 100 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663
  1. <template src="./webgl_rxdz.html"></template>
  2. <script>
  3. import * as THREE from 'three';
  4. import Stats from 'three/addons/libs/stats.module.js';
  5. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  6. import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  7. import TWEEN from 'three/addons/libs/tween.module.js';
  8. import router from "@/router";
  9. import {
  10. setStorage,
  11. getStorage,
  12. } from '@/utils/localStorage';
  13. var requestId = "";
  14. const util = require('@/utils/util.js').default;
  15. // const config = require('@/services/urlConfig.js');
  16. import wallType from '@/static/wallData.js';
  17. // import modelData from '@/webgl/static/layoutModelData.js';
  18. // import requestConfig from '@/services/requestConfig.js';
  19. // import viewShell from'@/webgl/components/newBottomCom/viewShell/viewShell.vue';
  20. // import * as BufferGeometryUtils from '@/webgl/jsm/utils/BufferGeometryUtils.js';
  21. import screenshot from '@/mixins/screenshot.js';
  22. import floorMethod from '@/mixins/floorMethod.js';
  23. import wallMethod from '@/mixins/wallMethod.js';
  24. import loadModel from '@/mixins/loadModel.js';
  25. import commonPageMethod from '@/mixins/commonPageMethod.js';
  26. import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
  27. export default {
  28. name:"webgl_rxdz",
  29. components:{viewShell},
  30. mixins:[screenshot,floorMethod,wallMethod,loadModel,commonPageMethod],
  31. /**
  32. * 页面的初始数据
  33. */
  34. data() {
  35. return {
  36. pvCurPageName: "home_show",
  37. locusBehaviorName: "主界面",
  38. pvCurPageParams: null,
  39. houseId: "",
  40. pvId: 'p_2cmina_23080401',
  41. canvas:null,
  42. navbar: {
  43. showCapsule: 0,
  44. title: '',
  45. titleColor: '#000',
  46. navPadding: 0,
  47. navPaddingBg:'transparent',
  48. navBarColor: 'transparent',
  49. navBackColor: 'transparent',
  50. haveCallback: false,
  51. fromShare: false,
  52. fromProject: 0,
  53. shareToken: "",
  54. pageName: this.pvCurPageName,
  55. },
  56. id:'232',// 户型编号
  57. spaceList:[], // 空间列表
  58. spaceListBackup:[], // 空间列表原始尺寸备份,用于墙体比例计算
  59. gltfSpaces:[], // 场景中地板模型数组
  60. gltfSpaceRoofs:[], // 屋顶模型数组
  61. curSpaceObj:null, // 当前选中的空间
  62. // curSpaceIndex:-1, // 当前选中的空间索引
  63. curWallDirection:"", // 当前选中的墙面
  64. curWallValue:0, // 当前墙面的滑动值
  65. curWallMaxValue:300,
  66. curWallHidden:false, // 当前墙面的状态
  67. wallIds:[], // 空间墙体id
  68. wallList:[], // 墙体数据
  69. gltfWalls:[], // 场景中墙体模型数组
  70. gltfAutoWalls:[],// 空间自动补墙模型数组
  71. // lastWallPosition:0, // 当面墙中墙体模型的开始位置
  72. tempSpaceList:[],// 全部空间临时数组,寻找关联空间,递归使用
  73. leftSpaces:[], // 移动空间左边数组
  74. rightSpaces:[],// 移动空间右边数组
  75. changeSpaces:[],// 尺寸变化涉及到的全部空间
  76. loader:null,
  77. scene:null,
  78. sky:null,
  79. camera:null,
  80. houseList:[], //当前户型所有的户型详情,可以切换
  81. curHouseType: null, //当前选中的户型类型
  82. curHouseName:'',//当前选中的户型类型名称
  83. curHouseFloor: null, //当前选中的户型楼层
  84. curHouseObj: null,
  85. controlStarPosition : { x:0, y:0, z:0}, //控制器初始位置
  86. cameraStarPosition : { x:0, y:20, z:0} ,//摄像头初始位置
  87. // cameraLastPosition: null, //摄像头上一次移动到的位置
  88. // controlLastPosition: null, //观察点上一次移动到的位置
  89. canvasHeight:200, //canvas视图的高度-计算得出
  90. chooseMesh:null,//标记鼠标拾取到的mesh
  91. // chooseMeshColor:'', //拾取到的mesh的原始颜色;
  92. chooseWallMeshColor:'', // 拾取墙体原始颜色
  93. curWallArr:[], // 当前空间选中墙面的墙体模型
  94. isManyou: false, //当前是否处在漫游状态
  95. pageShowIndex: 2, // 默认户型列表页面
  96. aleadyLoaderModel:[], //已经加载的墙体元数据模型列表
  97. // fontLabelGroup: [],
  98. shottingImg: [],
  99. progress:1, //进度条
  100. myLoadingStatus:false,
  101. // textGeoList:[],
  102. repeatFlag:false, //重复点击
  103. skyPlan: null, // 天空盒子
  104. instancedMeshList: [],
  105. lableItem:[],
  106. showLables:false,
  107. loadOver:false,
  108. voiceMaskShow:false, //录音时的蒙层是否显示
  109. minspace1: null,
  110. minspace2: null,
  111. minspace3: null,
  112. minspace4 : null,
  113. spaces1 : [],
  114. spaces2 : [],
  115. spaces3 : [],
  116. spaces4 : [],
  117. layoutIds:[], // 空间墙体id
  118. layoutLists:[], // 墙体数据
  119. gltfLayouts:[], // 场景中墙体模型数组
  120. screenshotResolve:null,
  121. curLayoutStruct:null,//当前户型大类下所有楼层数据-用于提交
  122. overChange:false, //是否形变中
  123. isIOS:false, //是否ios手机。默认不是
  124. currentChangeSpaceId:null, //当前变化的空间id
  125. styleType:1,
  126. sumArea:0, //总面积
  127. changeArea:0, //当次变化的面积
  128. fixedArea:0, //初始面积值
  129. layoutArea:0, //总面积
  130. }
  131. },
  132. beforeDestroy() {
  133. cancelAnimationFrame(requestId, this.canvas)
  134. this.worker && this.worker.terminate()
  135. if (this.renderer instanceof THREE.WebGLRenderer) {
  136. // 遍历场景中的所有子对象,找到类型为Mesh的对象并移除
  137. let deleList = this.scene.children.filter(object=>{
  138. if (object instanceof THREE.Mesh) {
  139. return object
  140. }
  141. })
  142. if(deleList && deleList.length>0){
  143. this.scene.remove(...deleList);
  144. }
  145. this.scene.traverse(function(object) {
  146. if (object instanceof THREE.Mesh) {
  147. if(object.geometry && typeof(object.geometry.dispose)=='function'){
  148. object.geometry.dispose();
  149. }
  150. if(object.material && typeof(object.material.dispose)=='function'){
  151. object.material.dispose();
  152. }
  153. if(object.texture && typeof(object.texture.dispose)=='function'){
  154. object.texture.dispose();
  155. }
  156. }
  157. });
  158. this.renderer.clear();
  159. this.renderer.dispose();
  160. this.renderer.forceContextLoss();
  161. this.renderer.context = null;
  162. this.renderer.domElement = null;
  163. this.renderer = null;;
  164. this.clearEvent()
  165. }
  166. this.gltfWalls = [];
  167. this.gltfSpaces = [];
  168. this.gltfSpaceRoofs = [];
  169. this.gltfLayouts = [];
  170. this.instancedMeshList = [];
  171. this.instancedSpaceMeshList = [];
  172. this.lableItem = [];
  173. this.instancedFurList = [];
  174. this.wallList = [];
  175. TWEEN && TWEEN.removeAll();//清除所有的tween;
  176. console.warn("***beforeDestroy-webgl_rxdz***");
  177. },
  178. mounted() {
  179. console.log("***onLoad-webgl_rxdz***", this.$route.query);
  180. let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  181. this.isIOS = isIOS;
  182. var that = this;
  183. this.houseId = this.$store.state.houseId || '';
  184. this.childLayout = this.$route.query.childLayout || 0;//4-测试户型
  185. let screenWidth = window.screen.width;
  186. let screenHeight = window.screen.height;
  187. if(window.innerWidth && window.screen.width){
  188. screenWidth = Math.min(window.innerWidth,window.screen.width)
  189. }
  190. if(window.innerHeight && window.screen.height){
  191. screenHeight = Math.min(window.innerHeight,window.screen.height)
  192. }
  193. let unit = screenWidth / 750;//单位rpm 对应 px 的值
  194. that.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
  195. const container = this.$refs.webgl;
  196. const canvas3d = this.canvas = this.$refs.glcanvas;
  197. let camera = null, renderer = null, controls=null;
  198. // let trackballControls = null;
  199. console.warn("***loader0***",this.loader)
  200. let loader = null;
  201. loader = this.loader = new GLTFLoader();
  202. this.getInitData();//请求获取页面模型数据等
  203. let scene = this.scene = new THREE.Scene();
  204. let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
  205. let isUserContorl = false;
  206. let tweenCameraAnma = false; //表示当前是否处在动画过程中
  207. let needRender = false; //是否需要渲染 false表示不需要渲染;true 表示需要渲染
  208. let frustumSize = 30;//正交相机的视窗宽度距离
  209. let stats;
  210. init();
  211. // render();
  212. // this.$refs.myLoading.showLoading("加载中..." + this.progress+"%")
  213. // this.myLoadingStatus = true;
  214. this.progress = 1;
  215. this.clearEvent = clearEvent;
  216. this.attendEvent = attendEvent;
  217. this.updateLables = updateLables;
  218. this.enableRenderHandle = enableRender;
  219. this.tweenCameraAnmaChange = tweenCameraAnmaChange;
  220. this.gradientResize = gradientResize;
  221. this.moveMeshCenterHandle = moveMeshCenterHandle;
  222. this.starRender = starRender;//对外暴露启动渲染的方法
  223. this.stopRender = stopRender;//对外暴露停止渲染的方法
  224. this.cameraInit = cameraInit;
  225. this.resetControl = resetControl;
  226. function init() {
  227. scene.background = new THREE.Color("#FFFFFF");
  228. // scene.environment = new THREE.Color("#F2F2F2");
  229. // 创建相机位置-投影相机
  230. camera = new THREE.PerspectiveCamera( 80, screenWidth / that.canvasHeight, 0.1, 10000 );
  231. // let aspect = screenWidth / that.canvasHeight;
  232. // camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1,1000);
  233. camera.up.set(0, 1, 0);//俯视状态,将相机的up向量设置为z轴负方向
  234. scene.add(camera);
  235. that.camera = camera;
  236. // 辅助方格
  237. // const axesHelper = new THREE.AxesHelper( 50 );
  238. // scene.add( axesHelper );
  239. // const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
  240. // gridHelper.position.y = 0;
  241. // gridHelper.position.x = 0;
  242. // scene.add(gridHelper);
  243. // 环境光会均匀的照亮场景中的所有物体
  244. const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
  245. scene.add(ambientLight);
  246. //平行光
  247. const light = new THREE.DirectionalLight(0xFFF8E5, 3);
  248. light.position.set(-3, 9, 3); //default; light shining from top
  249. light.castShadow = true; // default false
  250. // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
  251. light.shadow.camera.left = -100; // default
  252. light.shadow.camera.right = 100; // default
  253. light.shadow.camera.top = 100; // default
  254. light.shadow.camera.bottom = -100; // default
  255. light.shadow.mapSize.width = 8192; // default
  256. light.shadow.mapSize.height = 8192; // default
  257. // light.shadow.camera.near = 0.1; // default
  258. // light.shadow.camera.far = 500; // default
  259. // light.shadow.bias = -0.01;
  260. // light.shadow.radius = 1;
  261. // light.shadow.darkness = 1; // 设置阴影强度为0.5
  262. scene.add(light);
  263. // const helper = new THREE.CameraHelper( light.shadow.camera );
  264. // scene.add(helper);
  265. // 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
  266. // const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
  267. // camera.add( pointLight );
  268. //antialias 这个值得设置为false,不然IOS上截图会失效
  269. renderer = that.renderer = new THREE.WebGLRenderer({
  270. canvas:canvas3d,
  271. alpha: true,
  272. antialias:false,
  273. // 如果想保存three.js canvas画布上的信息,注意设置preserveDrawingBuffer
  274. preserveDrawingBuffer: true,
  275. });
  276. renderer.shadowMap.enabled = true;//产生阴影
  277. renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
  278. renderer.outputEncoding = THREE.sRGBEncoding;
  279. renderer.outputColorSpace = THREE.SRGBColorSpace;
  280. // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
  281. renderer.toneMapping = THREE.NoToneMapping;//色调映射
  282. renderer.physicallyCorrectLights = true;//关键参数,模拟物理光照影响,必须设置为true
  283. renderer.setPixelRatio( window.devicePixelRatio );
  284. renderer.setSize( screenWidth, that.canvasHeight );
  285. container.appendChild( renderer.domElement );
  286. controls = new OrbitControls(camera, renderer.domElement);
  287. controls.screenSpacePanning = true;
  288. controls.enableDamping = true;
  289. controls.minDistance = 1;
  290. controls.maxDistance = 400;
  291. controls.minPolarAngle = 0;// 默认0
  292. controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
  293. controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
  294. controls.enableZoom = true;//启用摄像机的缩放
  295. // 监听相机移动事件-限制只能在当前空间范围内移动
  296. // controls.addEventListener('change', () => {
  297. // // 检查相机位置是否超出边界框
  298. // if (camera.position.y < 0) {
  299. // camera.position.y = 0;
  300. // }
  301. // });
  302. // stats = new Stats();
  303. // container.appendChild(stats.dom);
  304. // stats.domElement.style.top = '100px';
  305. attendEvent(); //注册监听事件
  306. starRender(); //启动渲染
  307. cameraInit(); //初始化摄像头
  308. controls.saveState();//保存当前控制器的状态
  309. }
  310. //初始化相机位置
  311. function cameraInit(){
  312. camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
  313. camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
  314. }
  315. //初始状态
  316. function resetControl(){
  317. controls.reset();
  318. }
  319. function onWindowResize() {
  320. camera.aspect = screenWidth / that.canvasHeight;
  321. camera.updateProjectionMatrix();
  322. renderer.setSize( screenWidth, that.canvasHeight );
  323. console.warn("****onWindowResize**")
  324. }
  325. function attendEvent () {
  326. window.addEventListener('resize', onWindowResize);
  327. renderer.domElement.addEventListener('touchstart', onPointerStart, false);
  328. renderer.domElement.addEventListener('touchmove', onPointerMove, false);
  329. renderer.domElement.addEventListener('touchend', onPointerUp, false);
  330. }
  331. function tweenCameraAnmaChange (value) {
  332. tweenCameraAnma = value
  333. }
  334. //开启渲染-帧率优化,不触发时停止渲染
  335. function enableRender() {
  336. }
  337. //取消事件监听-避免二次进入时触发多次事件
  338. function clearEvent(){
  339. console.warn("**clearEvent****")
  340. renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
  341. renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
  342. renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
  343. }
  344. // 手指移动开始
  345. function onPointerStart(event){
  346. console.log('开始触摸事件:',that.overChange)
  347. if(that.overChange){//形变中,不能相应用户操作
  348. return false;
  349. }
  350. }
  351. //持续触摸中
  352. function onPointerMove( event ) {
  353. if(that.overChange){//形变中,不能相应用户操作
  354. return false;
  355. }
  356. // that.showLables = false;
  357. }
  358. //触摸结束
  359. function onPointerUp(event) {
  360. if(that.overChange){//形变中,不能相应用户操作
  361. return false;
  362. }
  363. // enableRender();
  364. if(event.touches.length==0){
  365. // that.showLables = true;
  366. // updateLables();
  367. }
  368. }
  369. //把摄像机移动的选中模型的正上方,观察点也变更为模型中心点,同时选中模型
  370. function moveMeshCenterHandle(mesh = null,noChangeColor = true){
  371. if(mesh){//如果传入了模型,则取模型
  372. let spaceId = mesh.spaceId;//空间id
  373. if(chooseMesh && spaceId == chooseMesh.spaceId){
  374. console.warn("**moveMeshCenterHandle-重复选中了***")
  375. return false;
  376. }
  377. chooseMesh = mesh;
  378. }
  379. if(!chooseMesh){
  380. console.warn("**moveMeshCenterHandle-没有数据***")
  381. return false;
  382. }
  383. that.showLables = false;//隐藏
  384. // controls.enable = false;//控制器不响应用户的操作
  385. let spaceObj = chooseMesh;//获取空间模型的相关数据
  386. // controls.panTo(spaceObj.centerX/100, camera.position.y, -spaceObj.centerY/100);
  387. let cameraNewPosition ={};
  388. let targetNewPosition ={};
  389. let oldUp = {};
  390. let newUp = {};
  391. if (isUserContorl === false) { // 非漫游状态
  392. cameraNewPosition = {
  393. x:spaceObj.centerX/100,
  394. y:camera.position.y,
  395. z:-spaceObj.centerY/100 + 0.5,//增加偏差,防止极点翻转问题?不知道为啥会有用
  396. }
  397. //新的观察点的位置-取模型的中心点坐标,加上高度,由于模型都是贴地的,所以高度设置为0
  398. targetNewPosition = {
  399. x:spaceObj.centerX/100,
  400. y:0,
  401. z:-spaceObj.centerY/100,
  402. }
  403. oldUp = camera.up;//俯视状态
  404. newUp = camera.up;
  405. // newUp = new THREE.Vector3(0,0,-1);
  406. // that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
  407. // that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
  408. // if(cameraNewPosition.x<0){
  409. // cameraNewPosition.x = 0;
  410. // }
  411. }
  412. console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
  413. ,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
  414. tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,1000);
  415. setTimeout(()=>{
  416. that.showLables = true;
  417. // camera.up = new THREE.Vector3(0,1,0);
  418. // updateLables();
  419. },1001);//动画结束后回复原始状态
  420. }
  421. // oldP 相机原来的位置
  422. // oldT target原来的位置
  423. // newP 相机新的位置
  424. // newT target新的位置
  425. function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
  426. if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
  427. return false;
  428. }
  429. if (!chooseMesh) {
  430. return false;
  431. }
  432. tweenCameraAnma = true;
  433. var tween = new TWEEN.Tween({
  434. x1: oldP.x, // 相机x
  435. y1: oldP.y, // 相机y
  436. z1: oldP.z, // 相机z
  437. x2: oldT.x, // 控制点的中心点x
  438. y2: oldT.y, // 控制点的中心点y
  439. z2: oldT.z, // 控制点的中心点z
  440. x3: oldUp.x, // 控制点的中心点x
  441. y3: oldUp.y, // 控制点的中心点y
  442. z3: oldUp.z // 控制点的中心点z
  443. })
  444. .to({
  445. x1: newP.x,
  446. y1: newP.y,
  447. z1: newP.z,
  448. x2: newT.x,
  449. y2: newT.y,
  450. z2: newT.z,
  451. x3: newUp.x, // up向量
  452. y3: newUp.y, // 控制点的中心点y
  453. z3: newUp.z // 控制点的中心点z
  454. }, time)
  455. .easing(TWEEN.Easing.Quadratic.InOut)
  456. .onUpdate((object)=> {
  457. camera.position.x = object.x1;
  458. camera.position.y = object.y1;
  459. camera.position.z = object.z1;
  460. let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
  461. camera.up.copy(newTarget);
  462. camera.lookAt(object.x2,object.y2,object.z2);
  463. // controls.target.x = object.x2;
  464. // controls.target.y = object.y2;
  465. // controls.target.z = object.z2;
  466. // controls.update();
  467. // console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
  468. }).onComplete(()=>{
  469. controls.target.x = newT.x;
  470. controls.target.y = newT.y;
  471. controls.target.z = newT.z;
  472. //修正最后的视角
  473. let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
  474. camera.up.copy(up);
  475. camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
  476. tweenCameraAnma = false;
  477. })
  478. // 开始动画
  479. tween.start();
  480. }
  481. //高度持续变化处理 time 动画持续时间 单位秒
  482. function gradientResize (time,startHeight,endHeight) {
  483. // let _timeStep = 20;//单位 毫秒
  484. // let unit = screenWidth / 750;//单位rpm 对应 px 的值
  485. // that.canvasHeight = screenHeight - (200 * unit) + (20 * unit);
  486. let unit = screenWidth / 750;//单位rpx 对应 px 的值
  487. let _height = startHeight - endHeight;//高度变化-单位rpx
  488. let _jisua = that.canvasHeight;
  489. let lastHeight = _jisua + (_height * unit);//动画结束时的高度值; 单位 px
  490. that.canvasHeight = lastHeight;//触发css动画
  491. // let step = (_height * unit) / (time*1000 / _timeStep);//真实大小 单位px
  492. console.warn("***gradientResize***",lastHeight,_jisua,startHeight,endHeight)
  493. // that.showLables = false;
  494. // let canvas_webgl = document.getElementById('canvas_webgl');
  495. var tween = new TWEEN.Tween({
  496. h1: _jisua,
  497. })
  498. .to({
  499. h1: lastHeight,
  500. }, 1000)
  501. .easing(TWEEN.Easing.Linear.None)
  502. .onUpdate((object)=> {
  503. if(camera.isOrthographicCamera){//正交相机
  504. let aspect = screenWidth / object.h1;
  505. camera.left = frustumSize * aspect / - 2;
  506. camera.right = frustumSize * aspect / 2;
  507. camera.top = frustumSize / 2;
  508. camera.bottom = frustumSize / -2;
  509. camera.updateProjectionMatrix();
  510. // that.canvasHeight = object.h1;
  511. }
  512. else if(camera.isPerspectiveCamera){//透视相机
  513. camera.aspect = screenWidth / object.h1;
  514. camera.updateProjectionMatrix();
  515. renderer.setSize( screenWidth, object.h1 );
  516. // that.canvasHeight = object.h1;
  517. }
  518. }).onComplete(()=>{
  519. camera.aspect = screenWidth / that.canvasHeight;
  520. camera.updateProjectionMatrix();
  521. renderer.setSize( screenWidth, that.canvasHeight );
  522. tweenCameraAnma = false;
  523. // that.showLables = true;
  524. // updateLables();//更新lable
  525. });
  526. // 开始动画
  527. tween.start();
  528. tweenCameraAnma = true;
  529. }
  530. //更新lables
  531. function updateLables(){
  532. if(!that.showLables){
  533. return false;
  534. }
  535. that.lableItem.forEach(lable =>{
  536. if(!that.gltfSpaces[lable.cubeIndex] || !that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList){
  537. return false;
  538. }
  539. let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
  540. let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
  541. let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
  542. let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
  543. instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
  544. let position = new THREE.Vector3();//当前几何体的位置参数
  545. position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
  546. // console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
  547. position.project(camera);
  548. const x = (position.x * .5 + .5) * screenWidth;
  549. const y = (position.y * -.5 + .5) * that.canvasHeight;
  550. lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
  551. })
  552. }
  553. function stopRender () {
  554. needRender = false;
  555. }
  556. function starRender () {
  557. if(needRender==true){//如果已经在渲染中了,则不能再次开启,避免渲染过多
  558. false;
  559. }
  560. needRender = true;
  561. render();//开始渲染
  562. }
  563. function render() {
  564. if(needRender==false){
  565. return false;
  566. }
  567. TWEEN && TWEEN.update();
  568. // stats.update();
  569. //不处在动画过程中,则可以处理移动等动作
  570. if(tweenCameraAnma==false){
  571. controls.update();
  572. updateLables();//更新lable
  573. }
  574. requestId = requestAnimationFrame(render, canvas3d);
  575. renderer.render(scene, camera);//单次渲染
  576. if (that.screenshotResolve) {
  577. // if(that.isIOS){//IOS手机
  578. stopRender();
  579. that.screenshotResolve()
  580. that.screenshotResolve = null;//释放Promise
  581. // }else{//安卓手机
  582. // let gl = renderer.getContext();
  583. // let frameBuffer = new THREE.Vector2();
  584. // renderer.getDrawingBufferSize(frameBuffer);
  585. // let pixelData = new Uint8Array(frameBuffer.x * frameBuffer.y * 4);
  586. // //参考 Threejs WebGLRenderer.readRenderTargetPixels
  587. // if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
  588. // gl.readPixels(0, 0, frameBuffer.x, frameBuffer.y, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
  589. // // 确保有像素,微信小程序安卓在进入子页面返回本页面后,再一次readPixels稳定无像素
  590. // if (pixelData.some(i => i !== 0)) {
  591. // stopRender();
  592. // console.warn("***screenshotResolve-pixelData***");
  593. // that.screenshotResolve([pixelData, frameBuffer.x, frameBuffer.y])
  594. // that.screenshotResolve = null;//释放Promise
  595. // frameBuffer = null;//清空内存中的数据
  596. // pixelData = null;//清空内存中的数据
  597. // }
  598. // }
  599. // }
  600. }
  601. }
  602. },
  603. onShow(){
  604. console.warn("---onShow1---",this.pvId)
  605. if(this.attendEvent){
  606. this.attendEvent()
  607. }
  608. },
  609. onHide(){
  610. this.clearEvent();
  611. },
  612. computed: {
  613. aiData() {
  614. return this.$store.state.aiData;
  615. },
  616. userId() {
  617. return this.$store.state.userId;
  618. },
  619. },
  620. methods: {
  621. voiceMaskChange(voiceMask){
  622. this.voiceMaskShow = voiceMask;
  623. },
  624. //黄山数据处理
  625. hushangHandle(param){
  626. let expand = {};
  627. expand.landImg = this.$route.query.landImg || '';
  628. expand.baseImg = this.$route.query.baseImg || '';
  629. expand.bgPrototypeImg = this.$route.query.bgPrototypeImg || '';
  630. expand.landNo = this.$route.query.landNo || '';//地块
  631. expand.landArea = this.$route.query.landArea || '';//地块面积
  632. expand.buildingAreaPreference = this.$route.query.buildingAreaPreference || '';//建筑面积
  633. expand.layer = this.$route.query.layer || '大平层';//层数
  634. expand.structureName = this.$route.query.structureName || '';//结构-L形等
  635. expand.landDescription = this.$route.query.landDescription || '';//地形地势
  636. expand.scenery = this.$route.query.scenery || '';//景观
  637. expand.structureDescription = this.$route.query.structureDescription || '';//空间特质-结构
  638. param.expand = JSON.stringify(expand);
  639. return param;
  640. },
  641. async submitHouse(){
  642. if(this.overChange){
  643. this.$message.warning("空间正在调整");
  644. return false
  645. }
  646. const loading = this.$loading({
  647. lock: true,
  648. text: '提交中...',
  649. spinner: 'el-icon-loading',
  650. background: 'rgba(0, 0, 0, 0.7)'
  651. });
  652. let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
  653. console.warn("***shottingImg***",shottingImg);
  654. let userId = this.userId ? this.userId : '';
  655. let param = {
  656. "brandId": $config.brandId,
  657. "houseId": this.curHouseObj.houseId,
  658. "userId": userId,
  659. "floot": this.curHouseObj.houseFloor,
  660. "spaceName": this.curHouseName ,
  661. "spaceStructure": this.curHouseType,
  662. "curFloor":this.curHouseFloor,
  663. // "layoutImgCustomized": shottingImg,
  664. // "style": "",
  665. layoutStruct:[],
  666. }
  667. //处理每一个楼层
  668. this.curLayoutStruct.forEach((layoutStruct,index)=>{
  669. let houseData = {
  670. "layoutId": layoutStruct.id,
  671. "layoutName": layoutStruct.name,
  672. "layoutArea": layoutStruct.houseArea,
  673. "floor": layoutStruct.houseFloor,
  674. "layoutImgCustomized": layoutStruct.houseFloor == this.curHouseFloor ? shottingImg:'',
  675. "style": "",
  676. "houseJson": []
  677. }
  678. let spaceList = JSON.parse(layoutStruct.houseJson);
  679. let styleList = [];
  680. //遍历当前户型下的每一个空间
  681. spaceList.forEach((item)=>{
  682. let space = JSON.parse(JSON.stringify(item));
  683. //找到当前空间对象对应的AI数据对象
  684. let AISpace = null;
  685. AISpace = this.aiData && this.aiData.find(it=>{
  686. return it.houseFloor == layoutStruct.houseFloor && it.spaceId == space.spaceId
  687. });
  688. if(AISpace){
  689. let list = AISpace.aiImagesList.filter(it=>it.checked==true);//过滤选中的
  690. list.forEach(it=>{
  691. styleList.push(it.aiStyleName);
  692. })
  693. list = list.map(it=>{
  694. return it.image
  695. })
  696. space.hardboundEffect = list;
  697. console.warn("submitHouse: ", list,space);
  698. }
  699. let wallList = this.wallList.find(it=>it.id==space.wallId);
  700. if(wallList){//找到当前空间的墙体数据
  701. space.wallList = JSON.stringify(wallList);
  702. }
  703. houseData.houseJson.push(space)
  704. })
  705. //寻找styleList里面出现最多次数的风格
  706. if(styleList && styleList.length>0){
  707. let maxEle = styleList[0];
  708. let maxNum = 1;
  709. styleList.reduce((p,k)=>{
  710. p[k] ? p[k]++ : p[k]=1;
  711. if(p[k] > maxNum){
  712. maxEle = k;
  713. maxNum ++
  714. }
  715. return p;
  716. },{});
  717. houseData.style = maxEle;
  718. }
  719. param.layoutStruct.push(houseData)
  720. })
  721. param = this.hushangHandle(param)
  722. console.warn("submitHouse-param: ", param);
  723. let trackparam = {
  724. type: 'CLK', //埋点类型
  725. clkId: 'clk_2cmina_23080409', //点击ID
  726. clkName: 'submit_clk', //点击前往的页面名称
  727. clkParams: {
  728. locusName: "数据提交",
  729. postAIData:this.aiData,
  730. }
  731. };
  732. util.trackRequest(trackparam);
  733. let res = await requestConfig("saveCustomizedRecord", param);
  734. loading.close();
  735. if(res && res.success && res.single){//提交成功
  736. let data = {
  737. houseId:this.houseId,
  738. id:res.single,
  739. }
  740. router.push({
  741. name: "webgl_rxdz_customize",
  742. query:data
  743. });
  744. }
  745. },
  746. enableRender(){
  747. this.enableRenderHandle();
  748. },
  749. /**
  750. * 选中墙体触发
  751. */
  752. selectWall(wallIndex){
  753. console.log("index",wallIndex)
  754. if(this.chooseWallMeshColor){
  755. for (let index = 0; index < this.curWallArr.length; index++) {
  756. const element = this.curWallArr[index];
  757. const cube = element.obj;
  758. this.chooseWallMeshColor.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
  759. if(cube && cube.children[0].children[0] && cube.children[0].children[0].material){
  760. cube.children[0].children[0].material.color = this.chooseWallMeshColor;//修改选中模型的颜色-高亮显示 当前选中的模型
  761. }else{//新版逻辑
  762. // element.instancedMeshIndexList.forEach(item=>{
  763. // let _index = item.instancedMeshIndex;
  764. // let instancedMesh = this.instancedMeshList[_index];//网格实例
  765. // instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开,颜色是不能修改额
  766. // instancedMesh.setColorAt(item.instancedAtIndex, this.chooseWallMeshColor);//修改这个几何体的颜色
  767. // })
  768. }
  769. }
  770. }
  771. switch (wallIndex) {
  772. case 1:
  773. this.curWallDirection = "N";
  774. break;
  775. case 2:
  776. this.curWallDirection = "S";
  777. break;
  778. case 3:
  779. this.curWallDirection = "W";
  780. break;
  781. case 4:
  782. this.curWallDirection = "E";
  783. break;
  784. }
  785. this.selectedWall(this.curWallDirection)
  786. this.curWallArr = [];
  787. if(wallIndex!=0){
  788. const wallMoveValues = this.curSpaceObj.wallMoveValue;
  789. console.log
  790. const values = JSON.parse(wallMoveValues);
  791. if(this.curWallValue == 150){
  792. this.curWallValue = values[wallIndex-1]
  793. }else{
  794. let wallIndex = 0
  795. switch (this.curWallDirection) {
  796. case "N":
  797. wallIndex = 0;
  798. values[wallIndex] = this.curWallValue;
  799. values[1] = this.curWallValue;
  800. break;
  801. case "S":
  802. wallIndex = 1;
  803. values[wallIndex] = this.curWallValue;
  804. values[0] = this.curWallValue;
  805. break;
  806. case "W":
  807. wallIndex = 2;
  808. values[wallIndex] = this.curWallValue;
  809. values[3] = this.curWallValue;
  810. break;
  811. case "E":
  812. wallIndex = 3;
  813. values[wallIndex] = this.curWallValue;
  814. values[2] = this.curWallValue;
  815. break;
  816. }
  817. }
  818. this.curSpaceObj.wallMoveValue = JSON.stringify(values)
  819. console.log("墙体可移动数据:", this.curSpaceObj.wallMoveValue, this.spaceList);
  820. const wallStatus = this.curSpaceObj.wallStatus || "[false,false,false,false]"
  821. const status = JSON.parse(wallStatus);
  822. this.curWallHidden = status[wallIndex-1]
  823. console.log("当前墙面数据:", wallStatus , status, wallIndex);
  824. const curSpaceGltfWall = this.gltfWalls.filter((item)=>{
  825. return this.curSpaceObj.spaceId == item.spaceId && item.wallDirection == this.curWallDirection
  826. })
  827. if(curSpaceGltfWall.length != 0){
  828. this.curWallArr.push(...curSpaceGltfWall);
  829. }else{
  830. let rightWallD = "";
  831. switch (wallIndex-1) {
  832. case 0:
  833. rightWallD= "S";
  834. break;
  835. case 1:
  836. rightWallD= "N";
  837. break;
  838. case 2:
  839. rightWallD= "E";
  840. break;
  841. case 3:
  842. rightWallD= "W";
  843. break;
  844. }
  845. for (let index = 0; index < this.leftSpaces.length; index++) {
  846. const element = this.leftSpaces[index];
  847. const gltfWall = this.gltfWalls.filter((item)=>{
  848. return element.spaceId == item.spaceId && item.wallDirection == this.curWallDirection
  849. })
  850. if(gltfWall){
  851. this.curWallArr.push(...gltfWall);
  852. }
  853. }
  854. for (let index = 0; index < this.rightSpaces.length; index++) {
  855. const element = this.rightSpaces[index];
  856. const gltfWall = this.gltfWalls.filter((item)=>{
  857. return element.spaceId == item.spaceId && item.wallDirection == rightWallD;
  858. })
  859. if(gltfWall){
  860. this.curWallArr.push(...gltfWall);
  861. }
  862. }
  863. }
  864. for (let index = 0; index < this.curWallArr.length; index++) {
  865. const element = this.curWallArr[index];
  866. const cube = element.obj;
  867. if(cube && cube.children[0].children[0] && cube.children[0].children[0].material){
  868. this.chooseWallMeshColor = cube.children[0].children[0].material.color.clone();
  869. let color = new THREE.Color(0xff0000); // 使用sRGB颜色值
  870. color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
  871. cube.children[0].children[0].material.color = color;//修改选中模型的颜色-高亮显示 当前选中的模型
  872. }else{//新版逻辑
  873. // element.instancedMeshIndexList.forEach(item=>{
  874. // let _index = item.instancedMeshIndex;
  875. // let instancedMesh = this.instancedMeshList[_index];//网格实例
  876. // this.chooseWallMeshColor = instancedMesh.material.color.clone();;
  877. // let color = new THREE.Color(0xff0000); // 使用sRGB颜色值
  878. // color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
  879. // instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开,颜色是不能修改额
  880. // instancedMesh.setColorAt(item.instancedAtIndex, color);//修改这个几何体的颜色
  881. // })
  882. }
  883. }
  884. }
  885. },
  886. //具体空间面积变化-拖动产生的
  887. //data = {
  888. // spaceId:245,
  889. // area:12, //正负值 单位平方米
  890. // }
  891. curSpaceChange(data){
  892. console.warn("***空间面积变化***",this.overChange,data);
  893. // let changArea = data.isZoomIn ? parseFloat(data.area.toFixed(2)) : -parseFloat(data.area.toFixed(2));
  894. // this.changeArea = changArea;//当次变化的面积,有正负值
  895. // this.sumArea = parseFloat((this.sumArea + changArea).toFixed(2));
  896. this.overChange = true;//变形开始 防止在形变结束前,再次形变
  897. this.currentChangeSpaceId = data.spaceId
  898. this.changCurSpaceArea(data);
  899. let space = this.spaceList.find(it=>it.spaceId==this.currentChangeSpaceId);
  900. this.moveMeshCenter(space);
  901. },
  902. // 空间移动,
  903. changCurSpaceArea(data){
  904. console.log("当前户型的核心点", this.curHouseObj.houseCore, this.overChange);
  905. const houseCore = this.curHouseObj.houseCore.split(',');
  906. const coreX = houseCore[0] | 0
  907. const coreY = houseCore[1] | 0
  908. // 根据核心点计算空间所在象限
  909. this.spaces1 = [];
  910. this.spaces2 = [];
  911. this.spaces3 = [];
  912. this.spaces4 = [];
  913. let curSpace = null;
  914. for (let index = 0; index < this.spaceList.length; index++) {
  915. const element = this.spaceList[index];
  916. if(element.centerX > coreX){ // 2 3象限
  917. if(element.centerY > coreY){ // 2象限
  918. console.log(`象限2 ${element}`);
  919. element.quadrant = 2;
  920. this.spaces2.push(element)
  921. }else{// 3象限
  922. console.log(`象限3 ${element}`);
  923. element.quadrant = 3;
  924. this.spaces3.push(element)
  925. }
  926. }else{// 1 4象限
  927. if(element.centerY > coreY){ // 1象限
  928. console.log(`象限1 ${element}`);
  929. element.quadrant = 1;
  930. this.spaces1.push(element)
  931. }else{ // 4象限
  932. console.log(`象限4 ${element}`);
  933. element.quadrant = 4;
  934. this.spaces4.push(element)
  935. }
  936. }
  937. if(element.spaceId == data.spaceId){
  938. curSpace = element;
  939. }
  940. }
  941. console.log("当前space所在象限",data.spaceId, curSpace.spaceId , curSpace.quadrant);
  942. console.log("象限", this.spaces1, this.spaces2, this.spaces3, this.spaces4);
  943. this.calculateSpaceData(curSpace, data)
  944. },
  945. calculateSpaceData(curSpace, data){
  946. let that = this;
  947. this.curSpaceObj = curSpace;
  948. // 计算宽高移动数值
  949. const changeArea = data.area;
  950. const isZoomIn = data.isZoomIn;
  951. const oldArea = (curSpace.spaceWidth / 100) * (curSpace.spaceHeight / 100);
  952. const newArea = oldArea + changeArea * (data.isZoomIn ? 1 : -1);
  953. const sizeScale = Math.sqrt(newArea/oldArea) ;
  954. // 新的宽度
  955. let newWidth = curSpace.spaceWidth * sizeScale;
  956. if(newWidth < curSpace.spaceWidthMin){
  957. newWidth = curSpace.spaceWidthMin
  958. }
  959. if(newWidth > curSpace.spaceWidthMax){
  960. newWidth = curSpace.spaceWidthMax
  961. }
  962. // 新的高度
  963. let newHeight = newArea * 10000 / newWidth;
  964. if(newHeight < curSpace.spaceHeightMin){
  965. newHeight = curSpace.spaceHeightMin
  966. }
  967. if(newHeight > curSpace.spaceHeightMax){
  968. newHeight = curSpace.spaceHeightMax
  969. }
  970. newWidth = newArea * 10000 / newHeight;
  971. let changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
  972. let changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
  973. console.log("变化的尺寸", changeWidth, changeHeight, newWidth, newHeight, curSpace.spaceWidth, curSpace.spaceHeight);
  974. if(curSpace.quadrant == 1){
  975. // 默认往南 往西移动
  976. this.moveSpace(curSpace, 1, 3, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
  977. }
  978. if(curSpace.quadrant == 2){
  979. // 默认往南 往西移动
  980. this.moveSpace(curSpace, 1, 4, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
  981. }
  982. if(curSpace.quadrant == 3){
  983. // this.selectWall(4);
  984. // // // 移动墙面
  985. // this.moveSpaceWall(this.curWallDirection, isZoomIn, changeWidth);
  986. // 默认往南 往东移动
  987. this.moveSpace(curSpace, 2, 4, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
  988. }
  989. if(curSpace.quadrant == 4){
  990. // 默认往南 往西移动
  991. this.moveSpace(curSpace, 2, 3, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
  992. }
  993. setTimeout(() => {
  994. // that.updataPageData();
  995. that.overChange = false;
  996. that.callBackFun && that.callBackFun(true);
  997. // that.calculateLayoutModelSize(); //重新计算家具位置
  998. that.updateWallModels(); // 替换墙体模型
  999. that.changeLayoutModel(); // 改变空间模型
  1000. // that.changeLayoutModelState(true); // 显示家具模型
  1001. }, 4200);
  1002. },
  1003. moveSpace(curSpace, directionIndex, directionIndex01, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight){
  1004. let that = this;
  1005. const wallLock = this.currWallLock(directionIndex, curSpace); //南边
  1006. const wallLock01 = this.currWallLock(directionIndex01, curSpace); //东边
  1007. console.log("移动空间", wallLock, wallLock01)
  1008. if(wallLock ==-1 && wallLock01 == -1){
  1009. return this.$message.warning("空间尺寸已锁定");
  1010. }
  1011. let changeValue = changeHeight;
  1012. if(wallLock == -1){
  1013. if(wallLock01 == 0){
  1014. directionIndex01 = directionIndex01 == 4 ? 3 : 4; // 往西移动
  1015. }
  1016. // 南北锁死,重新计算移动的方向
  1017. newWidth = newArea / (curSpace.spaceHeight / 100) * 100
  1018. changeWidth = newWidth / 100 - curSpace.spaceWidth / 100;
  1019. changeWidth = Math.abs(changeWidth * 100);
  1020. directionIndex = directionIndex01; // 往东移动
  1021. changeValue = changeWidth;
  1022. console.log("高度锁死不能拉伸, 宽度变化1",newWidth, directionIndex,curSpace.spaceWidth, curSpace.spaceHeight, changeValue);
  1023. that.selectWall(directionIndex);
  1024. let checkResult = this.checkRightSpace(!isZoomIn, changeWidth, false, curSpace)
  1025. if(!checkResult.result){
  1026. changeWidth = checkResult.newValue
  1027. }
  1028. console.log("宽度达到极限值结果++++++++++++++", checkResult, changeWidth)
  1029. that.moveSpaceWall(that.curWallDirection, isZoomIn, changeWidth);
  1030. // that.autoCreateWall(directionIndex, curSpace)
  1031. return;
  1032. }else{
  1033. if(wallLock == 0){
  1034. directionIndex = directionIndex == 2 ? 1 : 2; // 往北边移动
  1035. }
  1036. if(wallLock01 == -1){
  1037. // 东西锁死,重新计算移动方向
  1038. newHeight = newArea / (curSpace.spaceWidth / 100) * 100
  1039. changeHeight = newHeight / 100 - curSpace.spaceHeight / 100;
  1040. changeHeight = Math.abs(changeHeight * 100);
  1041. changeValue = changeHeight;
  1042. that.selectWall(directionIndex);
  1043. let checkResult = this.checkRightSpace(!isZoomIn, changeHeight, true, curSpace)
  1044. console.log("高度达到极限值结果++++++++++++++", checkResult, changeHeight)
  1045. if(!checkResult.result){
  1046. changeHeight = checkResult.newValue
  1047. }
  1048. that.moveSpaceWall(that.curWallDirection, isZoomIn, changeHeight);
  1049. // 自动补墙逻辑
  1050. // that.autoCreateWall(directionIndex, curSpace);
  1051. return
  1052. }
  1053. if(wallLock01 == 0){
  1054. directionIndex01 = directionIndex01 == 4 ? 3 : 4; // 往西移动
  1055. }
  1056. console.log("要变化的宽度", newWidth, newHeight)
  1057. // 目标宽度
  1058. if(newHeight > curSpace.spaceHeightMax){
  1059. newHeight = curSpace.spaceHeightMax;
  1060. changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
  1061. // 重新计算宽度值
  1062. newWidth = (newArea / (newHeight / 100)) * 100
  1063. changeWidth = (newWidth / 100 - curSpace.spaceWidth / 100) * 100;
  1064. console.log("高度达到最大值,重新计算宽度",newWidth, newHeight, changeWidth, changeHeight)
  1065. }
  1066. if(newHeight < curSpace.spaceHeightMin){
  1067. newHeight = curSpace.spaceHeightMin;
  1068. changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
  1069. // 重新计算宽度值
  1070. newWidth = (newArea / (newHeight / 100)) * 100
  1071. changeWidth = Math.abs((newWidth / 100 - curSpace.spaceWidth / 100) * 100);
  1072. console.log("高度达到最小值,重新计算宽度",newWidth, newHeight, changeWidth, changeHeight)
  1073. }
  1074. if(newWidth > curSpace.spaceWidthMax){
  1075. newWidth = curSpace.spaceWidthMax;
  1076. changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
  1077. // 重新计算宽度值
  1078. newHeight = (newArea / (newWidth / 100)) * 100
  1079. changeHeight = (newHeight / 100 - curSpace.spaceHeight / 100) * 100;
  1080. console.log("宽度达到最大值,重新计算高度",newWidth, newHeight, changeWidth, changeHeight)
  1081. }
  1082. if(newWidth < curSpace.spaceWidthMin){
  1083. newWidth = curSpace.spaceWidthMin;
  1084. changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
  1085. // 重新计算宽度值
  1086. newHeight = (newArea / (newWidth / 100)) * 100
  1087. changeHeight = Math.abs((newHeight / 100 - curSpace.spaceHeight / 100) * 100);
  1088. console.log("宽度达到最小值,重新计算高度",newWidth, newHeight, changeWidth, changeHeight)
  1089. }
  1090. // if(!checkWidth || !checkHeight){
  1091. // return
  1092. // }
  1093. if(changeHeight > 0){
  1094. that.changeSpaces = [];
  1095. that.selectWall(directionIndex);
  1096. let checkResult = this.checkRightSpace(!isZoomIn, changeHeight, true, curSpace)
  1097. console.log("高度达到极限值结果++++++++++++++", checkResult, changeHeight)
  1098. if(!checkResult.result){
  1099. changeHeight = checkResult.newValue
  1100. }
  1101. that.moveSpaceWall(that.curWallDirection, isZoomIn, changeHeight);
  1102. // 自动补墙逻辑
  1103. // that.autoCreateWall(directionIndex, curSpace)
  1104. }
  1105. let timeout = 0
  1106. if(changeWidth > 0 && changeHeight > 0 ){
  1107. timeout = 2100
  1108. }
  1109. console.log("改变尺寸",changeWidth, changeHeight,newWidth, newHeight, timeout, directionIndex, directionIndex01, wallLock, wallLock01)
  1110. if(changeWidth > 0){
  1111. setTimeout(() => {
  1112. that.changeSpaces = [];
  1113. // // 选中墙面
  1114. that.selectWall(directionIndex01);
  1115. // 计算
  1116. let checkResult = this.checkRightSpace(!isZoomIn, changeWidth, false, curSpace)
  1117. if(!checkResult.result){
  1118. changeWidth = checkResult.newValue
  1119. }
  1120. console.log("宽度达到极限值结果++++++++++++++", checkResult, changeWidth)
  1121. // 移动墙面
  1122. that.moveSpaceWall(that.curWallDirection, isZoomIn, changeWidth);
  1123. // 自动补墙逻辑
  1124. // that.autoCreateWall(directionIndex01, curSpace)
  1125. }, timeout);
  1126. }
  1127. }
  1128. },
  1129. currWallLock(direction, curSpace){
  1130. let curDirection = ""
  1131. let faceDirection = ""
  1132. switch (direction) {
  1133. case 1:
  1134. curDirection = "N";
  1135. faceDirection = "S";
  1136. break;
  1137. case 2:
  1138. curDirection = "S";
  1139. faceDirection = "N";
  1140. break;
  1141. case 3:
  1142. curDirection = "W";
  1143. faceDirection = "E";
  1144. break;
  1145. case 4:
  1146. curDirection = "E";
  1147. faceDirection = "W";
  1148. break;
  1149. }
  1150. const wallInfo = this.wallList.find((item)=>{
  1151. let element = JSON.parse(item.wallJson);
  1152. return element.spaceId == curSpace.spaceId;
  1153. })
  1154. let walls = JSON.parse(wallInfo.wallJson).wallData;
  1155. const wall = walls.find((item)=>{ // 当前墙面锁定
  1156. return item.wallDirection==curDirection && item.isLocked=="true"
  1157. })
  1158. const faceWall = walls.find((item)=>{ // 对面墙面锁定
  1159. return item.wallDirection==faceDirection && item.isLocked=="true"
  1160. })
  1161. if(wall){
  1162. if(faceWall){
  1163. return -1 // 当前对面同时锁定
  1164. }
  1165. return 0 // 当前锁定
  1166. }else{
  1167. return 1 // 不锁定,可以移动
  1168. }
  1169. },
  1170. // 排查关联空间是否达到极限值
  1171. checkRightSpace(isZoomIn, changeValue, isNS, curSpace){
  1172. if(changeValue == 0){
  1173. return;
  1174. }
  1175. let n = isZoomIn?1:-1;
  1176. let l = isZoomIn?-1:1;
  1177. let result = true;
  1178. let space = null;
  1179. let newValue = changeValue;
  1180. console.log("排查空间",isZoomIn, changeValue,isNS, this.leftSpaces, this.rightSpaces);
  1181. for (let index = 0; index < this.leftSpaces.length; index++) {
  1182. const element = this.leftSpaces[index];
  1183. // 过滤掉花园判断
  1184. if(element.spaceType == 14 || element.spaceId == curSpace.spaceId){
  1185. continue;
  1186. }
  1187. let newWidth = element.spaceWidth + l * changeValue;
  1188. let newHeight = element.spaceHeight + l * changeValue;
  1189. if(isNS){
  1190. if( newHeight > element.spaceHeightMax || newHeight < element.spaceHeightMin){
  1191. result = false;
  1192. space = element;
  1193. break;
  1194. }
  1195. }else{
  1196. if(newWidth > element.spaceWidthMax || newWidth < element.spaceWidthMin){
  1197. result = false;
  1198. space = element;
  1199. break;
  1200. }
  1201. }
  1202. }
  1203. for (let index = 0; index < this.rightSpaces.length; index++) {
  1204. const element = this.rightSpaces[index];
  1205. // 过滤掉花园判断
  1206. if(element.spaceType == 14){
  1207. console.log("空间排查跳出")
  1208. continue;
  1209. }
  1210. let newWidth = element.spaceWidth + n * changeValue;
  1211. let newHeight = element.spaceHeight + n * changeValue;
  1212. if(isNS){
  1213. if( newHeight > element.spaceHeightMax || newHeight < element.spaceHeightMin){
  1214. result = false;
  1215. space = element;
  1216. const newHeightValue = newHeight > element.spaceHeightMax ? element.spaceHeightMax : element.spaceHeightMin;
  1217. newHeight = newHeightValue - newHeight;
  1218. const newChangeValue = changeValue - newHeight;
  1219. if(newValue > newChangeValue){
  1220. newValue = newChangeValue;
  1221. }
  1222. break;
  1223. }
  1224. }else{
  1225. console.log("排查右边空间",newWidth, element.spaceWidthMax,newWidth, element.spaceWidthMin);
  1226. if(newWidth > element.spaceWidthMax || newWidth < element.spaceWidthMin){
  1227. result = false;
  1228. space = element;
  1229. let newWidthValue = newWidth > element.spaceWidthMax ? element.spaceWidthMax : element.spaceWidthMin
  1230. if(isZoomIn){ // 放大
  1231. if(newWidth>element.spaceWidthMax){ // 关联空间放大时已经是最大,则变化值为0
  1232. newValue = 0
  1233. break;
  1234. }
  1235. }else{
  1236. newWidthValue = newWidth < element.spaceWidthMin ? element.spaceWidthMin : newWidth;
  1237. console.log("排查右边空间2",newWidth, element.spaceWidthMax, element.spaceWidthMin);
  1238. }
  1239. newWidth = newWidthValue - newWidth;
  1240. const newChangeValue = changeValue - newWidth;
  1241. if(newValue > newChangeValue){
  1242. newValue = newChangeValue;
  1243. }
  1244. break;
  1245. }
  1246. }
  1247. }
  1248. if(!result){
  1249. this.$message.warning(`关联空间[${ space && space.spaceName || ''}]达到极限值`);
  1250. }
  1251. return {"result":result,"newValue":newValue}
  1252. },
  1253. checkSpaceSize(isZoomIn, changeWidth, changeHeight){
  1254. console.log("检查尺寸", isZoomIn, changeWidth, changeHeight, this.leftSpaces, this.rightSpaces)
  1255. for (let index = 0; index < this.leftSpaces.length; index++) {
  1256. const element = this.leftSpaces[index];
  1257. if(isZoomIn){
  1258. if(element.spaceWidth + changeWidth > element.spaceWidthMax || element.spaceHeight + changeHeight > element.spaceHeightMax){
  1259. console.log("++++++++++移动空间达到极大值1", element.spaceId, element.spaceWidth + changeWidth > element.spaceWidthMax, element.spaceHeight + changeHeight > element.spaceHeightMax)
  1260. console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMax)
  1261. console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMax)
  1262. return false;
  1263. }
  1264. }else{
  1265. if(element.spaceWidth - changeWidth < element.spaceWidthMin || element.spaceHeight - changeHeight < element.spaceHeightMin){
  1266. console.log("++++++++++移动空间达到极小值2", element.spaceId)
  1267. console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMin)
  1268. console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMin)
  1269. return false;
  1270. }
  1271. }
  1272. }
  1273. for (let index = 0; index < this.rightSpaces.length; index++) {
  1274. const element = this.rightSpaces[index];
  1275. if(!isZoomIn){
  1276. if(element.spaceWidth - changeWidth < element.spaceWidthMin || element.spaceHeight - changeHeight < element.spaceHeightMin){
  1277. console.log("++++++++++其他空间达到极小值4", element.spaceId)
  1278. console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMin)
  1279. console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMin)
  1280. return false;
  1281. }
  1282. }else{
  1283. if(element.spaceWidth + changeWidth > element.spaceWidthMax || element.spaceHeight + changeHeight > element.spaceHeightMax){
  1284. console.log("++++++++++其他空间达到极大值3", element.spaceId)
  1285. console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMax)
  1286. console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMax)
  1287. return false;
  1288. }
  1289. }
  1290. }
  1291. return true
  1292. },
  1293. // 新版本空间移动计算
  1294. changeCurSpaceSize(curSpace, changeArea, isZoomIn){
  1295. // 计算当前空间的变化
  1296. // 1.原先面积
  1297. const oldArea = (curSpace.spaceWidth / 100) * (curSpace.spaceHeight / 100);
  1298. const newArea = oldArea + changeArea * isZoomIn;
  1299. const sizeScale = Math.sqrt(newArea/oldArea) ;
  1300. console.log(`新面积:${newArea} 老面积:${oldArea}缩放比例:${sizeScale} 改变的面积:${changeArea} 是否放大:${isZoomIn} 中心点:${curSpace.centerX} ${curSpace.centerX}`);
  1301. console.log(`改变前:尺寸:${curSpace.spaceWidth} ${curSpace.spaceHeight} 中心点:${curSpace.centerX} ${curSpace.centerY}`);
  1302. curSpace.toScaleX = curSpace.spaceWidth * sizeScale / 300 ;
  1303. curSpace.toScaleZ = curSpace.spaceHeight * sizeScale / 300 ;
  1304. if(this.minspace1 && this.minspace1.spaceId == curSpace.spaceId){
  1305. curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100 * -1;
  1306. curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100 * -1;
  1307. console.log("XXXXXXXX-计算空间变化信息1", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
  1308. }else if(this.minspace2 && this.minspace2.spaceId == curSpace.spaceId){
  1309. curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100;
  1310. curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100 * -1;
  1311. console.log("XXXXXXXX-计算空间变化信息2", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
  1312. }else if(this.minspace3 && this.minspace3.spaceId == curSpace.spaceId){
  1313. curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100;
  1314. curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100;
  1315. console.log("XXXXXXXX-计算空间变化信息3", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
  1316. }else if(this.minspace4 && this.minspace4.spaceId == curSpace.spaceId){
  1317. curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100 * -1;
  1318. curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100;
  1319. console.log("XXXXXXXX-计算空间变化信息4", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
  1320. }else{
  1321. return
  1322. }
  1323. // 更新数据:
  1324. curSpace.spaceWidth = curSpace.spaceWidth * sizeScale;
  1325. curSpace.spaceHeight = curSpace.spaceHeight * sizeScale;
  1326. curSpace.centerX = curSpace.centerX + curSpace.toPx * 100
  1327. curSpace.centerY = curSpace.centerY + curSpace.toPz * 100
  1328. const spaceIndex = this.spaceList.findIndex((item)=>{
  1329. return item.spaceId == curSpace.spaceId;
  1330. })
  1331. if(spaceIndex!=-1){
  1332. this.spaceList[spaceIndex] = curSpace;
  1333. }
  1334. console.log(`改变后:尺寸:${curSpace.spaceWidth} ${curSpace.spaceHeight} 中心点:${curSpace.centerX} ${curSpace.centerY} `, curSpace.toPx, curSpace.toPz);
  1335. },
  1336. findxxSpace(manSpace,changeArea, xiangxian, isZoomIn){
  1337. if(xiangxian == 1){
  1338. const spaceE = this.spaces1.find((item)=>{
  1339. return item.spaceId == manSpace.eastId;
  1340. })
  1341. const spaceS = this.spaces1.find((item)=>{
  1342. return item.spaceId == manSpace.southId;
  1343. })
  1344. const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
  1345. const newArea = oldArea + changeArea * isZoomIn;
  1346. const sizeScale = Math.sqrt(newArea/oldArea) ;
  1347. manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
  1348. manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
  1349. if(spaceE){
  1350. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1 + spaceE.toPx * 2;
  1351. console.log("XXXXXXXX东边有空间", manSpace.spaceId, spaceE.toPx)
  1352. }else{
  1353. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1;
  1354. console.log("XXXXXXXX东边没空间", manSpace.spaceId)
  1355. }
  1356. if(spaceS){
  1357. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1 + spaceS.toPz * 2;
  1358. console.log("XXXXXXXX南边有空间", manSpace.spaceId, spaceS.toPz)
  1359. }else{
  1360. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1;
  1361. console.log("XXXXXXXX南边没空间", manSpace.spaceId)
  1362. }
  1363. console.log("XXXXXXXX-前象限1的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
  1364. manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
  1365. manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
  1366. manSpace.centerX += manSpace.toPx * 100
  1367. manSpace.centerY += manSpace.toPz * 100
  1368. console.log("XXXXXXXX-后象限1的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
  1369. const spaceIndex = this.spaceList.findIndex((item)=>{
  1370. return item.spaceId == manSpace.spaceId;
  1371. })
  1372. if(spaceIndex!=-1){
  1373. this.spaceList[spaceIndex] = manSpace;
  1374. }
  1375. const spacesIndex = this.spaces1.findIndex((item)=>{
  1376. return item.spaceId == manSpace.spaceId;
  1377. })
  1378. if(spacesIndex!=-1){
  1379. this.spaces1[spacesIndex] = manSpace;
  1380. }
  1381. }
  1382. if(xiangxian == 2){
  1383. const spaceW = this.spaces2.find((item)=>{
  1384. return item.spaceId == manSpace.westId;
  1385. })
  1386. const spaceS = this.spaces2.find((item)=>{
  1387. return item.spaceId == manSpace.southId;
  1388. })
  1389. const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
  1390. const newArea = oldArea + changeArea * isZoomIn;
  1391. const sizeScale = Math.sqrt(newArea/oldArea) ;
  1392. manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
  1393. manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
  1394. if(spaceW){
  1395. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 + spaceW.toPx * 2;
  1396. console.log("XXXXXXXX西边有空间", manSpace.spaceId, spaceW.toPx)
  1397. }else{
  1398. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100;
  1399. console.log("XXXXXXXX西边没空间", manSpace.spaceId)
  1400. }
  1401. if(spaceS){
  1402. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1 + spaceS.toPz * 2;
  1403. console.log("XXXXXXXX南边有空间", manSpace.spaceId, spaceS.toPz)
  1404. }else{
  1405. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1;
  1406. console.log("XXXXXXXX南边没空间", manSpace.spaceId)
  1407. }
  1408. console.log("XXXXXXXX-前象限2的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
  1409. manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
  1410. manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
  1411. manSpace.centerX += manSpace.toPx * 100
  1412. manSpace.centerY += manSpace.toPz * 100
  1413. console.log("XXXXXXXX-后象限2的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
  1414. const spaceIndex = this.spaceList.findIndex((item)=>{
  1415. return item.spaceId == manSpace.spaceId;
  1416. })
  1417. if(spaceIndex!=-1){
  1418. this.spaceList[spaceIndex] = manSpace;
  1419. }
  1420. const spacesIndex = this.spaces2.findIndex((item)=>{
  1421. return item.spaceId == manSpace.spaceId;
  1422. })
  1423. if(spacesIndex!=-1){
  1424. this.spaces2[spacesIndex] = manSpace;
  1425. }
  1426. }
  1427. if(xiangxian == 3){
  1428. const spaceW = this.spaces3.find((item)=>{
  1429. return item.spaceId == manSpace.westId;
  1430. })
  1431. const spaceN = this.spaces3.find((item)=>{
  1432. return item.spaceId == manSpace.northId;
  1433. })
  1434. const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
  1435. const newArea = oldArea + changeArea * isZoomIn;
  1436. const sizeScale = Math.sqrt(newArea/oldArea) ;
  1437. manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
  1438. manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
  1439. if(spaceW){
  1440. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 + spaceW.toPx * 2;
  1441. console.log("XXXXXXXX西边有空间", manSpace.spaceId, spaceW.toPx)
  1442. }else{
  1443. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100;
  1444. console.log("XXXXXXXX西边没空间", manSpace.spaceId)
  1445. }
  1446. if(spaceN){
  1447. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 + spaceN.toPz * 2;
  1448. console.log("XXXXXXXX北边有空间", manSpace.spaceId, spaceN.toPz)
  1449. }else{
  1450. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100;
  1451. console.log("XXXXXXXX北边没空间", manSpace.spaceId)
  1452. }
  1453. console.log("XXXXXXXX-前象限3的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
  1454. manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
  1455. manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
  1456. manSpace.centerX += manSpace.toPx * 100
  1457. manSpace.centerY += manSpace.toPz * 100
  1458. console.log("XXXXXXXX-后象限3的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
  1459. const spaceIndex = this.spaceList.findIndex((item)=>{
  1460. return item.spaceId == manSpace.spaceId;
  1461. })
  1462. if(spaceIndex!=-1){
  1463. this.spaceList[spaceIndex] = manSpace;
  1464. }
  1465. const spacesIndex = this.spaces3.findIndex((item)=>{
  1466. return item.spaceId == manSpace.spaceId;
  1467. })
  1468. if(spacesIndex!=-1){
  1469. this.spaces3[spacesIndex] = manSpace;
  1470. }
  1471. }
  1472. if(xiangxian == 4){
  1473. const spaceE = this.spaces4.find((item)=>{
  1474. return item.spaceId == manSpace.eastId;
  1475. })
  1476. const spaceN = this.spaces4.find((item)=>{
  1477. return item.spaceId == manSpace.northId;
  1478. })
  1479. const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
  1480. const newArea = oldArea + changeArea * isZoomIn;
  1481. const sizeScale = Math.sqrt(newArea/oldArea) ;
  1482. manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
  1483. manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
  1484. if(spaceE){
  1485. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1 + spaceE.toPx * 2;
  1486. console.log("XXXXXXXX东边有空间", manSpace.spaceId, spaceE.toPx)
  1487. }else{
  1488. manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1;
  1489. console.log("XXXXXXXX东边没空间", manSpace.spaceId)
  1490. }
  1491. if(spaceN){
  1492. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 + spaceN.toPz * 2;
  1493. console.log("XXXXXXXX北边有空间", manSpace.spaceId, spaceN.toPz)
  1494. }else{
  1495. manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100;
  1496. console.log("XXXXXXXX北边没空间", manSpace.spaceId)
  1497. }
  1498. console.log("XXXXXXXX-前象限4的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
  1499. manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
  1500. manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
  1501. manSpace.centerX += manSpace.toPx * 100
  1502. manSpace.centerY += manSpace.toPz * 100
  1503. console.log("XXXXXXXX-后象限4的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
  1504. const spaceIndex = this.spaceList.findIndex((item)=>{
  1505. return item.spaceId == manSpace.spaceId;
  1506. })
  1507. if(spaceIndex!=-1){
  1508. this.spaceList[spaceIndex] = manSpace;
  1509. }
  1510. const spacesIndex = this.spaces4.findIndex((item)=>{
  1511. return item.spaceId == manSpace.spaceId;
  1512. })
  1513. if(spacesIndex!=-1){
  1514. this.spaces4[spacesIndex] = manSpace;
  1515. }
  1516. }
  1517. },
  1518. //空间面积等变更后-同步更新其他数据对象
  1519. updataPageData(){
  1520. let sumArea = 0;
  1521. this.spaceList.forEach(space=>{
  1522. let curSpaceArea = parseFloat((
  1523. (space.spaceWidth * space.spaceHeight) * space.spaceRatio / 10000
  1524. ).toFixed(2));
  1525. sumArea +=curSpaceArea;
  1526. })
  1527. this.changeArea = parseFloat((sumArea - this.fixedArea).toFixed(2));
  1528. this.sumArea = parseFloat(sumArea.toFixed(2));
  1529. let str = JSON.stringify(this.spaceList)
  1530. //更新当前空间对象
  1531. this.curHouseObj.houseJson = str;
  1532. //更新提交的数据
  1533. let layoutStruct = this.curLayoutStruct.find(it=>{
  1534. return it.houseFloor == this.curHouseFloor
  1535. })
  1536. layoutStruct.houseJson = str;
  1537. this.currentChangeSpaceId = null;//变化结束后
  1538. console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj,layoutStruct)
  1539. },
  1540. //户型大类发生了变更
  1541. curHouseTypeChange(item){
  1542. this.curHouseType = item.spaceStructure;//当前选中的户型类型-传递给子组件触发具体的户型数据选取
  1543. this.curHouseName = item.spaceName;//当前选中的户型类型名称
  1544. //获取当前户型大类下的所有户型信息-用于用户提交
  1545. this.curLayoutStruct = this.houseList.find(it=>it.spaceStructure == this.curHouseType).layoutStruct;
  1546. this.curLayoutStruct.forEach(it=>{
  1547. this.layoutArea += it.houseArea
  1548. })
  1549. console.warn("***curLayoutStruct***",this.curLayoutStruct)
  1550. },
  1551. //户型楼层发生了变更
  1552. curHouseFloorChange(item){
  1553. let that = this;
  1554. this.curHouseFloor = item.houseFloor;//当前选中的户型楼层
  1555. this.curHouseObj = item;//更新当前具体的户型数据
  1556. this.id = this.curHouseObj.id;
  1557. // 遍历场景中的所有子对象,找到类型为Mesh的对象并移除
  1558. let deleList = that.scene && that.scene.children.filter(object=>{
  1559. if(object.userType=="mesh" || object.userType=="layoutMesh"){
  1560. return object
  1561. }
  1562. })
  1563. // console.warn("***deleList***",deleList)
  1564. if(deleList && deleList.length>0){
  1565. that.showLables = false;//隐藏lable
  1566. that.scene.remove(...deleList);
  1567. }
  1568. this.gltfWalls = [];
  1569. this.gltfSpaces = [];
  1570. this.gltfSpaceRoofs = [];
  1571. this.instancedMeshList = [];
  1572. this.instancedSpaceMeshList = [];
  1573. this.lableItem = [];
  1574. this.gltfLayouts = [];
  1575. this.instancedFurList = [];
  1576. this.wallList = [];
  1577. this.changeArea = 0;
  1578. //恢复初始视角
  1579. this.cameraInit();
  1580. this.resetControl();
  1581. setTimeout(()=>{
  1582. that.loadSpace();
  1583. }, 100);
  1584. console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
  1585. // this.navbar.title = this.curHouseObj.name + " " + this.curHouseObj.houseArea + "㎡";
  1586. this.navbar.title = "空间定制";
  1587. this.sumArea = this.curHouseObj.houseArea;
  1588. this.fixedArea = this.curHouseObj.houseArea;
  1589. },
  1590. async getInitData(){
  1591. let parmas = {
  1592. childLayout:this.childLayout || 0,
  1593. houseId:this.houseId,
  1594. }
  1595. const res = await requestConfig('getHouseTypeSpaceDetailsV2', parmas, true);
  1596. if (res.success && res.list) {
  1597. let list = res.list || [];
  1598. list && list.forEach((single,index)=>{
  1599. single.layoutStruct.forEach((item)=>{
  1600. if(item.houseJson){
  1601. let spaceList = JSON.parse(item.houseJson);
  1602. // 交换centerX, centerY
  1603. for (let index = 0; index < spaceList.length; index++) {
  1604. var element = spaceList[index];
  1605. const {centerX, centerY} = element;
  1606. element.centerX = centerY;
  1607. element.centerY = centerX;
  1608. }
  1609. item.houseJson = JSON.stringify(spaceList);
  1610. }
  1611. })
  1612. })
  1613. console.log("户型详情列表-接口原始数据: ", list);
  1614. this.houseList = list;//数据会同步到组件中-进而反馈更新页面数据
  1615. }
  1616. },
  1617. onMouseMove(e){
  1618. return false;
  1619. },
  1620. goRoam1(spaceId){
  1621. let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
  1622. if(gltf){
  1623. this.goRoam(gltf)
  1624. }
  1625. },
  1626. //物体漫游-切换页面的方式进入
  1627. goRoam(gltf){
  1628. // console.log('是否漫游',this.isManyou ? '漫游' : '俯视',isManyou,this.repeatFlag);
  1629. if(gltf.spaceType==13){//楼梯不能跳转
  1630. return false
  1631. }
  1632. let spaceId = gltf.spaceId;//具体的空间Id
  1633. let data = {
  1634. spaceId:spaceId,
  1635. // curHouseObj:this.curHouseObj,
  1636. houseId:this.houseId,
  1637. }
  1638. if(this.repeatFlag){
  1639. return false;
  1640. }
  1641. this.repeatFlag = true;
  1642. router.push({
  1643. name: "webgl_rxdz_roam",
  1644. query:data
  1645. });
  1646. if(this.isIOS){
  1647. setStorage('curHouseObj', this.curHouseObj);
  1648. setStorage('wallList', this.wallList);
  1649. }
  1650. this.$store.dispatch('setCurHouseObj', this.curHouseObj);
  1651. this.$store.dispatch('setWallList', this.wallList);
  1652. setTimeout(()=> {
  1653. this.repeatFlag = false;
  1654. }, 1000);
  1655. },
  1656. //obj 物体对象,type 是否改变颜色
  1657. moveMeshCenter(obj,type){
  1658. console.warn("**moveMeshCenter***",obj)
  1659. if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
  1660. this.moveMeshCenterHandle(obj,type);
  1661. }
  1662. },
  1663. // 绘制地板
  1664. async loadSpace(){
  1665. this.spaceList = [];
  1666. this.wallIds = [];
  1667. this.layoutIds = [];
  1668. this.gltfSpaces = [];
  1669. this.curWallArr = [];
  1670. this.progress = 0;
  1671. if(!this.curHouseObj){//减少重复请求
  1672. return false
  1673. }
  1674. let type=[];
  1675. if(this.curHouseObj){
  1676. const spaceDetail = this.curHouseObj;
  1677. const spaceList = JSON.parse(spaceDetail.houseJson);
  1678. // 交换centerX, centerY;上一页面已经处理过了,这里不在需要处理
  1679. for (let index = 0; index < spaceList.length; index++) {
  1680. var element = spaceList[index];
  1681. // const centerX = JSON.parse(JSON.stringify(element.centerX))
  1682. // element.centerX = element.centerY;
  1683. // element.centerY = centerX;
  1684. element.wallMoveValue = "[0,0,0,0]"
  1685. this.spaceList.push(element);
  1686. this.wallIds.push(element.wallId);
  1687. this.layoutIds.push(element.layoutId);
  1688. type.push(element.spaceType);
  1689. if(element.isSelected){ // 默认选中空间
  1690. this.curSpaceObj = element;
  1691. }
  1692. }
  1693. if(!this.curSpaceObj && this.spaceList.length > 0){
  1694. this.curSpaceObj = this.spaceList[0];
  1695. }
  1696. }
  1697. console.log("该户型空间数据:", this.spaceList, this.layoutIds,type);
  1698. console.log("当前选中的空间:", this.curSpaceObj,this.curHouseObj);
  1699. this.spaceListBackup = JSON.parse(JSON.stringify(this.spaceList));
  1700. this.loaderSpaceArr(this.spaceList);
  1701. // 绘制墙体
  1702. this.getHouseTypeSpaceWalls();
  1703. },
  1704. // 添加文字标签
  1705. addWordLabel(){
  1706. if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
  1707. return false;
  1708. }
  1709. // 方案二
  1710. this.lableItem = [];
  1711. this.gltfSpaces.forEach((cube,index) =>{
  1712. // 给地板加上空间类型标注, 空间为链接空间的不显示
  1713. if(cube.spaceName && !cube.isSizeLock){
  1714. let spaceIndex = this.spaceList.filter(it=>it.spaceName && !it.isSizeLock).findIndex(item=>item.spaceId==cube.spaceId);
  1715. this.lableItem.push(
  1716. {
  1717. text:cube.spaceName,
  1718. spaceId:cube.spaceId,
  1719. spaceType:cube.spaceType,
  1720. transform:'',
  1721. spaceIndex:spaceIndex,
  1722. cubeIndex:index,
  1723. }
  1724. )
  1725. }
  1726. })
  1727. this.showLables = true;
  1728. // this.updateLables();//更新lable
  1729. },
  1730. // 获取墙体数据
  1731. async getHouseTypeSpaceWalls(){
  1732. let data = {id:this.wallIds}
  1733. const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
  1734. console.log("墙体数据:", res.list)
  1735. let wallList = [];
  1736. if(res.success){
  1737. wallList = this.wallList = res.list;
  1738. }
  1739. let wallArr = []
  1740. for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
  1741. let element = JSON.parse(wallList[index].wallJson);
  1742. let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
  1743. this.computeWallHandleOld(space,element);//提前计算
  1744. for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
  1745. let wallData = element.wallData[i];
  1746. //对应方向的墙壁的墙体模型数据列表,每一面墙可能有多个模型
  1747. for (let j = 0; j < wallData.wallModelData.length; j ++) {
  1748. let wallModelData = wallData.wallModelData[j];
  1749. wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
  1750. // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
  1751. }
  1752. }
  1753. }
  1754. this.loadSpaceObjWalls(wallArr, wallList);
  1755. this.getOverallArrangementDetailsList(2);
  1756. },
  1757. // 加载单个空间墙体资源
  1758. async loadSpaceObjWalls(wallArr, wallList){
  1759. // 加载远程墙体模型资源
  1760. let startTime = new Date().getTime();
  1761. // console.log("wallArr:", wallArr)
  1762. let promise_list = [];
  1763. let realWallArr = this.preWallData(wallArr);
  1764. let arrLength = realWallArr.length;
  1765. realWallArr && realWallArr.forEach((item,index) => {
  1766. promise_list.push(
  1767. new Promise((resolve, reject) => {
  1768. this.loadWallModels(item, wallList, arrLength , resolve);
  1769. })
  1770. )
  1771. });
  1772. Promise.all(promise_list).then(()=>{
  1773. let endTime = new Date().getTime();
  1774. console.log("模型全部加载完成,时间:",endTime - startTime);
  1775. this.progress = 100;
  1776. // this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
  1777. // 设置空间数组的墙体信息
  1778. // this.setSpaceListWallInfo();
  1779. this.$nextTick(()=>{
  1780. this.moveMeshCenter(this.curSpaceObj);
  1781. // this.myLoadingStatus = false;
  1782. // this.$refs.myLoading.hideLoading();
  1783. setTimeout(()=>{
  1784. this.addWordLabel(); // 添加文字标签
  1785. }, 610);
  1786. // 设置空间数组的墙体信息
  1787. })
  1788. })
  1789. },
  1790. // 选择墙体
  1791. selectedWall(direction){
  1792. if(!direction || direction==""){
  1793. return
  1794. }
  1795. console.log(`当前空间的id:${this.curSpaceObj.spaceId};墙面方向:${direction};宽度:${this.curSpaceObj.spaceWidth};宽度:${this.curSpaceObj.spaceHeight}`)
  1796. console.log("当前空间的:", this.curSpaceObj);
  1797. this.leftSpaces = [];
  1798. this.rightSpaces = [];
  1799. this.tempSpaceList = JSON.parse(JSON.stringify(this.spaceList));
  1800. // 计算关联空间
  1801. this.findLeftRelateSpace(this.curSpaceObj, direction);
  1802. console.log("空间数组:", this.leftSpaces, this.rightSpaces);
  1803. // 计算墙体的可移动范围
  1804. var min = 0;
  1805. var max = 300;
  1806. // 计算最小值
  1807. for (let index = 0; index < this.leftSpaces.length; index++) {
  1808. const element = this.leftSpaces[index];
  1809. console.log("左边空间数据:", element);
  1810. var spaceMoveNW = element.spaceWidth;
  1811. var spaceMoveSW = element.spaceWidth;
  1812. var spaceMoveEH = element.spaceHeight;
  1813. var spaceMoveWH = element.spaceHeight;
  1814. var curSpaceWall = [];
  1815. for (let index = 0; index < this.gltfWalls.length; index++) {
  1816. const wall = this.gltfWalls[index];
  1817. if(element.spaceId == wall.spaceId && wall.wallDirection != direction){
  1818. curSpaceWall.push(wall);
  1819. if((direction == "W" || direction == "E") && wall.wallDirection != direction){
  1820. if(wall.wallDirection == "N"){
  1821. spaceMoveNW -= wall.wallModelData.wallWidth;
  1822. console.log("北边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
  1823. }
  1824. if(wall.wallDirection == "S"){
  1825. spaceMoveSW -= wall.wallModelData.wallWidth;
  1826. console.log("南边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
  1827. }
  1828. this.curWallValue = Math.floor(Math.min(Math.min(spaceMoveNW, spaceMoveSW), this.curWallValue));
  1829. }
  1830. if((direction == "N" || direction == "S") && wall.wallDirection != direction){
  1831. if(wall.wallDirection == "E"){
  1832. spaceMoveEH -= wall.wallModelData.wallWidth;
  1833. console.log("东边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
  1834. }
  1835. if(wall.wallDirection == "W"){
  1836. spaceMoveWH -= wall.wallModelData.wallWidth;
  1837. console.log("西边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
  1838. }
  1839. this.curWallValue = Math.floor(Math.min(Math.min(spaceMoveEH, spaceMoveWH), this.curWallValue));
  1840. }
  1841. }
  1842. }
  1843. // 排序墙体数据
  1844. curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
  1845. curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
  1846. console.log("墙体模型:", curSpaceWall, spaceMoveNW, spaceMoveSW);
  1847. console.log("可缩小的最小值:", Math.floor(Math.min(spaceMoveNW, spaceMoveSW)));
  1848. if((direction == "W" || direction == "E") && element.spaceWidth == this.curWallValue){
  1849. this.curWallValue = 149;
  1850. }
  1851. if((direction == "N" || direction == "S") && element.spaceHeight == this.curWallValue){
  1852. this.curWallValue = 149;
  1853. }
  1854. // this.curWallValue = Math.floor(Math.min(spaceMoveNW, spaceMoveSW));
  1855. }
  1856. // 计算最大值
  1857. for (let index = 0; index < this.rightSpaces.length; index++) {
  1858. const element = this.rightSpaces[index];
  1859. console.log("右边空间数据:", element);
  1860. var spaceMoveNW = element.spaceWidth;
  1861. var spaceMoveSW = element.spaceWidth;
  1862. var spaceMoveEH = element.spaceHeight;
  1863. var spaceMoveWH = element.spaceHeight;
  1864. var curSpaceWall = [];
  1865. for (let index = 0; index < this.gltfWalls.length; index++) {
  1866. const wall = this.gltfWalls[index];
  1867. if(element.spaceId == wall.spaceId && wall.wallDirection != direction){
  1868. curSpaceWall.push(wall);
  1869. if((direction == "W" || direction == "E") && wall.wallDirection != direction){
  1870. if(wall.wallDirection == "N"){
  1871. spaceMoveNW -= wall.wallModelData.wallWidth;
  1872. console.log("北边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
  1873. }
  1874. if(wall.wallDirection == "S"){
  1875. spaceMoveSW -= wall.wallModelData.wallWidth;
  1876. console.log("南边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
  1877. }
  1878. this.curWallMaxValue = Math.floor(Math.min(spaceMoveNW, spaceMoveSW)) + this.curWallValue;
  1879. }
  1880. if((direction == "N" || direction == "S") && wall.wallDirection != direction){
  1881. if(wall.wallDirection == "E"){
  1882. spaceMoveEH -= wall.wallModelData.wallWidth;
  1883. console.log("东边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
  1884. }
  1885. if(wall.wallDirection == "W"){
  1886. spaceMoveWH -= wall.wallModelData.wallWidth;
  1887. console.log("西边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
  1888. }
  1889. this.curWallMaxValue = Math.floor(Math.min(spaceMoveEH, spaceMoveWH)) + this.curWallValue;
  1890. }
  1891. }
  1892. }
  1893. // 排序墙体数据
  1894. curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
  1895. curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
  1896. console.log("墙体模型:", curSpaceWall, spaceMoveNW, spaceMoveSW);
  1897. console.log("可缩小的最小值:", Math.floor(Math.min(spaceMoveNW, spaceMoveSW)));
  1898. }
  1899. console.log(`当前墙面的最大值:${this.curWallMaxValue}, 最小值:${this.curWallValue}`)
  1900. // 统计变化的空间
  1901. this.changeSpaces.push(...this.leftSpaces)
  1902. this.changeSpaces.push(...this.rightSpaces)
  1903. },
  1904. // 递归寻找左边->右边关联空间
  1905. findLeftRelateSpace(spaceObj, direction){
  1906. const {eastId, westId, northId, southId, spaceId} = spaceObj;
  1907. const leftIndex = this.tempSpaceList.findIndex((item)=>{
  1908. return item.spaceId == spaceId;
  1909. })
  1910. if(leftIndex!=-1){
  1911. const spaceObj = this.tempSpaceList[leftIndex];
  1912. this.leftSpaces.push(spaceObj);
  1913. this.tempSpaceList.splice(leftIndex,1);
  1914. const leftNextIndex = this.tempSpaceList.findIndex((item)=>{
  1915. if(direction == "E"){
  1916. return item.spaceId == eastId;
  1917. }else if(direction == "W"){
  1918. return item.spaceId == westId;
  1919. }else if(direction == "S"){
  1920. return item.spaceId == southId;
  1921. }else if(direction == "N"){
  1922. return item.spaceId == northId;
  1923. }
  1924. })
  1925. if(leftNextIndex!=-1){
  1926. const nextSpaceObj = this.tempSpaceList[leftNextIndex];
  1927. console.log("递归再一次", nextSpaceObj);
  1928. this.findRightRelateSpace(nextSpaceObj, direction);
  1929. }
  1930. const rightArr = this.tempSpaceList.filter((item)=>{
  1931. if(direction == "E"){
  1932. return item.westId == spaceId;
  1933. }else if(direction == "W"){
  1934. return item.eastId == spaceId;
  1935. }else if(direction == "S"){
  1936. return item.northId == spaceId;
  1937. }else if(direction == "N"){
  1938. return item.southId == spaceId;
  1939. }
  1940. })
  1941. for (let index = 0; index < rightArr.length; index++) {
  1942. const nextSpaceObj = rightArr[index];
  1943. // const nextSpaceObj = this.tempSpaceList[rightNextIndex];
  1944. console.log("递归再一次", nextSpaceObj);
  1945. this.findRightRelateSpace(nextSpaceObj, direction);
  1946. }
  1947. }
  1948. },
  1949. // 递归寻找右边->左边关联空间
  1950. findRightRelateSpace(spaceObj, direction){
  1951. const {eastId, westId, northId, southId, spaceId} = spaceObj;
  1952. const rightIndex = this.tempSpaceList.findIndex((item)=>{
  1953. return item.spaceId == spaceId;
  1954. })
  1955. if(rightIndex!=-1){
  1956. const spaceObj = this.tempSpaceList[rightIndex];
  1957. this.rightSpaces.push(spaceObj);
  1958. this.tempSpaceList.splice(rightIndex,1);
  1959. console.log("当前空间数组:", this.tempSpaceList);
  1960. const leftNextIndex = this.tempSpaceList.findIndex((item)=>{
  1961. if(direction == "E"){
  1962. return item.spaceId == westId;
  1963. }else if(direction == "W"){
  1964. return item.spaceId == eastId;
  1965. }else if(direction == "N"){
  1966. return item.spaceId == southId;
  1967. }else if(direction == "S"){
  1968. return item.spaceId == northId;
  1969. }
  1970. })
  1971. if(leftNextIndex!=-1){
  1972. const nextSpaceObj = this.tempSpaceList[leftNextIndex];
  1973. console.log("递归再一次", nextSpaceObj);
  1974. this.findLeftRelateSpace(nextSpaceObj, direction);
  1975. }
  1976. const rightArr = this.tempSpaceList.filter((item)=>{
  1977. if(direction == "E"){
  1978. return item.eastId == spaceId;
  1979. }else if(direction == "W"){
  1980. return item.westId == spaceId;
  1981. }else if(direction == "N"){
  1982. return item.northId == spaceId;
  1983. }else if(direction == "S"){
  1984. return item.southId == spaceId;
  1985. }
  1986. });
  1987. for (let index = 0; index < rightArr.length; index++) {
  1988. const nextSpaceObj = rightArr[index];
  1989. console.log("递归再一次", nextSpaceObj);
  1990. this.findLeftRelateSpace(nextSpaceObj, direction);
  1991. }
  1992. }
  1993. },
  1994. moveSpaceWall(direction, moveOut, moveValue){
  1995. // let isNS = (direction == "N" || direction == "S")
  1996. // if(!this.checkRightSpace(!moveOut, moveValue, isNS)){
  1997. // return
  1998. // }
  1999. // 隐藏变化空间的家具模型,空间动画结束后显示
  2000. if(moveValue<= 0){ // 无需变化
  2001. return
  2002. }
  2003. this.changeLayoutModelState();
  2004. console.log("关联空间XXXXX", this.leftSpaces, this.rightSpaces)
  2005. for (let index = 0; index < this.leftSpaces.length; index++) {
  2006. const element = this.leftSpaces[index];
  2007. const space = this.spaceList.find((item)=>{
  2008. return item.spaceId == element.spaceId;
  2009. })
  2010. this.moveWall(space, direction, moveOut, moveValue);
  2011. // this.wallTransform(space, direction, moveOut, moveValue);
  2012. }
  2013. let otherdirection = "";
  2014. switch (direction) {
  2015. case "E":
  2016. otherdirection = "W"
  2017. break;
  2018. case "W":
  2019. otherdirection = "E"
  2020. break;
  2021. case "N":
  2022. otherdirection = "S"
  2023. break;
  2024. case "S":
  2025. otherdirection = "N"
  2026. break;
  2027. }
  2028. for (let index = 0; index < this.rightSpaces.length; index++) {
  2029. const element = this.rightSpaces[index];
  2030. this.moveWall(element, otherdirection, !moveOut, moveValue);
  2031. }
  2032. console.log(`当前空间的后id:${this.curSpaceObj.spaceId};墙面方向:${direction};宽度:${this.curSpaceObj.spaceWidth};高度:${this.curSpaceObj.spaceHeight}`)
  2033. },
  2034. // 调整大小
  2035. // direction:方向
  2036. // moveOut:是否外移
  2037. // moveValue: 移动距离
  2038. moveWall(spaceObj, direction, moveOut, moveValue){
  2039. console.log(`移动的空间的id-------:${spaceObj.spaceId};移动方向:${direction};是否外移:${moveOut};移动距离:${moveValue}`)
  2040. const oldSpaceObj = JSON.parse(JSON.stringify(spaceObj))
  2041. const cube = this.gltfSpaces.find((item)=>{
  2042. return item.spaceId == spaceObj.spaceId;
  2043. })
  2044. if(!cube){
  2045. return
  2046. }
  2047. if(!moveOut){
  2048. moveValue = moveValue * -1;
  2049. }
  2050. const {position,scale} = cube;
  2051. // 重新计算缩放 和 位置
  2052. let toScaleX = scale.x;
  2053. let toScaleZ = scale.z;
  2054. let toPx = position.x;
  2055. let toPz = position.z;
  2056. if(direction == 'E' || direction == 'W'){
  2057. let spaceWidth = scale.x * 300;
  2058. toScaleX = (spaceWidth + moveValue) / 300;
  2059. if(direction == 'W'){
  2060. toPx = position.x - moveValue / 2 / 100;
  2061. }else{
  2062. toPx = position.x + moveValue / 2 / 100;
  2063. }
  2064. spaceObj.spaceWidth += moveValue;
  2065. spaceObj.centerX = toPx * 100;
  2066. }
  2067. if(direction == 'N' || direction == 'S'){
  2068. let spaceHeight = scale.z * 300;
  2069. toScaleZ = (spaceHeight + moveValue) / 300;
  2070. if(direction == 'N'){
  2071. toPz = position.z - moveValue / 2 / 100;
  2072. }else{
  2073. toPz = position.z + moveValue / 2 / 100;
  2074. }
  2075. spaceObj.spaceHeight += moveValue;
  2076. spaceObj.centerY = toPz * 100 * -1;
  2077. }
  2078. console.log("curSpaceObj",this.curSpaceObj.spaceId, spaceObj.spaceId, spaceObj.centerX, spaceObj.centerY, toScaleX,toScaleZ,toPx,toPz)
  2079. console.log("当前空间变化后的尺寸",spaceObj.spaceWidth, spaceObj.spaceHeight, spaceObj.spaceId)
  2080. // 更新数据
  2081. const spaceIndex = this.spaceList.findIndex((item)=>{
  2082. return item.spaceId == spaceObj.spaceId;
  2083. })
  2084. if(spaceIndex!=-1){
  2085. this.spaceList[spaceIndex] = spaceObj;
  2086. if(this.curSpaceObj.spaceId == spaceObj.spaceId){
  2087. this.curSpaceObj = spaceObj;
  2088. }
  2089. }
  2090. this.curHouseObj.houseJson = JSON.stringify(this.spaceList);
  2091. //空间动画处理-提取到floorMethod.js中
  2092. this.changeSpacesAnim({spaceId:spaceObj.spaceId,toScaleX,toScaleZ,toPx,toPz,spaceObj})
  2093. // 墙体动画处理
  2094. //// 根据空间尺寸,更新前提数据
  2095. const wallObj = this.wallList.find((item)=>{
  2096. return item.id == spaceObj.wallId;
  2097. })
  2098. const initSpaceObj = this.spaceListBackup.find((item)=>{
  2099. return item.spaceId == spaceObj.spaceId;
  2100. })
  2101. if(wallObj){
  2102. let element = JSON.parse(wallObj.wallJson);
  2103. console.warn("****wallObj**",element)
  2104. this.computeWallHandle(initSpaceObj, spaceObj, element, moveOut, direction); // 重新计算-并把空间的计算结果同步到gltfWalls中
  2105. }
  2106. // 移动墙体
  2107. let curSpaceWall = [];
  2108. for (let index = 0; index < this.gltfWalls.length; index++) {
  2109. const element = this.gltfWalls[index];
  2110. if(spaceObj.spaceId == element.spaceId){
  2111. curSpaceWall.push(element);
  2112. }
  2113. }
  2114. //移动的是西方的墙壁 和 南方的墙壁,该空间的几何体中心则移动变化
  2115. if(direction == 'W' || direction == 'S'){
  2116. spaceObj.rightCenter = true;
  2117. }
  2118. //移动的是东方的墙壁 和 北方的墙壁,该空间的几何体中心则不移动变化
  2119. if(direction == 'E'|| direction == 'N'){
  2120. spaceObj.rightCenter = false;
  2121. }
  2122. spaceObj.direction = direction
  2123. // 排序墙体数据
  2124. curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
  2125. curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
  2126. console.log("移动的墙体:", spaceObj, direction, curSpaceWall);
  2127. // return;
  2128. for (let index = 0; index < curSpaceWall.length; index++) {
  2129. const element = curSpaceWall[index];
  2130. console.log("重新计算墙体-墙体数据:", element, element);
  2131. this.drawModel(element.wallModelData, spaceObj, element, true)
  2132. }
  2133. // }
  2134. },
  2135. // 空隙自动补签逻辑
  2136. autoCreateWall(directionIndex, spaceObj){
  2137. let direction = ""
  2138. switch (directionIndex) {
  2139. case 1:
  2140. direction = "N"
  2141. break;
  2142. case 2:
  2143. direction = "S"
  2144. break;
  2145. case 3:
  2146. direction = "W"
  2147. break;
  2148. case 4:
  2149. direction = "E"
  2150. break;
  2151. default:
  2152. break;
  2153. }
  2154. // 东西墙 检查 南北墙关联空间 南北墙 检查 东西墙关联空间
  2155. if(direction == "E" || direction == "W"){
  2156. if(spaceObj.quadrant == 3 || spaceObj.quadrant == 4){ // 南边空间
  2157. console.log("南北朝向墙自动补齐", this.leftSpaces, this.rightSpaces)
  2158. this.selectedWall("N");
  2159. this.checkIsAutoCreateWall("N", spaceObj)
  2160. this.selectedWall("S");
  2161. this.checkIsAutoCreateWall("S", spaceObj)
  2162. let autoWall = this.gltfAutoWalls.find(item=>{
  2163. return item.spaceId == spaceObj.spaceId ;
  2164. })
  2165. if(autoWall){
  2166. console.log("南北朝向墙自动补齐---", autoWall, this.gltfAutoWalls)
  2167. if(autoWall.wallDirection == "E"){
  2168. autoWall.obj.position.x = (spaceObj.centerX + (spaceObj.spaceWidth / 2) - 5) / 100
  2169. }
  2170. }
  2171. }else{ // 北边关联空间
  2172. }
  2173. }else{
  2174. if(spaceObj.quadrant == 3 || spaceObj.quadrant == 4){ // 南边空间
  2175. console.log("东西朝向墙自动补齐", this.leftSpaces, this.rightSpaces)
  2176. this.selectedWall("E");
  2177. this.checkIsAutoCreateWall("E", spaceObj)
  2178. this.selectedWall("W");
  2179. this.checkIsAutoCreateWall("W", spaceObj)
  2180. }else{ // 北边关联空间
  2181. }
  2182. }
  2183. },
  2184. // 检测是否需要补强
  2185. checkIsAutoCreateWall(direction, spaceObj){
  2186. var that = this;
  2187. // 判断南边墙是否需要补充
  2188. if(this.rightSpaces.length == 0){
  2189. console.log("不需要补墙1", direction, this.gltfAutoWalls)
  2190. return;
  2191. }
  2192. const n = (direction == "S" || direction == "E") ? 1 : -1; // 南北方向计算系数
  2193. console.log("自动补墙", this.leftSpaces, this.rightSpaces);
  2194. let px = 0;
  2195. let pz = 0;
  2196. let sx = 1;
  2197. let sz = 1;
  2198. let rightids = []
  2199. if(spaceObj.quadrant == 3){
  2200. // 左边空间的最大值
  2201. let leftMaxValue = 0;
  2202. for (let index = 0; index < this.leftSpaces.length; index++) {
  2203. const element = this.leftSpaces[index];
  2204. if(direction=="S" || direction == "N"){
  2205. const curvalue = element.centerX + element.spaceWidth / 2
  2206. if(leftMaxValue < curvalue){
  2207. leftMaxValue = curvalue
  2208. }
  2209. }else{
  2210. leftMaxValue += (-element.centerY + element.spaceHeight / 2)
  2211. }
  2212. }
  2213. // rightSpaces右边最大值
  2214. let rightMaxValue = 0;
  2215. for (let index = 0; index < this.rightSpaces.length; index++) {
  2216. const element = this.rightSpaces[index];
  2217. if(direction=="S" || direction == "N"){
  2218. const curvalue = element.centerX + element.spaceWidth / 2
  2219. if(rightMaxValue < curvalue){
  2220. rightMaxValue = curvalue
  2221. }
  2222. }else{
  2223. rightMaxValue += -element.centerY + element.spaceHeight / 2
  2224. }
  2225. rightids.push(element.spaceId)
  2226. }
  2227. // 是否有墙
  2228. const index = this.gltfWalls.findIndex(item=>{
  2229. // console.log("墙面模型", item)
  2230. return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
  2231. })
  2232. // 有墙,左边墙>右边墙,计算南北墙
  2233. if(index != -1 && leftMaxValue > rightMaxValue && (direction == "S" || direction == "N")){
  2234. console.log("不需要补墙251",index, leftMaxValue, rightMaxValue)
  2235. // 是否补过墙
  2236. const autoWall = this.gltfAutoWalls.find(item=>{
  2237. return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "S" ? "N": "S");
  2238. })
  2239. if(autoWall){
  2240. let cube = autoWall.obj;
  2241. if(cube){
  2242. cube.scale.set(0,0,0);
  2243. }
  2244. }
  2245. return
  2246. }
  2247. // 有墙,左边墙>右边墙,计算东西墙
  2248. if(index != -1 && leftMaxValue > rightMaxValue && (direction == "E" || direction == "W")){
  2249. console.log("不需要补墙252",index, leftMaxValue, rightMaxValue, spaceObj.spaceId, direction, this.gltfAutoWalls)
  2250. const autoWall = this.gltfAutoWalls.find(item=>{
  2251. return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "E" ? "W": "E");
  2252. })
  2253. if(autoWall){
  2254. let cube = autoWall.obj;
  2255. if(cube){
  2256. cube.scale.set(0,0,0);
  2257. }
  2258. }
  2259. return
  2260. }
  2261. let wallOffset = index != -1 ? -5 : 5;
  2262. console.log("空间最大值", leftMaxValue, rightMaxValue, direction, index);
  2263. const cubeW = Math.abs(leftMaxValue - rightMaxValue);
  2264. if(direction=="S" || direction == "N"){
  2265. px = (Math.min(leftMaxValue, rightMaxValue) + cubeW / 2) / 100
  2266. pz = (-spaceObj.centerY + spaceObj.spaceHeight * n / 2 + wallOffset * n) / 100;
  2267. sx = cubeW / 10 ;
  2268. // 长边有墙
  2269. }else{
  2270. px = (spaceObj.centerX + spaceObj.spaceWidth * n / 2 + wallOffset * n) / 100;
  2271. pz = (Math.max(leftMaxValue, rightMaxValue) - cubeW / 2) / 100
  2272. sz = cubeW / 10;
  2273. }
  2274. }else{
  2275. let leftMinValue = 0;
  2276. for (let index = 0; index < this.leftSpaces.length; index++) {
  2277. const element = this.leftSpaces[index];
  2278. if(direction=="S" || direction == "N"){
  2279. leftMinValue += (element.centerX - element.spaceWidth / 2)
  2280. }else{
  2281. leftMinValue += (-element.centerY + element.spaceHeight / 2)
  2282. }
  2283. }
  2284. // rightSpaces右边最大值
  2285. let rightMinValue = 0;
  2286. for (let index = 0; index < this.rightSpaces.length; index++) {
  2287. const element = this.rightSpaces[index];
  2288. if(direction=="S" || direction == "N"){
  2289. rightMinValue += (element.centerX - element.spaceWidth / 2)
  2290. }else{
  2291. rightMinValue = (-element.centerY + element.spaceHeight / 2)
  2292. }
  2293. rightids.push(element.spaceId)
  2294. }
  2295. const index = this.gltfWalls.findIndex(item=>{
  2296. // console.log("墙面模型", item)
  2297. return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
  2298. })
  2299. if(index != -1 && leftMinValue < rightMinValue && (direction == "S" || direction == "N")){
  2300. console.log("不需要补墙251")
  2301. return
  2302. }
  2303. if(index != -1 && leftMinValue > rightMinValue && (direction == "E" || direction == "W")){
  2304. console.log("不需要补墙252")
  2305. return
  2306. }
  2307. let wallOffset = index != -1 ? -5 : 5;
  2308. console.log("空间最大值", leftMinValue, rightMinValue);
  2309. const cubeW = Math.abs(leftMinValue - rightMinValue);
  2310. if(leftMinValue > rightMinValue && index == -1 && (direction == "S" || direction == "N")){
  2311. console.log("不需要补墙241", leftMinValue, rightMinValue)
  2312. const autoWall = this.gltfAutoWalls.find(item=>{
  2313. return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "S" ? "N": "S");
  2314. })
  2315. if(autoWall){
  2316. let cube = autoWall.obj;
  2317. if(cube){
  2318. cube.scale.set(0,0,0);
  2319. }
  2320. }
  2321. return
  2322. }
  2323. if(leftMinValue < rightMinValue && index == -1 && (direction == "E" || direction == "W")){
  2324. console.log("不需要补墙242", leftMinValue, rightMinValue)
  2325. const autoWall = this.gltfAutoWalls.find(item=>{
  2326. return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "W" ? "E": "W");
  2327. })
  2328. if(autoWall){
  2329. let cube = autoWall.obj;
  2330. if(cube){
  2331. cube.scale.set(0,0,0);
  2332. }
  2333. }
  2334. return
  2335. }
  2336. if(direction=="S" || direction == "N"){
  2337. px = (Math.max(leftMinValue, rightMinValue) - cubeW / 2) / 100
  2338. pz = (-spaceObj.centerY + spaceObj.spaceHeight * n / 2 + wallOffset * n) / 100;
  2339. sx = cubeW / 10;
  2340. }else{
  2341. px = (spaceObj.centerX + spaceObj.spaceWidth * n / 2 + wallOffset * n) / 100;
  2342. pz = (Math.max(leftMinValue, rightMinValue) - cubeW / 2) / 100
  2343. sz = cubeW / 10;
  2344. }
  2345. }
  2346. console.log("空间最大值", px, pz, sx, sz, this.gltfAutoWalls);
  2347. // 寻找是否已添加过墙面
  2348. const autoWall = this.gltfAutoWalls.find(item=>{
  2349. return (item.spaceId == spaceObj.spaceId && item.wallDirection == direction)
  2350. || (item.rightids.findIndex(it=>{ return it == spaceObj.spaceId})!=-1 && item.wallDirection == direction == "S"?"N":"S")
  2351. || (item.rightids.findIndex(it=>{ return it == spaceObj.spaceId})!=-1 && item.wallDirection == direction == "E"?"W":"E")
  2352. })
  2353. if(this.curWallDirection == "S"){
  2354. if(spaceObj.southId > 0){
  2355. return
  2356. }
  2357. }
  2358. if(this.curWallDirection == "E"){
  2359. if(spaceObj.eastId > 0){
  2360. return
  2361. }
  2362. }
  2363. if(this.curWallDirection == "N"){
  2364. if(spaceObj.northId > 0){
  2365. return
  2366. }
  2367. }
  2368. if(this.curWallDirection == "W"){
  2369. if(spaceObj.westId > 0){
  2370. return
  2371. }
  2372. }
  2373. if(autoWall){
  2374. console.log("修改补墙的信息", px, pz, sx, sz);
  2375. let cube = autoWall.obj;
  2376. cube.position.set(px,0,pz);
  2377. cube.scale.set(sx,1,sz);
  2378. }else{
  2379. console.log("添加补墙的信息", px, pz, sx, sz);
  2380. that.loader.load(wallType[0].url, ( gltf ) => {
  2381. let cube = gltf.scene;
  2382. cube.position.set(px,0,pz);
  2383. cube.scale.set(sx,1,sz);
  2384. that.scene.add(cube);
  2385. let md = {
  2386. obj:cube,
  2387. wallDirection:direction,
  2388. spaceId:spaceObj.spaceId,
  2389. quadrant:spaceObj.quadrant,
  2390. rightids:rightids
  2391. };
  2392. that.gltfAutoWalls.push(md);
  2393. // console.log("模型加载成功", that.gltfAutoWalls, spaceObj.spaceId);
  2394. });
  2395. }
  2396. },
  2397. // 墙体缩放逻辑
  2398. wallTransform(spaceObj, direction, moveOut, moveValue){
  2399. console.log(`移动的空间的id:${spaceObj.spaceId};移动方向:${direction};是否外移:${moveOut};移动距离:${moveValue}`)
  2400. },
  2401. updateWallModels(){
  2402. let that = this;
  2403. console.log("开始替换墙体模型", this.leftSpaces, this.rightSpaces, this.gltfWalls);
  2404. let promise_list = [];
  2405. // const gltfWalls = JSON.parse(JSON.stringify(this.gltfWalls))
  2406. this.gltfWalls.forEach((item,index) => {
  2407. promise_list.push(
  2408. new Promise((resolve, reject) => {
  2409. this.loadChangeWallModels(item, resolve);
  2410. })
  2411. )
  2412. });
  2413. Promise.all(promise_list).then(()=>{
  2414. this.$nextTick(()=>{
  2415. let newArr = [];
  2416. const newWalls = that.gltfWalls.filter(it=>{
  2417. return !it.isDidWall
  2418. })
  2419. that.gltfWalls = newWalls;
  2420. console.log("加载完成2",newWalls, newArr, that.gltfWalls, that.wallList);
  2421. })
  2422. })
  2423. },
  2424. }
  2425. }
  2426. </script>
  2427. <style lang="scss" scoped>
  2428. @import "./webgl_rxdz.scss";
  2429. </style>