123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508 |
- <template src="./webgl_rxdz.html"></template>
- <script>
- import * as THREE from 'three';
- import Stats from 'three/addons/libs/stats.module.js';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
- import TWEEN from 'three/addons/libs/tween.module.js';
- import router from "@/router";
- var requestId = "";
- const util = require('@/utils/util.js').default;
- // const config = require('@/services/urlConfig.js');
- import wallType from '@/static/wallData.js';
- // import modelData from '@/webgl/static/layoutModelData.js';
- // import requestConfig from '@/services/requestConfig.js';
- // import viewShell from'@/webgl/components/newBottomCom/viewShell/viewShell.vue';
- // import * as BufferGeometryUtils from '@/webgl/jsm/utils/BufferGeometryUtils.js';
- import screenshot from '@/mixins/screenshot.js';
- import floorMethod from '@/mixins/floorMethod.js';
- import wallMethod from '@/mixins/wallMethod.js';
- import loadModel from '@/mixins/loadModel.js';
- import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
- export default {
- name:"webgl_rxdz",
- components:{viewShell},
- mixins:[screenshot,floorMethod,wallMethod,loadModel],
- /**
- * 页面的初始数据
- */
- data() {
- return {
- pvCurPageName: "home_show",
- locusBehaviorName: "主界面",
- pvCurPageParams: null,
- houseId: "",
- pvId: 'p_2cmina_23080401',
- canvas:null,
- navbar: {
- showCapsule: 0,
- title: '',
- titleColor: '#000',
- navPadding: 0,
- navPaddingBg:'transparent',
- navBarColor: 'transparent',
- navBackColor: 'transparent',
- haveCallback: false,
- fromShare: false,
- fromProject: 0,
- shareToken: "",
- pageName: this.pvCurPageName,
- },
- id:'232',// 户型编号
- spaceList:[], // 空间列表
- spaceListBackup:[], // 空间列表原始尺寸备份,用于墙体比例计算
- gltfSpaces:[], // 场景中地板模型数组
- curSpaceObj:null, // 当前选中的空间
- // curSpaceIndex:-1, // 当前选中的空间索引
- curWallDirection:"", // 当前选中的墙面
- curWallValue:0, // 当前墙面的滑动值
- curWallMaxValue:300,
- curWallHidden:false, // 当前墙面的状态
- wallIds:[], // 空间墙体id
- wallList:[], // 墙体数据
- gltfWalls:[], // 场景中墙体模型数组
- gltfAutoWalls:[],// 空间自动补墙模型数组
- // lastWallPosition:0, // 当面墙中墙体模型的开始位置
- tempSpaceList:[],// 全部空间临时数组,寻找关联空间,递归使用
- leftSpaces:[], // 移动空间左边数组
- rightSpaces:[],// 移动空间右边数组
- changeSpaces:[],// 尺寸变化涉及到的全部空间
- loader:null,
- scene:null,
- sky:null,
- camera:null,
- houseList:[], //当前户型所有的户型详情,可以切换
- curHouseType: null, //当前选中的户型类型
- curHouseName:'',//当前选中的户型类型名称
- curHouseFloor: null, //当前选中的户型楼层
- curHouseObj: null,
- controlStarPosition : { x:0, y:0, z:0}, //控制器初始位置
- cameraStarPosition : { x:0, y:20, z:0} ,//摄像头初始位置
- // cameraLastPosition: null, //摄像头上一次移动到的位置
- // controlLastPosition: null, //观察点上一次移动到的位置
- canvasHeight:200, //canvas视图的高度-计算得出
- chooseMesh:null,//标记鼠标拾取到的mesh
- // chooseMeshColor:'', //拾取到的mesh的原始颜色;
- chooseWallMeshColor:'', // 拾取墙体原始颜色
- curWallArr:[], // 当前空间选中墙面的墙体模型
- isManyou: false, //当前是否处在漫游状态
- pageShowIndex: 2, // 默认户型列表页面
- aleadyLoaderModel:[], //已经加载的墙体元数据模型列表
- // fontLabelGroup: [],
- shottingImg: [],
- progress:1, //进度条
- myLoadingStatus:false,
- // textGeoList:[],
- repeatFlag:false, //重复点击
- skyPlan: null, // 天空盒子
- instancedMeshList: [],
- lableItem:[],
- showLables:false,
- loadOver:false,
- voiceMaskShow:false, //录音时的蒙层是否显示
- minspace1: null,
- minspace2: null,
- minspace3: null,
- minspace4 : null,
- spaces1 : [],
- spaces2 : [],
- spaces3 : [],
- spaces4 : [],
-
- layoutIds:[], // 空间墙体id
- layoutLists:[], // 墙体数据
- gltfLayouts:[], // 场景中墙体模型数组
- screenshotResolve:null,
- curLayoutStruct:null,//当前户型大类下所有楼层数据-用于提交
- overChange:false, //是否形变中
- isIos:false, //是否ios手机。默认不是
- currentChangeSpaceId:null, //当前变化的空间id
- styleType:1,
- }
- },
- beforeDestroy() {
- cancelAnimationFrame(requestId, this.canvas)
- this.worker && this.worker.terminate()
- // setTimeout(() => {
- if (this.renderer instanceof THREE.WebGLRenderer) {
- this.renderer.dispose()
- this.renderer.forceContextLoss()
- this.renderer.context = null
- this.renderer.domElement = null
- this.renderer = null;
- this.clearEvent()
- }
- this.gltfWalls = [];
- this.gltfSpaces = [];
- this.instancedMeshList = [];
- this.instancedSpaceMeshList = [];
- this.lableItem = [];
- this.gltfLayouts = [];
- this.instancedFurList = [];
- this.wallList = [];
- TWEEN && TWEEN.removeAll();//清除所有的tween;
- // }, 0)
- },
- mounted() {
- console.log("***onLoad-webgl_rxdz***", this.$route.query)
- var that = this;
- this.houseId = this.$store.state.houseId || '';
- this.childLayout = '0';//4-测试户型
- let unit = window.screen.width / 750;//单位rpm 对应 px 的值
- that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
-
- const container = this.$refs.webgl;
- const canvas3d = this.canvas = this.$refs.glcanvas;
-
- let camera = null, renderer = null, controls=null;
- // let trackballControls = null;
- console.warn("***loader0***",this.loader)
- let loader = null;
- loader = this.loader = new GLTFLoader();
- this.getInitData();//请求获取页面模型数据等
- let scene = this.scene = new THREE.Scene();
- let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
- let isUserContorl = false;
- let tweenCameraAnma = false; //表示当前是否处在动画过程中
- let needRender = false; //是否需要渲染 false表示不需要渲染;true 表示需要渲染
- let frustumSize = 30;//正交相机的视窗宽度距离
- let stats;
- init();
- // render();
- // this.$refs.myLoading.showLoading("加载中..." + this.progress+"%")
- // this.myLoadingStatus = true;
- this.progress = 1;
- this.clearEvent = clearEvent;
- this.attendEvent = attendEvent;
- this.updateLables = updateLables;
- this.enableRenderHandle = enableRender;
- this.tweenCameraAnmaChange = tweenCameraAnmaChange;
- this.gradientResize = gradientResize;
- this.moveMeshCenterHandle = moveMeshCenterHandle;
- this.starRender = starRender;//对外暴露启动渲染的方法
- this.cameraInit = cameraInit;
- this.resetControl = resetControl;
- function init() {
- scene.background = new THREE.Color("#FFFFFF");
- // scene.environment = new THREE.Color("#F2F2F2");
- // 创建相机位置-投影相机
- camera = new THREE.PerspectiveCamera( 80, window.screen.width / that.canvasHeight, 0.1, 10000 );
- // let aspect = window.screen.width / that.canvasHeight;
- // camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1,1000);
- camera.up.set(0, 1, 0);//俯视状态,将相机的up向量设置为z轴负方向
- scene.add(camera);
- that.camera = camera;
- // 辅助方格
- // const axesHelper = new THREE.AxesHelper( 50 );
- // scene.add( axesHelper );
- // const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
- // gridHelper.position.y = 0;
- // gridHelper.position.x = 0;
- // scene.add(gridHelper);
- // 环境光会均匀的照亮场景中的所有物体
- const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
- scene.add(ambientLight);
- //平行光
- const light = new THREE.DirectionalLight(0xFFF8E5, 3);
- light.position.set(-3, 9, 3); //default; light shining from top
- light.castShadow = true; // default false
- // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域,光源投射方向为通过坐标原点
- light.shadow.camera.left = -100; // default
- light.shadow.camera.right = 100; // default
- light.shadow.camera.top = 100; // default
- light.shadow.camera.bottom = -100; // default
-
- light.shadow.mapSize.width = 8192; // default
- light.shadow.mapSize.height = 8192; // default
- // light.shadow.camera.near = 0.1; // default
- // light.shadow.camera.far = 500; // default
-
- // light.shadow.bias = -0.01;
- // light.shadow.radius = 1;
- // light.shadow.darkness = 1; // 设置阴影强度为0.5
- scene.add(light);
-
- // const helper = new THREE.CameraHelper( light.shadow.camera );
- // scene.add(helper);
- // 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
- // const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
- // camera.add( pointLight );
-
- //antialias 这个值得设置为false,不然IOS上截图会失效
- renderer = that.renderer = new THREE.WebGLRenderer({
- canvas:canvas3d,
- alpha: true,
- antialias:false,
- // 如果想保存three.js canvas画布上的信息,注意设置preserveDrawingBuffer
- preserveDrawingBuffer: true,
- });
- renderer.shadowMap.enabled = true;//产生阴影
- renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
- renderer.outputEncoding = THREE.sRGBEncoding;
- renderer.outputColorSpace = THREE.SRGBColorSpace;
- // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
- renderer.toneMapping = THREE.NoToneMapping;//色调映射
- renderer.physicallyCorrectLights = true;//关键参数,模拟物理光照影响,必须设置为true
-
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setSize( window.screen.width, that.canvasHeight );
- container.appendChild( renderer.domElement );
-
- controls = new OrbitControls(camera, renderer.domElement);
- controls.screenSpacePanning = true;
- controls.enableDamping = true;
- controls.minDistance = 1;
- controls.maxDistance = 400;
- controls.minPolarAngle = 0;// 默认0
- controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI,即可以向下旋转到的视角。
- controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
- controls.enableZoom = true;//启用摄像机的缩放
-
- // 监听相机移动事件-限制只能在当前空间范围内移动
- controls.addEventListener('change', () => {
- // 检查相机位置是否超出边界框
- if (camera.position.y < 0) {
- camera.position.y = 0;
- }
- });
- // controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
- // stats = new Stats();
- // container.appendChild(stats.dom);
- // stats.domElement.style.top = '100px';
- attendEvent(); //注册监听事件
- starRender(); //启动渲染
- cameraInit(); //初始化摄像头
- controls.saveState();//保存当前控制器的状态
- }
- //初始化相机位置
- function cameraInit(){
- camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
- camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
- }
- //初始状态
- function resetControl(){
- controls.reset();
- }
- function onWindowResize() {
- camera.aspect = window.screen.width / that.canvasHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.screen.width, that.canvasHeight );
- console.warn("****onWindowResize**")
- }
- function attendEvent () {
- window.addEventListener('resize', onWindowResize);
- renderer.domElement.addEventListener('touchstart', onPointerStart, false);
- renderer.domElement.addEventListener('touchmove', onPointerMove, false);
- renderer.domElement.addEventListener('touchend', onPointerUp, false);
- }
- function tweenCameraAnmaChange (value) {
- tweenCameraAnma = value
- }
- //开启渲染-帧率优化,不触发时停止渲染
- function enableRender() {
- }
- //取消事件监听-避免二次进入时触发多次事件
- function clearEvent(){
- console.warn("**clearEvent****")
- renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
- renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
- renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
- }
- // 手指移动开始
- function onPointerStart(event){
- console.log('开始触摸事件:',that.overChange)
- if(that.overChange){//形变中,不能相应用户操作
- return false;
- }
- }
- //持续触摸中
- function onPointerMove( event ) {
- if(that.overChange){//形变中,不能相应用户操作
- return false;
- }
- // that.showLables = false;
- }
- //触摸结束
- function onPointerUp(event) {
- if(that.overChange){//形变中,不能相应用户操作
- return false;
- }
- // enableRender();
- if(event.touches.length==0){
- // that.showLables = true;
- // updateLables();
- }
- }
- //把摄像机移动的选中模型的正上方,观察点也变更为模型中心点,同时选中模型
- function moveMeshCenterHandle(mesh = null,noChangeColor = true){
- if(mesh){//如果传入了模型,则取模型
- let spaceId = mesh.spaceId;//空间id
- if(chooseMesh && spaceId == chooseMesh.spaceId){
- console.warn("**moveMeshCenterHandle-重复选中了***")
- return false;
- }
- chooseMesh = mesh;
- }
- if(!chooseMesh){
- console.warn("**moveMeshCenterHandle-没有数据***")
- return false;
- }
- that.showLables = false;//隐藏
- // controls.enable = false;//控制器不响应用户的操作
- let spaceObj = chooseMesh;//获取空间模型的相关数据
- // controls.panTo(spaceObj.centerX/100, camera.position.y, -spaceObj.centerY/100);
- let cameraNewPosition ={};
- let targetNewPosition ={};
- let oldUp = {};
- let newUp = {};
- if (isUserContorl === false) { // 非漫游状态
- cameraNewPosition = {
- x:spaceObj.centerX/100,
- y:camera.position.y,
- z:-spaceObj.centerY/100,
- }
- //新的观察点的位置-取模型的中心点坐标,加上高度,由于模型都是贴地的,所以高度设置为0
- targetNewPosition = {
- x:spaceObj.centerX/100,
- y:0,
- z:-spaceObj.centerY/100,
- }
- oldUp = camera.up;//俯视状态
- newUp = camera.up
- // that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
- // that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
- }
- console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
- ,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
- tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,1000);
- setTimeout(()=>{
- that.showLables = true;
- // updateLables();
- },1001);//动画结束后回复原始状态
- }
-
- // oldP 相机原来的位置
- // oldT target原来的位置
- // newP 相机新的位置
- // newT target新的位置
- function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
- if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
- return false;
- }
- if (!chooseMesh) {
- return false;
- }
- tweenCameraAnma = true;
- var tween = new TWEEN.Tween({
- x1: oldP.x, // 相机x
- y1: oldP.y, // 相机y
- z1: oldP.z, // 相机z
- x2: oldT.x, // 控制点的中心点x
- y2: oldT.y, // 控制点的中心点y
- z2: oldT.z, // 控制点的中心点z
- x3: oldUp.x, // 控制点的中心点x
- y3: oldUp.y, // 控制点的中心点y
- z3: oldUp.z // 控制点的中心点z
- })
- .to({
- x1: newP.x,
- y1: newP.y,
- z1: newP.z,
- x2: newT.x,
- y2: newT.y,
- z2: newT.z,
- x3: newUp.x, // up向量
- y3: newUp.y, // 控制点的中心点y
- z3: newUp.z // 控制点的中心点z
- }, time)
- .easing(TWEEN.Easing.Quadratic.InOut)
- .onUpdate((object)=> {
- camera.position.x = object.x1;
- camera.position.y = object.y1;
- camera.position.z = object.z1;
- let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
- camera.up.copy(newTarget);
- camera.lookAt(object.x2,object.y2,object.z2);
- // controls.target.x = object.x2;
- // controls.target.y = object.y2;
- // controls.target.z = object.z2;
- // controls.update();
- // console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
- }).onComplete(()=>{
- controls.target.x = newT.x;
- controls.target.y = newT.y;
- controls.target.z = newT.z;
- //修正最后的视角
- let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
- camera.up.copy(up);
- camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
- tweenCameraAnma = false;
- })
- // 开始动画
- tween.start();
- }
- //高度持续变化处理 time 动画持续时间 单位秒
- function gradientResize (time,startHeight,endHeight) {
- let _timeStep = 20;//单位 毫秒
- // let unit = window.screen.width / 750;//单位rpm 对应 px 的值
- // that.canvasHeight = window.screen.height - (200 * unit) + (20 * unit);
-
- let unit = window.screen.width / 750;//单位rpx 对应 px 的值
- let _height = startHeight - endHeight;//高度变化-单位rpx
- let _jisua = that.canvasHeight;
- let lastHeight = _jisua + (_height * unit);//动画结束时的高度值; 单位 px
- that.canvasHeight = lastHeight;//触发css动画
- let step = (_height * unit) / (time*1000 / _timeStep);//真实大小 单位px
- console.warn("***gradientResize***",step,lastHeight,_jisua,startHeight,endHeight)
- // that.showLables = false;
- // let canvas_webgl = document.getElementById('canvas_webgl');
- var tween = new TWEEN.Tween({
- h1: _jisua,
- })
- .to({
- h1: lastHeight,
- }, 1000)
- .easing(TWEEN.Easing.Linear.None)
- .onUpdate((object)=> {
- if(camera.isOrthographicCamera){//正交相机
- let aspect = window.screen.width / object.h1;
- camera.left = frustumSize * aspect / - 2;
- camera.right = frustumSize * aspect / 2;
- camera.top = frustumSize / 2;
- camera.bottom = frustumSize / -2;
- camera.updateProjectionMatrix();
- // that.canvasHeight = object.h1;
- }
- else if(camera.isPerspectiveCamera){//透视相机
- camera.aspect = window.screen.width / object.h1;
- camera.updateProjectionMatrix();
- renderer.setSize( window.screen.width, object.h1 );
- // that.canvasHeight = object.h1;
- }
- }).onComplete(()=>{
- camera.aspect = window.screen.width / that.canvasHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.screen.width, that.canvasHeight );
- tweenCameraAnma = false;
- // that.showLables = true;
- // updateLables();//更新lable
- });
- // 开始动画
- tween.start();
- tweenCameraAnma = true;
- }
- //更新lables
- function updateLables(){
- if(!that.showLables){
- return false;
- }
- that.lableItem.forEach(lable =>{
- if(!that.gltfSpaces[lable.cubeIndex] || !that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList){
- return false;
- }
- let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
- let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
- let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
- let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
- instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
- let position = new THREE.Vector3();//当前几何体的位置参数
- position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
- // console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
- position.project(camera);
- const x = (position.x * .5 + .5) * window.screen.width;
- const y = (position.y * -.5 + .5) * that.canvasHeight;
- lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
- })
- }
- function stopRender () {
- needRender = false;
- }
- function starRender () {
- if(needRender==true){//如果已经在渲染中了,则不能再次开启,避免渲染过多
- false;
- }
- needRender = true;
- render();//开始渲染
- }
- function render() {
- if(needRender==false){
- return false;
- }
- TWEEN && TWEEN.update();
- // stats.update();
- //不处在动画过程中,则可以处理移动等动作
- if(tweenCameraAnma==false){
- controls.update();
- updateLables();//更新lable
- }
- requestId = requestAnimationFrame(render, canvas3d);
- renderer.render(scene, camera);//单次渲染
- if (that.screenshotResolve) {
- // if(that.isIos){//IOS手机
- stopRender();
- that.screenshotResolve()
- that.screenshotResolve = null;//释放Promise
- // }else{//安卓手机
- // let gl = renderer.getContext();
- // let frameBuffer = new THREE.Vector2();
- // renderer.getDrawingBufferSize(frameBuffer);
- // let pixelData = new Uint8Array(frameBuffer.x * frameBuffer.y * 4);
- // //参考 Threejs WebGLRenderer.readRenderTargetPixels
- // if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
- // gl.readPixels(0, 0, frameBuffer.x, frameBuffer.y, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
- // // 确保有像素,微信小程序安卓在进入子页面返回本页面后,再一次readPixels稳定无像素
- // if (pixelData.some(i => i !== 0)) {
- // stopRender();
- // console.warn("***screenshotResolve-pixelData***");
- // that.screenshotResolve([pixelData, frameBuffer.x, frameBuffer.y])
- // that.screenshotResolve = null;//释放Promise
- // frameBuffer = null;//清空内存中的数据
- // pixelData = null;//清空内存中的数据
- // }
- // }
- // }
- }
- }
-
- },
- onShow(){
- if(this.attendEvent){
- this.attendEvent()
- }
- },
- onHide(){
- this.clearEvent();
- },
- computed: {
- aiData() {
- return this.$store.state.aiData;
- },
- userId() {
- return this.$store.state.userId;
- },
- },
- methods: {
- voiceMaskChange(voiceMask){
- this.voiceMaskShow = voiceMask;
- },
- //黄山数据处理
- hushangHandle(param){
- let expand = {};
- expand.landImg = this.$route.query.landImg || '';
- expand.baseImg = this.$route.query.baseImg || '';
- expand.bgPrototypeImg = this.$route.query.bgPrototypeImg || '';
- expand.landNo = this.$route.query.landNo || '';//地块
- expand.landArea = this.$route.query.landArea || '';//地块面积
- expand.buildingAreaPreference = this.$route.query.buildingAreaPreference || '';//建筑面积
- expand.layer = this.$route.query.layer || '大平层';//层数
- expand.structureName = this.$route.query.structureName || '';//结构-L形等
- expand.landDescription = this.$route.query.landDescription || '';//地形地势
- expand.scenery = this.$route.query.scenery || '';//景观
- expand.structureDescription = this.$route.query.structureDescription || '';//空间特质-结构
- param.expand = JSON.stringify(expand);
- return param;
- },
- async submitHouse(){
- if(this.overChange){
- this.$message.warning("空间正在调整");
- return false
- }
- // this.$refs.myLoading.showLoading("提交中...")
- let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
- console.warn("***shottingImg***",shottingImg);
- let userId = this.userId ? this.userId : '';
- let param = {
- "brandId": $config.brandId,
- "houseId": this.curHouseObj.houseId,
- "userId": userId,
- "floot": this.curHouseObj.houseFloor,
- "spaceName": this.curHouseName ,
- "spaceStructure": this.curHouseType,
- "curFloor":this.curHouseFloor,
- // "layoutImgCustomized": shottingImg,
- // "style": "",
- layoutStruct:[],
- }
- //处理每一个楼层
- this.curLayoutStruct.forEach((layoutStruct,index)=>{
- let houseData = {
- "layoutId": layoutStruct.id,
- "layoutName": layoutStruct.name,
- "layoutArea": layoutStruct.houseArea,
- "floor": layoutStruct.houseFloor,
- "layoutImgCustomized": layoutStruct.houseFloor == this.curHouseFloor ? shottingImg:'',
- "style": "",
- "houseJson": []
- }
- let spaceList = JSON.parse(layoutStruct.houseJson);
- let styleList = [];
- //遍历当前户型下的每一个空间
- spaceList.forEach((item)=>{
- let space = JSON.parse(JSON.stringify(item));
- //找到当前空间对象对应的AI数据对象
- let AISpace = null;
- AISpace = this.aiData && this.aiData.find(it=>{
- return it.houseFloor == layoutStruct.houseFloor && it.spaceId == space.spaceId
- });
- if(AISpace){
- let list = AISpace.aiImagesList.filter(it=>it.checked==true);//过滤选中的
- list.forEach(it=>{
- styleList.push(it.aiStyleName);
- })
- list = list.map(it=>{
- return it.image
- })
- space.hardboundEffect = list;
- console.warn("submitHouse: ", list,space);
- }
- let wallList = this.wallList.find(it=>it.id==space.wallId);
- if(wallList){//找到当前空间的墙体数据
- space.wallList = JSON.stringify(wallList);
- }
- houseData.houseJson.push(space)
- })
- //寻找styleList里面出现最多次数的风格
- if(styleList && styleList.length>0){
- let maxEle = styleList[0];
- let maxNum = 1;
- styleList.reduce((p,k)=>{
- p[k] ? p[k]++ : p[k]=1;
- if(p[k] > maxNum){
- maxEle = k;
- maxNum ++
- }
- return p;
- },{});
- houseData.style = maxEle;
- }
- param.layoutStruct.push(houseData)
- })
- param = this.hushangHandle(param)
- console.warn("submitHouse-param: ", param);
- let trackparam = {
- type: 'CLK', //埋点类型
- clkId: 'clk_2cmina_23080409', //点击ID
- clkName: 'submit_clk', //点击前往的页面名称
- clkParams: {
- locusName: "数据提交",
- postAIData:this.aiData,
- }
- };
- util.trackRequest(trackparam);
- let res = await requestConfig("saveCustomizedRecord", param);
- if(res && res.success && res.single){//提交成功
- let data = {
- houseId:this.houseId,
- id:res.single,
- }
- router.push({
- name: "webgl_rxdz_customize",
- query:data
- });
- }
- },
- enableRender(){
- this.enableRenderHandle();
- },
- /**
- * 选中墙体触发
- */
- selectWall(wallIndex){
- console.log("index",wallIndex)
-
- if(this.chooseWallMeshColor){
- for (let index = 0; index < this.curWallArr.length; index++) {
- const element = this.curWallArr[index];
- const cube = element.obj;
- this.chooseWallMeshColor.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
- if(cube && cube.children[0].children[0] && cube.children[0].children[0].material){
- cube.children[0].children[0].material.color = this.chooseWallMeshColor;//修改选中模型的颜色-高亮显示 当前选中的模型
- }else{//新版逻辑
- // element.instancedMeshIndexList.forEach(item=>{
- // let _index = item.instancedMeshIndex;
- // let instancedMesh = this.instancedMeshList[_index];//网格实例
- // instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开,颜色是不能修改额
- // instancedMesh.setColorAt(item.instancedAtIndex, this.chooseWallMeshColor);//修改这个几何体的颜色
- // })
- }
- }
- }
-
- switch (wallIndex) {
- case 1:
- this.curWallDirection = "N";
- break;
- case 2:
- this.curWallDirection = "S";
- break;
- case 3:
- this.curWallDirection = "W";
- break;
- case 4:
- this.curWallDirection = "E";
- break;
- }
- this.selectedWall(this.curWallDirection)
-
- this.curWallArr = [];
- if(wallIndex!=0){
- const wallMoveValues = this.curSpaceObj.wallMoveValue;
- console.log
- const values = JSON.parse(wallMoveValues);
- if(this.curWallValue == 150){
- this.curWallValue = values[wallIndex-1]
- }else{
- let wallIndex = 0
- switch (this.curWallDirection) {
- case "N":
- wallIndex = 0;
- values[wallIndex] = this.curWallValue;
- values[1] = this.curWallValue;
- break;
- case "S":
- wallIndex = 1;
- values[wallIndex] = this.curWallValue;
- values[0] = this.curWallValue;
- break;
- case "W":
- wallIndex = 2;
- values[wallIndex] = this.curWallValue;
- values[3] = this.curWallValue;
- break;
- case "E":
- wallIndex = 3;
- values[wallIndex] = this.curWallValue;
- values[2] = this.curWallValue;
- break;
- }
- }
- this.curSpaceObj.wallMoveValue = JSON.stringify(values)
- console.log("墙体可移动数据:", this.curSpaceObj.wallMoveValue, this.spaceList);
-
- const wallStatus = this.curSpaceObj.wallStatus || "[false,false,false,false]"
- const status = JSON.parse(wallStatus);
- this.curWallHidden = status[wallIndex-1]
- console.log("当前墙面数据:", wallStatus , status, wallIndex);
-
- const curSpaceGltfWall = this.gltfWalls.filter((item)=>{
- return this.curSpaceObj.spaceId == item.spaceId && item.wallDirection == this.curWallDirection
- })
- if(curSpaceGltfWall.length != 0){
- this.curWallArr.push(...curSpaceGltfWall);
- }else{
- let rightWallD = "";
- switch (wallIndex-1) {
- case 0:
- rightWallD= "S";
- break;
- case 1:
- rightWallD= "N";
- break;
- case 2:
- rightWallD= "E";
- break;
- case 3:
- rightWallD= "W";
- break;
- }
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- const gltfWall = this.gltfWalls.filter((item)=>{
- return element.spaceId == item.spaceId && item.wallDirection == this.curWallDirection
- })
- if(gltfWall){
- this.curWallArr.push(...gltfWall);
- }
- }
-
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- const gltfWall = this.gltfWalls.filter((item)=>{
- return element.spaceId == item.spaceId && item.wallDirection == rightWallD;
- })
- if(gltfWall){
- this.curWallArr.push(...gltfWall);
- }
- }
- }
- for (let index = 0; index < this.curWallArr.length; index++) {
- const element = this.curWallArr[index];
- const cube = element.obj;
- if(cube && cube.children[0].children[0] && cube.children[0].children[0].material){
- this.chooseWallMeshColor = cube.children[0].children[0].material.color.clone();
- let color = new THREE.Color(0xff0000); // 使用sRGB颜色值
- color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
- cube.children[0].children[0].material.color = color;//修改选中模型的颜色-高亮显示 当前选中的模型
- }else{//新版逻辑
- // element.instancedMeshIndexList.forEach(item=>{
- // let _index = item.instancedMeshIndex;
- // let instancedMesh = this.instancedMeshList[_index];//网格实例
-
- // this.chooseWallMeshColor = instancedMesh.material.color.clone();;
- // let color = new THREE.Color(0xff0000); // 使用sRGB颜色值
- // color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
- // instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开,颜色是不能修改额
- // instancedMesh.setColorAt(item.instancedAtIndex, color);//修改这个几何体的颜色
- // })
-
- }
-
- }
-
- }
- },
-
- //具体空间面积变化-拖动产生的
- //data = {
- // spaceId:245,
- // area:12, //正负值 单位平方米
- // }
- curSpaceChange(data){
- console.warn("***空间面积变化***",this.overChange,data)
- this.overChange = true;//变形开始 防止在形变结束前,再次形变
- this.currentChangeSpaceId = data.spaceId
- this.changCurSpaceArea(data);
- let space = this.spaceList.find(it=>it.spaceId==this.currentChangeSpaceId);
- this.moveMeshCenter(space);
- },
-
- // 空间移动,
- changCurSpaceArea(data){
- console.log("当前户型的核心点", this.curHouseObj.houseCore, this.overChange);
- const houseCore = this.curHouseObj.houseCore.split(',');
- const coreX = houseCore[0] | 0
- const coreY = houseCore[1] | 0
- // 根据核心点计算空间所在象限
- this.spaces1 = [];
- this.spaces2 = [];
- this.spaces3 = [];
- this.spaces4 = [];
- let curSpace = null;
- for (let index = 0; index < this.spaceList.length; index++) {
- const element = this.spaceList[index];
- if(element.centerX > coreX){ // 2 3象限
- if(element.centerY > coreY){ // 2象限
- console.log(`象限2 ${element}`);
- element.quadrant = 2;
- this.spaces2.push(element)
- }else{// 3象限
- console.log(`象限3 ${element}`);
- element.quadrant = 3;
- this.spaces3.push(element)
- }
- }else{// 1 4象限
- if(element.centerY > coreY){ // 1象限
- console.log(`象限1 ${element}`);
- element.quadrant = 1;
- this.spaces1.push(element)
- }else{ // 4象限
- console.log(`象限4 ${element}`);
- element.quadrant = 4;
- this.spaces4.push(element)
- }
- }
- if(element.spaceId == data.spaceId){
- curSpace = element;
- }
- }
-
- console.log("当前space所在象限",data.spaceId, curSpace.spaceId , curSpace.quadrant);
- console.log("象限", this.spaces1, this.spaces2, this.spaces3, this.spaces4);
-
-
- this.calculateSpaceData(curSpace, data)
- },
- calculateSpaceData(curSpace, data){
- let that = this;
- this.curSpaceObj = curSpace;
-
- // 计算宽高移动数值
- const changeArea = data.area;
- const isZoomIn = data.isZoomIn;
- const oldArea = (curSpace.spaceWidth / 100) * (curSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * (data.isZoomIn ? 1 : -1);
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- let newWidth = curSpace.spaceWidth * sizeScale;
- let newHeight = curSpace.spaceHeight * sizeScale;
- if(isZoomIn){
- newWidth = Math.min(newWidth, curSpace.spaceWidthMax)
- newHeight = Math.min(newHeight, curSpace.spaceHeightMax)
- }else{
- newWidth = Math.max(newWidth, curSpace.spaceWidthMin)
- newHeight = Math.max(newHeight, curSpace.spaceHeightMin)
- }
- let changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
- let changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
-
- console.log("变化的尺寸", newWidth, newHeight, data, sizeScale);
- console.log("变化的尺寸", changeWidth, changeHeight, data, curSpace.spaceWidth, curSpace.spaceHeight);
-
- if(curSpace.quadrant == 1){
- // 默认往南 往西移动
- this.moveSpace(curSpace, 1, 3, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
- }
- if(curSpace.quadrant == 2){
- // 默认往南 往西移动
- this.moveSpace(curSpace, 1, 4, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
- }
- if(curSpace.quadrant == 3){
- // this.selectWall(4);
- // // // 移动墙面
- // this.moveSpaceWall(this.curWallDirection, isZoomIn, changeWidth);
- // 默认往南 往东移动
- this.moveSpace(curSpace, 2, 4, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
- }
- if(curSpace.quadrant == 4){
- // 默认往南 往西移动
- this.moveSpace(curSpace, 2, 3, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight)
- }
- setTimeout(() => {
- // that.updataPageData();
- that.overChange = false;
- that.callBackFun && that.callBackFun(true);
- // that.calculateLayoutModelSize(); //重新计算家具位置
- that.updateWallModels(); // 替换墙体模型
- that.changeLayoutModel(); // 改变空间模型
- // that.changeLayoutModelState(true); // 显示家具模型
- }, 4200);
- },
- moveSpace(curSpace, directionIndex, directionIndex01, isZoomIn, newArea, newWidth, newHeight, changeWidth, changeHeight){
- let that = this;
-
- const wallLock = this.currWallLock(directionIndex, curSpace); //南边
- const wallLock01 = this.currWallLock(directionIndex01, curSpace); //东边
-
- console.log("移动空间", wallLock, wallLock01)
-
- if(wallLock ==-1 && wallLock01 == -1){
- return this.$message.warning("空间尺寸已锁定");
- }
- let changeValue = changeHeight;
- if(wallLock == -1){
-
- if(wallLock01 == 0){
- directionIndex01 = directionIndex01 == 4 ? 3 : 4; // 往西移动
- }
-
- // 南北锁死,重新计算移动的方向
- newWidth = newArea / (curSpace.spaceHeight / 100) * 100
- changeWidth = newWidth / 100 - curSpace.spaceWidth / 100;
- changeWidth = Math.abs(changeWidth * 100);
- directionIndex = directionIndex01; // 往东移动
-
- changeValue = changeWidth;
-
- console.log("高度锁死不能拉伸, 宽度变化1",newWidth, directionIndex,curSpace.spaceWidth, curSpace.spaceHeight, changeValue);
- that.selectWall(directionIndex);
- that.moveSpaceWall(that.curWallDirection, isZoomIn, changeValue);
- // that.autoCreateWall(directionIndex, curSpace)
- return;
- }else{
- if(wallLock == 0){
- directionIndex = directionIndex == 2 ? 1 : 2; // 往北边移动
- }
-
- if(wallLock01 == -1){
- // 东西锁死,重新计算移动方向
- newHeight = newArea / (curSpace.spaceWidth / 100) * 100
- changeHeight = newHeight / 100 - curSpace.spaceHeight / 100;
- changeHeight = Math.abs(changeHeight * 100);
- changeValue = changeHeight;
-
- that.selectWall(directionIndex);
- that.moveSpaceWall(that.curWallDirection, isZoomIn, changeValue);
- // 自动补墙逻辑
- // that.autoCreateWall(directionIndex, curSpace);
- return
- }
-
- if(wallLock01 == 0){
- directionIndex01 = directionIndex01 == 4 ? 3 : 4; // 往西移动
- }
-
- console.log("要变化的宽度", newWidth, newHeight)
- // 目标宽度
- if(newHeight > curSpace.spaceHeightMax){
- newHeight = curSpace.spaceHeightMax;
- changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
- // 重新计算宽度值
- newWidth = (newArea / (newHeight / 100)) * 100
- changeWidth = (newWidth / 100 - curSpace.spaceWidth / 100) * 100;
- console.log("高度达到最大值,重新计算宽度",newWidth, newHeight, changeWidth, changeHeight)
- }
-
- if(newHeight < curSpace.spaceHeightMin){
- newHeight = curSpace.spaceHeightMin;
- changeHeight = Math.abs(newHeight - curSpace.spaceHeight)
- // 重新计算宽度值
- newWidth = (newArea / (newHeight / 100)) * 100
- changeWidth = Math.abs((newWidth / 100 - curSpace.spaceWidth / 100) * 100);
- console.log("高度达到最小值,重新计算宽度",newWidth, newHeight, changeWidth, changeHeight)
- }
-
- if(newWidth > curSpace.spaceWidthMax){
- newWidth = curSpace.spaceWidthMax;
- changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
- // 重新计算宽度值
- newHeight = (newArea / (newWidth / 100)) * 100
- changeHeight = (newHeight / 100 - curSpace.spaceHeight / 100) * 100;
- console.log("宽度达到最大值,重新计算高度",newWidth, newHeight, changeWidth, changeHeight)
- }
-
- if(newWidth < curSpace.spaceWidthMin){
- newWidth = curSpace.spaceWidthMin;
- changeWidth = Math.abs(newWidth - curSpace.spaceWidth)
- // 重新计算宽度值
- newHeight = (newArea / (newWidth / 100)) * 100
- changeHeight = Math.abs((newHeight / 100 - curSpace.spaceHeight / 100) * 100);
- console.log("宽度达到最小值,重新计算高度",newWidth, newHeight, changeWidth, changeHeight)
- }
-
- // let checkWidth = this.checkRightSpace(!isZoomIn, changeHeight, true)
- // let checkHeight = this.checkRightSpace(!isZoomIn, changeWidth, false)
-
- // console.log("达到极限值++++++++++++++", checkWidth, checkHeight, changeWidth,changeHeight)
- // if(!checkWidth || !checkHeight){
- // return
- // }
-
- if(changeHeight > 0){
-
- that.changeSpaces = [];
-
- that.selectWall(directionIndex);
- // // 隐藏变化空间的家具模型,空间动画结束后显示
- // that.changeLayoutModelState();
- that.moveSpaceWall(that.curWallDirection, isZoomIn, changeHeight);
- // 自动补墙逻辑
- // that.autoCreateWall(directionIndex, curSpace)
- }
-
- let timeout = 0
- if(changeWidth > 0 && changeHeight > 0 ){
- timeout = 2100
- }
-
- console.log("改变尺寸",changeWidth, changeHeight,newWidth, newHeight, timeout, directionIndex, directionIndex01, wallLock, wallLock01)
-
- if(changeWidth > 0){
- setTimeout(() => {
-
- that.changeSpaces = [];
- // // 选中墙面
- that.selectWall(directionIndex01);
- // // 隐藏变化空间的家具模型,空间动画结束后显示
- // that.changeLayoutModelState();
- // 移动墙面
- that.moveSpaceWall(that.curWallDirection, isZoomIn, changeWidth);
- // 自动补墙逻辑
- // that.autoCreateWall(directionIndex01, curSpace)
- }, timeout);
- }
- }
- },
- currWallLock(direction, curSpace){
-
- let curDirection = ""
- let faceDirection = ""
- switch (direction) {
- case 1:
- curDirection = "N";
- faceDirection = "S";
- break;
- case 2:
- curDirection = "S";
- faceDirection = "N";
- break;
- case 3:
- curDirection = "W";
- faceDirection = "E";
- break;
- case 4:
- curDirection = "E";
- faceDirection = "W";
- break;
- }
- const wallInfo = this.wallList.find((item)=>{
- let element = JSON.parse(item.wallJson);
- return element.spaceId == curSpace.spaceId;
- })
- let walls = JSON.parse(wallInfo.wallJson).wallData;
-
- const wall = walls.find((item)=>{ // 当前墙面锁定
- return item.wallDirection==curDirection && item.isLocked=="true"
- })
- const faceWall = walls.find((item)=>{ // 对面墙面锁定
- return item.wallDirection==faceDirection && item.isLocked=="true"
- })
-
- if(wall){
- if(faceWall){
- return -1 // 当前对面同时锁定
- }
- return 0 // 当前锁定
- }else{
- return 1 // 不锁定,可以移动
- }
-
- },
- checkRightSpace(isZoomIn, changeValue, isNS){
- let n = isZoomIn?1:-1;
- let l = isZoomIn?-1:1;
- let result = true;
- let space = null;
-
-
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- let newWidth = element.spaceWidth + l * changeValue;
- let newHeight = element.spaceHeight + l * changeValue;
- console.log("关联左空间排查", isZoomIn, changeValue, isNS, newWidth, newHeight)
- if(isNS){
- if( newHeight > element.spaceHeightMax || newHeight < element.spaceHeightMin){
- result = false;
- space = element;
- break;
- }
- }else{
- if(newWidth > element.spaceWidthMax || newWidth < element.spaceWidthMin){
- result = false;
- space = element;
- break;
- }
- }
- }
-
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- let newWidth = element.spaceWidth + n * changeValue;
- let newHeight = element.spaceHeight + n * changeValue;
- console.log("关联右空间排查", isZoomIn, changeValue, isNS, newWidth, newHeight)
- if(isNS){
- if( newHeight > element.spaceHeightMax || newHeight < element.spaceHeightMin){
- result = false;
- space = element;
- break;
- }
- }else{
- if(newWidth > element.spaceWidthMax || newWidth < element.spaceWidthMin){
- result = false;
- space = element;
- break;
- }
- }
- }
- console.log("空间排查", this.leftSpaces, this.rightSpaces, result, space)
- if(!result){
- this.$message.warning(`关联空间[${ space && space.spaceName || ''}]达到极限值`);
- }
- return result
- },
- checkSpaceSize(isZoomIn, changeWidth, changeHeight){
- console.log("检查尺寸", isZoomIn, changeWidth, changeHeight, this.leftSpaces, this.rightSpaces)
-
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- if(isZoomIn){
- if(element.spaceWidth + changeWidth > element.spaceWidthMax || element.spaceHeight + changeHeight > element.spaceHeightMax){
- console.log("++++++++++移动空间达到极大值1", element.spaceId, element.spaceWidth + changeWidth > element.spaceWidthMax, element.spaceHeight + changeHeight > element.spaceHeightMax)
- console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMax)
- console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMax)
- return false;
- }
- }else{
- if(element.spaceWidth - changeWidth < element.spaceWidthMin || element.spaceHeight - changeHeight < element.spaceHeightMin){
- console.log("++++++++++移动空间达到极小值2", element.spaceId)
- console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMin)
- console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMin)
- return false;
- }
- }
- }
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- if(!isZoomIn){
- if(element.spaceWidth - changeWidth < element.spaceWidthMin || element.spaceHeight - changeHeight < element.spaceHeightMin){
- console.log("++++++++++其他空间达到极小值4", element.spaceId)
- console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMin)
- console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMin)
- return false;
- }
- }else{
- if(element.spaceWidth + changeWidth > element.spaceWidthMax || element.spaceHeight + changeHeight > element.spaceHeightMax){
- console.log("++++++++++其他空间达到极大值3", element.spaceId)
- console.log("++++++++++移动空间达到极大值宽", element.spaceWidth, changeWidth, element.spaceWidthMax)
- console.log("++++++++++移动空间达到极大值高", element.spaceHeight, changeHeight, element.spaceHeightMax)
- return false;
- }
- }
- }
-
- return true
- },
- // 新版本空间移动计算
- changeCurSpaceSize(curSpace, changeArea, isZoomIn){
-
- // 计算当前空间的变化
- // 1.原先面积
- const oldArea = (curSpace.spaceWidth / 100) * (curSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * isZoomIn;
-
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- console.log(`新面积:${newArea} 老面积:${oldArea}缩放比例:${sizeScale} 改变的面积:${changeArea} 是否放大:${isZoomIn} 中心点:${curSpace.centerX} ${curSpace.centerX}`);
- console.log(`改变前:尺寸:${curSpace.spaceWidth} ${curSpace.spaceHeight} 中心点:${curSpace.centerX} ${curSpace.centerY}`);
-
- curSpace.toScaleX = curSpace.spaceWidth * sizeScale / 300 ;
- curSpace.toScaleZ = curSpace.spaceHeight * sizeScale / 300 ;
-
-
- if(this.minspace1 && this.minspace1.spaceId == curSpace.spaceId){
- curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100 * -1;
- curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100 * -1;
- console.log("XXXXXXXX-计算空间变化信息1", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
- }else if(this.minspace2 && this.minspace2.spaceId == curSpace.spaceId){
- curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100;
- curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100 * -1;
- console.log("XXXXXXXX-计算空间变化信息2", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
- }else if(this.minspace3 && this.minspace3.spaceId == curSpace.spaceId){
- curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100;
- curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100;
- console.log("XXXXXXXX-计算空间变化信息3", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
- }else if(this.minspace4 && this.minspace4.spaceId == curSpace.spaceId){
- curSpace.toPx = (curSpace.spaceWidth * sizeScale - curSpace.spaceWidth) / 2 / 100 * -1;
- curSpace.toPz = (curSpace.spaceHeight * sizeScale - curSpace.spaceHeight) / 2 / 100;
- console.log("XXXXXXXX-计算空间变化信息4", curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
- }else{
- return
- }
-
-
- // 更新数据:
-
- curSpace.spaceWidth = curSpace.spaceWidth * sizeScale;
- curSpace.spaceHeight = curSpace.spaceHeight * sizeScale;
- curSpace.centerX = curSpace.centerX + curSpace.toPx * 100
- curSpace.centerY = curSpace.centerY + curSpace.toPz * 100
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == curSpace.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = curSpace;
- }
- console.log(`改变后:尺寸:${curSpace.spaceWidth} ${curSpace.spaceHeight} 中心点:${curSpace.centerX} ${curSpace.centerY} `, curSpace.toPx, curSpace.toPz);
-
-
- },
-
- findxxSpace(manSpace,changeArea, xiangxian, isZoomIn){
- if(xiangxian == 1){
- const spaceE = this.spaces1.find((item)=>{
- return item.spaceId == manSpace.eastId;
- })
- const spaceS = this.spaces1.find((item)=>{
- return item.spaceId == manSpace.southId;
- })
-
- const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * isZoomIn;
-
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
- manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
-
- if(spaceE){
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1 + spaceE.toPx * 2;
- console.log("XXXXXXXX东边有空间", manSpace.spaceId, spaceE.toPx)
- }else{
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1;
- console.log("XXXXXXXX东边没空间", manSpace.spaceId)
- }
-
- if(spaceS){
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1 + spaceS.toPz * 2;
- console.log("XXXXXXXX南边有空间", manSpace.spaceId, spaceS.toPz)
- }else{
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1;
- console.log("XXXXXXXX南边没空间", manSpace.spaceId)
- }
-
-
- console.log("XXXXXXXX-前象限1的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
-
- manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
- manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
- manSpace.centerX += manSpace.toPx * 100
- manSpace.centerY += manSpace.toPz * 100
-
- console.log("XXXXXXXX-后象限1的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
-
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = manSpace;
- }
- const spacesIndex = this.spaces1.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spacesIndex!=-1){
- this.spaces1[spacesIndex] = manSpace;
- }
- }
- if(xiangxian == 2){
- const spaceW = this.spaces2.find((item)=>{
- return item.spaceId == manSpace.westId;
- })
- const spaceS = this.spaces2.find((item)=>{
- return item.spaceId == manSpace.southId;
- })
-
- const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * isZoomIn;
-
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
- manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
-
- if(spaceW){
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 + spaceW.toPx * 2;
- console.log("XXXXXXXX西边有空间", manSpace.spaceId, spaceW.toPx)
- }else{
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100;
- console.log("XXXXXXXX西边没空间", manSpace.spaceId)
- }
-
- if(spaceS){
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1 + spaceS.toPz * 2;
- console.log("XXXXXXXX南边有空间", manSpace.spaceId, spaceS.toPz)
- }else{
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 * -1;
- console.log("XXXXXXXX南边没空间", manSpace.spaceId)
- }
-
-
- console.log("XXXXXXXX-前象限2的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
-
- manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
- manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
- manSpace.centerX += manSpace.toPx * 100
- manSpace.centerY += manSpace.toPz * 100
-
- console.log("XXXXXXXX-后象限2的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
-
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = manSpace;
- }
- const spacesIndex = this.spaces2.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spacesIndex!=-1){
- this.spaces2[spacesIndex] = manSpace;
- }
- }
- if(xiangxian == 3){
- const spaceW = this.spaces3.find((item)=>{
- return item.spaceId == manSpace.westId;
- })
- const spaceN = this.spaces3.find((item)=>{
- return item.spaceId == manSpace.northId;
- })
-
- const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * isZoomIn;
-
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
- manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
-
- if(spaceW){
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 + spaceW.toPx * 2;
- console.log("XXXXXXXX西边有空间", manSpace.spaceId, spaceW.toPx)
- }else{
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100;
- console.log("XXXXXXXX西边没空间", manSpace.spaceId)
- }
-
- if(spaceN){
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 + spaceN.toPz * 2;
- console.log("XXXXXXXX北边有空间", manSpace.spaceId, spaceN.toPz)
- }else{
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100;
- console.log("XXXXXXXX北边没空间", manSpace.spaceId)
- }
-
-
- console.log("XXXXXXXX-前象限3的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
-
- manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
- manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
- manSpace.centerX += manSpace.toPx * 100
- manSpace.centerY += manSpace.toPz * 100
-
- console.log("XXXXXXXX-后象限3的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
-
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = manSpace;
- }
- const spacesIndex = this.spaces3.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spacesIndex!=-1){
- this.spaces3[spacesIndex] = manSpace;
- }
- }
- if(xiangxian == 4){
- const spaceE = this.spaces4.find((item)=>{
- return item.spaceId == manSpace.eastId;
- })
- const spaceN = this.spaces4.find((item)=>{
- return item.spaceId == manSpace.northId;
- })
-
- const oldArea = (manSpace.spaceWidth / 100) * (manSpace.spaceHeight / 100);
- const newArea = oldArea + changeArea * isZoomIn;
-
- const sizeScale = Math.sqrt(newArea/oldArea) ;
-
- manSpace.toScaleX = manSpace.spaceWidth * sizeScale / 300 ;
- manSpace.toScaleZ = manSpace.spaceHeight * sizeScale / 300 ;
-
- if(spaceE){
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1 + spaceE.toPx * 2;
- console.log("XXXXXXXX东边有空间", manSpace.spaceId, spaceE.toPx)
- }else{
- manSpace.toPx = (manSpace.spaceWidth * sizeScale - manSpace.spaceWidth) / 2 / 100 * -1;
- console.log("XXXXXXXX东边没空间", manSpace.spaceId)
- }
-
- if(spaceN){
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100 + spaceN.toPz * 2;
- console.log("XXXXXXXX北边有空间", manSpace.spaceId, spaceN.toPz)
- }else{
- manSpace.toPz = (manSpace.spaceHeight * sizeScale - manSpace.spaceHeight) / 2 / 100;
- console.log("XXXXXXXX北边没空间", manSpace.spaceId)
- }
-
-
- console.log("XXXXXXXX-前象限4的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY, manSpace.toPx);
-
- manSpace.spaceWidth = manSpace.spaceWidth * sizeScale;
- manSpace.spaceHeight = manSpace.spaceHeight * sizeScale;
- manSpace.centerX += manSpace.toPx * 100
- manSpace.centerY += manSpace.toPz * 100
-
- console.log("XXXXXXXX-后象限4的其他空间", manSpace.spaceId, manSpace.spaceWidth, manSpace.spaceHeight, manSpace.centerX, manSpace.centerY);
-
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = manSpace;
- }
- const spacesIndex = this.spaces4.findIndex((item)=>{
- return item.spaceId == manSpace.spaceId;
- })
- if(spacesIndex!=-1){
- this.spaces4[spacesIndex] = manSpace;
- }
- }
- },
-
- //空间面积等变更后-同步更新其他数据对象
- updataPageData(){
- let str = JSON.stringify(this.spaceList)
- //更新当前空间对象
- this.curHouseObj.houseJson = str;
- //更新提交的数据
- let layoutStruct = this.curLayoutStruct.find(it=>{
- return it.houseFloor == this.curHouseFloor
- })
- layoutStruct.houseJson = str;
- this.currentChangeSpaceId = null;//变化结束后
- console.warn("***curLayoutStruct-updataPageData***",this.curHouseFloor,this.curHouseObj,layoutStruct)
- },
- //户型大类发生了变更
- curHouseTypeChange(item){
- this.curHouseType = item.spaceStructure;//当前选中的户型类型-传递给子组件触发具体的户型数据选取
- this.curHouseName = item.spaceName;//当前选中的户型类型名称
- //获取当前户型大类下的所有户型信息-用于用户提交
- this.curLayoutStruct = this.houseList.find(it=>it.spaceStructure == this.curHouseType).layoutStruct;
- console.warn("***curLayoutStruct***",this.curLayoutStruct)
- },
- //户型楼层发生了变更
- curHouseFloorChange(item){
- let that = this;
- this.curHouseFloor = item.houseFloor;//当前选中的户型楼层
- this.curHouseObj = item;//更新当前具体的户型数据
- this.id = this.curHouseObj.id;
- // 遍历场景中的所有子对象,找到类型为Mesh的对象并移除
- let deleList = that.scene && that.scene.children.filter(object=>{
- if(object.userType=="mesh" || object.userType=="layoutMesh"){
- return object
- }
- })
- // console.warn("***deleList***",deleList)
- if(deleList && deleList.length>0){
- that.showLables = false;//隐藏lable
- that.scene.remove(...deleList);
- }
-
- this.gltfWalls = [];
- this.gltfSpaces = [];
- this.instancedMeshList = [];
- this.instancedSpaceMeshList = [];
- this.lableItem = [];
- this.gltfLayouts = [];
- this.instancedFurList = [];
- this.wallList = [];
- //恢复初始视角
- this.cameraInit();
- this.resetControl();
- setTimeout(()=>{
- that.loadSpace();
- }, 100);
- console.warn("***curHouseObj***",this.curHouseObj,that.aiData)
- this.navbar.title = this.curHouseObj.name + " " + this.curHouseObj.houseArea + "㎡"
- },
- async getInitData(){
- let parmas = {
- childLayout:this.childLayout || 0,
- houseId:this.houseId,
- }
- const res = await requestConfig('getHouseTypeSpaceDetailsV2', parmas, true);
- if (res.success && res.list) {
- let list = res.list || [];
- list && list.forEach((single,index)=>{
- single.layoutStruct.forEach((item)=>{
- if(item.houseJson){
- let spaceList = JSON.parse(item.houseJson);
- // 交换centerX, centerY
- for (let index = 0; index < spaceList.length; index++) {
- var element = spaceList[index];
- const {centerX, centerY} = element;
- element.centerX = centerY;
- element.centerY = centerX;
- }
- item.houseJson = JSON.stringify(spaceList);
- }
- })
- })
- console.log("户型详情列表-接口原始数据: ", list);
- this.houseList = list;//数据会同步到组件中-进而反馈更新页面数据
- }
- },
-
- onMouseMove(e){
- return false;
- },
- goRoam1(spaceId){
- let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
- if(gltf){
- this.goRoam(gltf)
- }
- },
- //物体漫游-切换页面的方式进入
- goRoam(gltf){
- // console.log('是否漫游',this.isManyou ? '漫游' : '俯视',isManyou,this.repeatFlag);
- if(gltf.spaceType==13){//楼梯不能跳转
- return false
- }
- let spaceId = gltf.spaceId;//具体的空间Id
- let data = {
- spaceId:spaceId,
- // curHouseObj:this.curHouseObj,
- houseId:this.houseId,
- }
- if(this.repeatFlag){
- return false;
- }
- this.repeatFlag = true;
- router.push({
- name: "webgl_rxdz_roam",
- query:data
- });
- this.$store.dispatch('setCurHouseObj', this.curHouseObj);
- this.$store.dispatch('setWallList', this.wallList);
- setTimeout(()=> {
- this.repeatFlag = false;
- }, 1000);
- },
- //obj 物体对象,type 是否改变颜色
- moveMeshCenter(obj,type){
- console.warn("**moveMeshCenter***",obj)
- if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
- this.moveMeshCenterHandle(obj,type);
- }
- },
- // 绘制地板
- async loadSpace(){
- this.spaceList = [];
- this.wallIds = [];
- this.layoutIds = [];
- this.gltfSpaces = [];
- this.curWallArr = [];
- this.progress = 0;
- if(!this.curHouseObj){//减少重复请求
- return false
- }
- let type=[];
- if(this.curHouseObj){
- const spaceDetail = this.curHouseObj;
- const spaceList = JSON.parse(spaceDetail.houseJson);
- // 交换centerX, centerY;上一页面已经处理过了,这里不在需要处理
- for (let index = 0; index < spaceList.length; index++) {
- var element = spaceList[index];
- // const centerX = JSON.parse(JSON.stringify(element.centerX))
- // element.centerX = element.centerY;
- // element.centerY = centerX;
- element.wallMoveValue = "[0,0,0,0]"
- this.spaceList.push(element);
- this.wallIds.push(element.wallId);
- this.layoutIds.push(element.layoutId);
- type.push(element.spaceType);
- if(element.isSelected){ // 默认选中空间
- this.curSpaceObj = element;
- }
- }
- if(!this.curSpaceObj && this.spaceList.length > 0){
- this.curSpaceObj = this.spaceList[0];
- }
- }
- console.log("该户型空间数据:", this.spaceList, this.layoutIds,type);
- console.log("当前选中的空间:", this.curSpaceObj,this.curHouseObj);
- this.spaceListBackup = JSON.parse(JSON.stringify(this.spaceList));
- this.loaderSpaceArr(this.spaceList);
- // 绘制墙体
- this.getHouseTypeSpaceWalls();
- },
- // 添加文字标签
- addWordLabel(){
- if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
- return false;
- }
- // 方案二
- this.lableItem = [];
- this.gltfSpaces.forEach((cube,index) =>{
- // 给地板加上空间类型标注, 空间为链接空间的不显示
- if(cube.spaceName && !cube.isSizeLock){
- let spaceIndex = this.spaceList.filter(it=>it.spaceName && !it.isSizeLock).findIndex(item=>item.spaceId==cube.spaceId);
- this.lableItem.push(
- {
- text:cube.spaceName,
- spaceId:cube.spaceId,
- spaceType:cube.spaceType,
- transform:'',
- spaceIndex:spaceIndex,
- cubeIndex:index,
- }
- )
- }
- })
- this.showLables = true;
- // this.updateLables();//更新lable
- },
- // 获取墙体数据
- async getHouseTypeSpaceWalls(){
- let data = {id:this.wallIds}
- const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
- console.log("墙体数据:", res.list)
- let wallList = [];
- if(res.success){
- wallList = this.wallList = res.list;
- }
- let wallArr = []
- for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
- let element = JSON.parse(wallList[index].wallJson);
- let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
- this.computeWallHandleOld(space,element);//提前计算
- for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
- let wallData = element.wallData[i];
- //对应方向的墙壁的墙体模型数据列表,每一面墙可能有多个模型
- for (let j = 0; j < wallData.wallModelData.length; j ++) {
- let wallModelData = wallData.wallModelData[j];
- wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
- // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
- }
- }
- }
- this.loadSpaceObjWalls(wallArr, wallList);
- this.getOverallArrangementDetailsList(2);
- },
- // 加载单个空间墙体资源
- async loadSpaceObjWalls(wallArr, wallList){
- // 加载远程墙体模型资源
- let startTime = new Date().getTime();
- // console.log("wallArr:", wallArr)
- let promise_list = [];
- let realWallArr = this.preWallData(wallArr);
- let arrLength = realWallArr.length;
- realWallArr && realWallArr.forEach((item,index) => {
- promise_list.push(
- new Promise((resolve, reject) => {
- this.loadWallModels(item, wallList, arrLength , resolve);
- })
- )
- });
- Promise.all(promise_list).then(()=>{
- let endTime = new Date().getTime();
- console.log("模型全部加载完成,时间:",endTime - startTime);
- this.progress = 100;
- // this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
- // 设置空间数组的墙体信息
- // this.setSpaceListWallInfo();
- this.$nextTick(()=>{
- this.moveMeshCenter(this.curSpaceObj);
- // this.myLoadingStatus = false;
- // this.$refs.myLoading.hideLoading();
- setTimeout(()=>{
- this.addWordLabel(); // 添加文字标签
- }, 610);
- // 设置空间数组的墙体信息
- })
- })
- },
- // 选择墙体
- selectedWall(direction){
- if(!direction || direction==""){
- return
- }
- console.log(`当前空间的id:${this.curSpaceObj.spaceId};墙面方向:${direction};宽度:${this.curSpaceObj.spaceWidth};宽度:${this.curSpaceObj.spaceHeight}`)
- console.log("当前空间的:", this.curSpaceObj);
- this.leftSpaces = [];
- this.rightSpaces = [];
- this.tempSpaceList = JSON.parse(JSON.stringify(this.spaceList));
- // 计算关联空间
- this.findLeftRelateSpace(this.curSpaceObj, direction);
- console.log("空间数组:", this.leftSpaces, this.rightSpaces);
-
- // 计算墙体的可移动范围
- var min = 0;
- var max = 300;
- // 计算最小值
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- console.log("左边空间数据:", element);
- var spaceMoveNW = element.spaceWidth;
- var spaceMoveSW = element.spaceWidth;
- var spaceMoveEH = element.spaceHeight;
- var spaceMoveWH = element.spaceHeight;
- var curSpaceWall = [];
- for (let index = 0; index < this.gltfWalls.length; index++) {
- const wall = this.gltfWalls[index];
- if(element.spaceId == wall.spaceId && wall.wallDirection != direction){
- curSpaceWall.push(wall);
- if((direction == "W" || direction == "E") && wall.wallDirection != direction){
- if(wall.wallDirection == "N"){
- spaceMoveNW -= wall.wallModelData.wallWidth;
- console.log("北边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
- }
- if(wall.wallDirection == "S"){
- spaceMoveSW -= wall.wallModelData.wallWidth;
- console.log("南边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
- }
-
- this.curWallValue = Math.floor(Math.min(Math.min(spaceMoveNW, spaceMoveSW), this.curWallValue));
- }
- if((direction == "N" || direction == "S") && wall.wallDirection != direction){
- if(wall.wallDirection == "E"){
- spaceMoveEH -= wall.wallModelData.wallWidth;
- console.log("东边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
- }
- if(wall.wallDirection == "W"){
- spaceMoveWH -= wall.wallModelData.wallWidth;
- console.log("西边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
- }
- this.curWallValue = Math.floor(Math.min(Math.min(spaceMoveEH, spaceMoveWH), this.curWallValue));
- }
- }
- }
-
- // 排序墙体数据
- curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
- curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
-
- console.log("墙体模型:", curSpaceWall, spaceMoveNW, spaceMoveSW);
- console.log("可缩小的最小值:", Math.floor(Math.min(spaceMoveNW, spaceMoveSW)));
-
- if((direction == "W" || direction == "E") && element.spaceWidth == this.curWallValue){
- this.curWallValue = 149;
- }
- if((direction == "N" || direction == "S") && element.spaceHeight == this.curWallValue){
- this.curWallValue = 149;
- }
- // this.curWallValue = Math.floor(Math.min(spaceMoveNW, spaceMoveSW));
- }
-
- // 计算最大值
-
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- console.log("右边空间数据:", element);
- var spaceMoveNW = element.spaceWidth;
- var spaceMoveSW = element.spaceWidth;
- var spaceMoveEH = element.spaceHeight;
- var spaceMoveWH = element.spaceHeight;
- var curSpaceWall = [];
- for (let index = 0; index < this.gltfWalls.length; index++) {
- const wall = this.gltfWalls[index];
- if(element.spaceId == wall.spaceId && wall.wallDirection != direction){
- curSpaceWall.push(wall);
- if((direction == "W" || direction == "E") && wall.wallDirection != direction){
- if(wall.wallDirection == "N"){
- spaceMoveNW -= wall.wallModelData.wallWidth;
- console.log("北边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
- }
- if(wall.wallDirection == "S"){
- spaceMoveSW -= wall.wallModelData.wallWidth;
- console.log("南边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
- }
-
- this.curWallMaxValue = Math.floor(Math.min(spaceMoveNW, spaceMoveSW)) + this.curWallValue;
- }
- if((direction == "N" || direction == "S") && wall.wallDirection != direction){
- if(wall.wallDirection == "E"){
- spaceMoveEH -= wall.wallModelData.wallWidth;
- console.log("东边墙:", spaceMoveNW, wall.wallModelData.wallWidth, wall.id);
- }
- if(wall.wallDirection == "W"){
- spaceMoveWH -= wall.wallModelData.wallWidth;
- console.log("西边墙:", spaceMoveSW, wall.wallModelData.wallWidth, wall.id);
- }
- this.curWallMaxValue = Math.floor(Math.min(spaceMoveEH, spaceMoveWH)) + this.curWallValue;
- }
- }
- }
-
- // 排序墙体数据
- curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
- curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
-
- console.log("墙体模型:", curSpaceWall, spaceMoveNW, spaceMoveSW);
- console.log("可缩小的最小值:", Math.floor(Math.min(spaceMoveNW, spaceMoveSW)));
- }
-
-
- console.log(`当前墙面的最大值:${this.curWallMaxValue}, 最小值:${this.curWallValue}`)
- // 统计变化的空间
- this.changeSpaces.push(...this.leftSpaces)
- this.changeSpaces.push(...this.rightSpaces)
- },
- // 递归寻找左边->右边关联空间
- findLeftRelateSpace(spaceObj, direction){
- const {eastId, westId, northId, southId, spaceId} = spaceObj;
-
- const leftIndex = this.tempSpaceList.findIndex((item)=>{
- return item.spaceId == spaceId;
- })
- if(leftIndex!=-1){
- const spaceObj = this.tempSpaceList[leftIndex];
- this.leftSpaces.push(spaceObj);
- this.tempSpaceList.splice(leftIndex,1);
-
- const leftNextIndex = this.tempSpaceList.findIndex((item)=>{
- if(direction == "E"){
- return item.spaceId == eastId;
- }else if(direction == "W"){
- return item.spaceId == westId;
- }else if(direction == "S"){
- return item.spaceId == southId;
- }else if(direction == "N"){
- return item.spaceId == northId;
- }
- })
- if(leftNextIndex!=-1){
- const nextSpaceObj = this.tempSpaceList[leftNextIndex];
- console.log("递归再一次", nextSpaceObj);
- this.findRightRelateSpace(nextSpaceObj, direction);
- }
-
- const rightArr = this.tempSpaceList.filter((item)=>{
- if(direction == "E"){
- return item.westId == spaceId;
- }else if(direction == "W"){
- return item.eastId == spaceId;
- }else if(direction == "S"){
- return item.northId == spaceId;
- }else if(direction == "N"){
- return item.southId == spaceId;
- }
- })
-
- for (let index = 0; index < rightArr.length; index++) {
- const nextSpaceObj = rightArr[index];
- // const nextSpaceObj = this.tempSpaceList[rightNextIndex];
- console.log("递归再一次", nextSpaceObj);
- this.findRightRelateSpace(nextSpaceObj, direction);
- }
-
- }
-
- },
- // 递归寻找右边->左边关联空间
- findRightRelateSpace(spaceObj, direction){
- const {eastId, westId, northId, southId, spaceId} = spaceObj;
-
- const rightIndex = this.tempSpaceList.findIndex((item)=>{
- return item.spaceId == spaceId;
- })
-
- if(rightIndex!=-1){
- const spaceObj = this.tempSpaceList[rightIndex];
- this.rightSpaces.push(spaceObj);
- this.tempSpaceList.splice(rightIndex,1);
- console.log("当前空间数组:", this.tempSpaceList);
-
- const leftNextIndex = this.tempSpaceList.findIndex((item)=>{
- if(direction == "E"){
- return item.spaceId == westId;
- }else if(direction == "W"){
- return item.spaceId == eastId;
- }else if(direction == "N"){
- return item.spaceId == southId;
- }else if(direction == "S"){
- return item.spaceId == northId;
- }
- })
- if(leftNextIndex!=-1){
- const nextSpaceObj = this.tempSpaceList[leftNextIndex];
- console.log("递归再一次", nextSpaceObj);
- this.findLeftRelateSpace(nextSpaceObj, direction);
- }
-
- const rightArr = this.tempSpaceList.filter((item)=>{
- if(direction == "E"){
- return item.eastId == spaceId;
- }else if(direction == "W"){
- return item.westId == spaceId;
- }else if(direction == "N"){
- return item.northId == spaceId;
- }else if(direction == "S"){
- return item.southId == spaceId;
- }
- });
-
- for (let index = 0; index < rightArr.length; index++) {
- const nextSpaceObj = rightArr[index];
- console.log("递归再一次", nextSpaceObj);
- this.findLeftRelateSpace(nextSpaceObj, direction);
- }
-
- }
- },
- moveSpaceWall(direction, moveOut, moveValue){
-
- // let isNS = (direction == "N" || direction == "S")
- // if(!this.checkRightSpace(!moveOut, moveValue, isNS)){
- // return
- // }
- // 隐藏变化空间的家具模型,空间动画结束后显示
- this.changeLayoutModelState();
- console.log("关联空间XXXXX", this.leftSpaces, this.rightSpaces)
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- const space = this.spaceList.find((item)=>{
- return item.spaceId == element.spaceId;
- })
- this.moveWall(space, direction, moveOut, moveValue);
- // this.wallTransform(space, direction, moveOut, moveValue);
- }
- let otherdirection = "";
- switch (direction) {
- case "E":
- otherdirection = "W"
- break;
- case "W":
- otherdirection = "E"
- break;
- case "N":
- otherdirection = "S"
- break;
- case "S":
- otherdirection = "N"
- break;
- }
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- this.moveWall(element, otherdirection, !moveOut, moveValue);
- }
- console.log(`当前空间的后id:${this.curSpaceObj.spaceId};墙面方向:${direction};宽度:${this.curSpaceObj.spaceWidth};高度:${this.curSpaceObj.spaceHeight}`)
- },
- // 调整大小
- // direction:方向
- // moveOut:是否外移
- // moveValue: 移动距离
- moveWall(spaceObj, direction, moveOut, moveValue){
- console.log(`移动的空间的id-------:${spaceObj.spaceId};移动方向:${direction};是否外移:${moveOut};移动距离:${moveValue}`)
- const oldSpaceObj = JSON.parse(JSON.stringify(spaceObj))
-
- const cube = this.gltfSpaces.find((item)=>{
- return item.spaceId == spaceObj.spaceId;
- })
-
- if(!cube){
- return
- }
-
- if(!moveOut){
- moveValue = moveValue * -1;
- }
- const {position,scale} = cube;
- // 重新计算缩放 和 位置
- let toScaleX = scale.x;
- let toScaleZ = scale.z;
- let toPx = position.x;
- let toPz = position.z;
- if(direction == 'E' || direction == 'W'){
- let spaceWidth = scale.x * 300;
- toScaleX = (spaceWidth + moveValue) / 300;
- if(direction == 'W'){
- toPx = position.x - moveValue / 2 / 100;
- }else{
- toPx = position.x + moveValue / 2 / 100;
- }
- spaceObj.spaceWidth += moveValue;
- spaceObj.centerX = toPx * 100;
- }
-
- if(direction == 'N' || direction == 'S'){
- let spaceHeight = scale.z * 300;
- toScaleZ = (spaceHeight + moveValue) / 300;
- if(direction == 'N'){
- toPz = position.z - moveValue / 2 / 100;
- }else{
- toPz = position.z + moveValue / 2 / 100;
- }
- spaceObj.spaceHeight += moveValue;
- spaceObj.centerY = toPz * 100 * -1;
- }
- console.log("curSpaceObj",this.curSpaceObj.spaceId, spaceObj.spaceId, spaceObj.centerX, spaceObj.centerY, toScaleX,toScaleZ,toPx,toPz)
- console.log("当前空间变化后的尺寸",spaceObj.spaceWidth, spaceObj.spaceHeight, spaceObj.spaceId)
-
- // 更新数据
- const spaceIndex = this.spaceList.findIndex((item)=>{
- return item.spaceId == spaceObj.spaceId;
- })
- if(spaceIndex!=-1){
- this.spaceList[spaceIndex] = spaceObj;
- if(this.curSpaceObj.spaceId == spaceObj.spaceId){
- this.curSpaceObj = spaceObj;
- }
- }
- this.curHouseObj.houseJson = JSON.stringify(this.spaceList);
- //空间动画处理-提取到floorMethod.js中
- this.changeSpacesAnim({spaceId:spaceObj.spaceId,toScaleX,toScaleZ,toPx,toPz})
- // 墙体动画处理
- //// 根据空间尺寸,更新前提数据
- const wallObj = this.wallList.find((item)=>{
- return item.id == spaceObj.wallId;
- })
-
- const initSpaceObj = this.spaceListBackup.find((item)=>{
- return item.spaceId == spaceObj.spaceId;
- })
-
- if(wallObj){
- let element = JSON.parse(wallObj.wallJson);
- console.warn("****wallObj**",element)
- this.computeWallHandle(initSpaceObj, spaceObj, element, moveOut, direction); // 重新计算-并把空间的计算结果同步到gltfWalls中
- }
-
- // 移动墙体
- let curSpaceWall = [];
- for (let index = 0; index < this.gltfWalls.length; index++) {
- const element = this.gltfWalls[index];
- if(spaceObj.spaceId == element.spaceId){
- curSpaceWall.push(element);
- }
- }
-
- //移动的是西方的墙壁 和 南方的墙壁,该空间的几何体中心测移动变化
- if(direction == 'W' || direction == 'S'){
- spaceObj.rightCenter = true;
- }
- //移动的是东方的墙壁 和 北方的墙壁,该空间的几何体中心测不移动变化
- if(direction == 'E'|| direction == 'N'){
- spaceObj.rightCenter = false;
- }
- // 排序墙体数据
- curSpaceWall.sort(function(a,b){return a.wallModelData.id -b.wallModelData.id});
- curSpaceWall.sort(function(a,b){return a.wallDirection.localeCompare(b.wallDirection)})
-
- console.log("移动的墙体:", spaceObj, direction, curSpaceWall);
- // return;
-
- for (let index = 0; index < curSpaceWall.length; index++) {
- const element = curSpaceWall[index];
- // console.log("重新计算墙体-墙体数据:",element, spaceObj);
- this.drawModel(element.wallModelData, spaceObj, element, true)
- }
- },
- // 空隙自动补签逻辑
- autoCreateWall(directionIndex, spaceObj){
-
- let direction = ""
- switch (directionIndex) {
- case 1:
- direction = "N"
- break;
- case 2:
- direction = "S"
- break;
- case 3:
- direction = "W"
- break;
- case 4:
- direction = "E"
- break;
- default:
- break;
- }
-
- // 东西墙 检查 南北墙关联空间 南北墙 检查 东西墙关联空间
- if(direction == "E" || direction == "W"){
- if(spaceObj.quadrant == 3 || spaceObj.quadrant == 4){ // 南边空间
- console.log("南北朝向墙自动补齐", this.leftSpaces, this.rightSpaces)
-
-
-
- this.selectedWall("N");
- this.checkIsAutoCreateWall("N", spaceObj)
-
-
-
- this.selectedWall("S");
- this.checkIsAutoCreateWall("S", spaceObj)
-
- let autoWall = this.gltfAutoWalls.find(item=>{
- return item.spaceId == spaceObj.spaceId ;
- })
-
- if(autoWall){
- console.log("南北朝向墙自动补齐---", autoWall, this.gltfAutoWalls)
- if(autoWall.wallDirection == "E"){
- autoWall.obj.position.x = (spaceObj.centerX + (spaceObj.spaceWidth / 2) - 5) / 100
- }
-
- }
-
- }else{ // 北边关联空间
-
- }
- }else{
- if(spaceObj.quadrant == 3 || spaceObj.quadrant == 4){ // 南边空间
-
- console.log("东西朝向墙自动补齐", this.leftSpaces, this.rightSpaces)
-
- this.selectedWall("E");
- this.checkIsAutoCreateWall("E", spaceObj)
-
- this.selectedWall("W");
- this.checkIsAutoCreateWall("W", spaceObj)
-
-
-
- }else{ // 北边关联空间
-
- }
- }
-
- },
- // 检测是否需要补强
- checkIsAutoCreateWall(direction, spaceObj){
- var that = this;
- // 判断南边墙是否需要补充
- if(this.rightSpaces.length == 0){
- console.log("不需要补墙1", direction, this.gltfAutoWalls)
- return;
- }
- const n = (direction == "S" || direction == "E") ? 1 : -1; // 南北方向计算系数
-
- console.log("自动补墙", this.leftSpaces, this.rightSpaces);
-
- let px = 0;
- let pz = 0;
- let sx = 1;
- let sz = 1;
- let rightids = []
- if(spaceObj.quadrant == 3){
-
- // 左边空间的最大值
- let leftMaxValue = 0;
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- if(direction=="S" || direction == "N"){
- const curvalue = element.centerX + element.spaceWidth / 2
- if(leftMaxValue < curvalue){
- leftMaxValue = curvalue
- }
- }else{
- leftMaxValue += (-element.centerY + element.spaceHeight / 2)
- }
- }
- // rightSpaces右边最大值
- let rightMaxValue = 0;
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- if(direction=="S" || direction == "N"){
- const curvalue = element.centerX + element.spaceWidth / 2
- if(rightMaxValue < curvalue){
- rightMaxValue = curvalue
- }
- }else{
- rightMaxValue += -element.centerY + element.spaceHeight / 2
- }
- rightids.push(element.spaceId)
- }
-
- // 是否有墙
- const index = this.gltfWalls.findIndex(item=>{
- // console.log("墙面模型", item)
- return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
- })
-
- // 有墙,左边墙>右边墙,计算南北墙
- if(index != -1 && leftMaxValue > rightMaxValue && (direction == "S" || direction == "N")){
- console.log("不需要补墙251",index, leftMaxValue, rightMaxValue)
- // 是否补过墙
- const autoWall = this.gltfAutoWalls.find(item=>{
- return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "S" ? "N": "S");
- })
- if(autoWall){
- let cube = autoWall.obj;
- if(cube){
- cube.scale.set(0,0,0);
- }
- }
- return
- }
- // 有墙,左边墙>右边墙,计算东西墙
- if(index != -1 && leftMaxValue > rightMaxValue && (direction == "E" || direction == "W")){
- console.log("不需要补墙252",index, leftMaxValue, rightMaxValue, spaceObj.spaceId, direction, this.gltfAutoWalls)
- const autoWall = this.gltfAutoWalls.find(item=>{
- return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "E" ? "W": "E");
- })
- if(autoWall){
- let cube = autoWall.obj;
- if(cube){
- cube.scale.set(0,0,0);
- }
- }
- return
- }
-
- let wallOffset = index != -1 ? -5 : 5;
-
- console.log("空间最大值", leftMaxValue, rightMaxValue, direction, index);
- const cubeW = Math.abs(leftMaxValue - rightMaxValue);
-
- if(direction=="S" || direction == "N"){
- px = (Math.min(leftMaxValue, rightMaxValue) + cubeW / 2) / 100
- pz = (-spaceObj.centerY + spaceObj.spaceHeight * n / 2 + wallOffset * n) / 100;
- sx = cubeW / 10 ;
- // 长边有墙
- }else{
- px = (spaceObj.centerX + spaceObj.spaceWidth * n / 2 + wallOffset * n) / 100;
- pz = (Math.max(leftMaxValue, rightMaxValue) - cubeW / 2) / 100
- sz = cubeW / 10;
- }
-
-
-
-
- }else{
- let leftMinValue = 0;
- for (let index = 0; index < this.leftSpaces.length; index++) {
- const element = this.leftSpaces[index];
- if(direction=="S" || direction == "N"){
- leftMinValue += (element.centerX - element.spaceWidth / 2)
- }else{
- leftMinValue += (-element.centerY + element.spaceHeight / 2)
- }
- }
- // rightSpaces右边最大值
- let rightMinValue = 0;
- for (let index = 0; index < this.rightSpaces.length; index++) {
- const element = this.rightSpaces[index];
- if(direction=="S" || direction == "N"){
- rightMinValue += (element.centerX - element.spaceWidth / 2)
- }else{
- rightMinValue = (-element.centerY + element.spaceHeight / 2)
- }
- rightids.push(element.spaceId)
- }
-
-
- const index = this.gltfWalls.findIndex(item=>{
- // console.log("墙面模型", item)
- return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
- })
-
- if(index != -1 && leftMinValue < rightMinValue && (direction == "S" || direction == "N")){
- console.log("不需要补墙251")
- return
- }
-
- if(index != -1 && leftMinValue > rightMinValue && (direction == "E" || direction == "W")){
- console.log("不需要补墙252")
- return
- }
-
- let wallOffset = index != -1 ? -5 : 5;
-
- console.log("空间最大值", leftMinValue, rightMinValue);
- const cubeW = Math.abs(leftMinValue - rightMinValue);
-
- if(leftMinValue > rightMinValue && index == -1 && (direction == "S" || direction == "N")){
- console.log("不需要补墙241", leftMinValue, rightMinValue)
-
- const autoWall = this.gltfAutoWalls.find(item=>{
- return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "S" ? "N": "S");
- })
- if(autoWall){
- let cube = autoWall.obj;
- if(cube){
- cube.scale.set(0,0,0);
- }
- }
- return
- }
- if(leftMinValue < rightMinValue && index == -1 && (direction == "E" || direction == "W")){
- console.log("不需要补墙242", leftMinValue, rightMinValue)
-
- const autoWall = this.gltfAutoWalls.find(item=>{
- return item.rightids.indexOf(spaceObj.spaceId) != -1 && item.wallDirection == (direction == "W" ? "E": "W");
- })
- if(autoWall){
- let cube = autoWall.obj;
- if(cube){
- cube.scale.set(0,0,0);
- }
- }
- return
- }
- if(direction=="S" || direction == "N"){
- px = (Math.max(leftMinValue, rightMinValue) - cubeW / 2) / 100
- pz = (-spaceObj.centerY + spaceObj.spaceHeight * n / 2 + wallOffset * n) / 100;
- sx = cubeW / 10;
- }else{
- px = (spaceObj.centerX + spaceObj.spaceWidth * n / 2 + wallOffset * n) / 100;
- pz = (Math.max(leftMinValue, rightMinValue) - cubeW / 2) / 100
- sz = cubeW / 10;
- }
- }
-
- console.log("空间最大值", px, pz, sx, sz, this.gltfAutoWalls);
-
- // 寻找是否已添加过墙面
- const autoWall = this.gltfAutoWalls.find(item=>{
- return (item.spaceId == spaceObj.spaceId && item.wallDirection == direction)
- || (item.rightids.findIndex(it=>{ return it == spaceObj.spaceId})!=-1 && item.wallDirection == direction == "S"?"N":"S")
- || (item.rightids.findIndex(it=>{ return it == spaceObj.spaceId})!=-1 && item.wallDirection == direction == "E"?"W":"E")
- })
-
- if(this.curWallDirection == "S"){
- if(spaceObj.southId > 0){
- return
- }
- }
- if(this.curWallDirection == "E"){
- if(spaceObj.eastId > 0){
- return
- }
- }
- if(this.curWallDirection == "N"){
- if(spaceObj.northId > 0){
- return
- }
- }
-
- if(this.curWallDirection == "W"){
- if(spaceObj.westId > 0){
- return
- }
- }
-
- if(autoWall){
- console.log("修改补墙的信息", px, pz, sx, sz);
- let cube = autoWall.obj;
- cube.position.set(px,0,pz);
- cube.scale.set(sx,1,sz);
- }else{
- console.log("添加补墙的信息", px, pz, sx, sz);
-
- that.loader.load(wallType[0].url, ( gltf ) => {
- let cube = gltf.scene;
-
- cube.position.set(px,0,pz);
- cube.scale.set(sx,1,sz);
- that.scene.add(cube);
- let md = {
- obj:cube,
- wallDirection:direction,
- spaceId:spaceObj.spaceId,
- quadrant:spaceObj.quadrant,
- rightids:rightids
- };
- that.gltfAutoWalls.push(md);
- // console.log("模型加载成功", that.gltfAutoWalls, spaceObj.spaceId);
- });
- }
- },
- // 墙体缩放逻辑
- wallTransform(spaceObj, direction, moveOut, moveValue){
- console.log(`移动的空间的id:${spaceObj.spaceId};移动方向:${direction};是否外移:${moveOut};移动距离:${moveValue}`)
- },
- updateWallModels(){
- let that = this;
- console.log("开始替换墙体模型", this.leftSpaces, this.rightSpaces, this.gltfWalls);
- let promise_list = [];
- // const gltfWalls = JSON.parse(JSON.stringify(this.gltfWalls))
- this.gltfWalls.forEach((item,index) => {
- promise_list.push(
- new Promise((resolve, reject) => {
- this.loadChangeWallModels(item, resolve);
- })
- )
- });
- Promise.all(promise_list).then(()=>{
- this.$nextTick(()=>{
- let newArr = [];
- const newWalls = that.gltfWalls.filter(it=>{
- return !it.isDidWall
- })
- that.gltfWalls = newWalls;
- console.log("加载完成2",newWalls, newArr, that.gltfWalls, that.wallList);
- })
- })
- },
-
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "./webgl_rxdz.scss";
- </style>
|