webgl_rxdz.vue 95 KB

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