webgl_rxdz_test_all.vue 132 KB

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