webgl_rxdz - 副本.vue 96 KB

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