webgl_rxdz_test.vue 97 KB

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