|
|
@@ -1,922 +0,0 @@
|
|
|
-<template src="./webgl_rxdz_roam.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';
|
|
|
-
|
|
|
- var requestId = "";
|
|
|
- const util = require('@/utils/util.js').default;
|
|
|
- // import util from '@/utils/util.js';
|
|
|
- // const config = require('@/services/urlConfig.js');
|
|
|
- // import requestConfig from '@/static/lib/requestConfig.js';
|
|
|
- import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
|
|
|
- import viewMask from'@/components/newBottomCom/viewMask/viewMask.vue';
|
|
|
-
|
|
|
- // import { RGBELoader } from '@/webgl/jsm/loaders/RGBELoader.js';
|
|
|
- import screenshot from '@/mixins/screenshot.js';
|
|
|
- import floorMethod from '@/mixins/floorMethod.js';
|
|
|
- import loadModel from '@/mixins/loadModel.js';
|
|
|
- import wallMethod from '@/mixins/wallMethod.js';
|
|
|
- // import commonPageMethod from '@/common/commonPageMethod.js';
|
|
|
- // const app = getApp(); //获取应用实例
|
|
|
- export default {
|
|
|
- components:{viewShell,viewMask},
|
|
|
- mixins:[screenshot,loadModel,floorMethod,wallMethod],
|
|
|
- /**
|
|
|
- * 页面的初始数据
|
|
|
- */
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pvCurPageName: "room_show",
|
|
|
- locusBehaviorName: "房间展示",
|
|
|
- pvCurPageParams: null,
|
|
|
- houseId: "",
|
|
|
- pvId: 'p_2cmina_23080402',
|
|
|
- canvas:null,
|
|
|
- navbar: {
|
|
|
- showCapsule: 1,
|
|
|
- title: '客厅',
|
|
|
- titleColor: '#000',
|
|
|
- navPadding: 0,
|
|
|
- navPaddingBg:'transparent',
|
|
|
- navBarColor: 'transparent',
|
|
|
- navBackColor: 'transparent',
|
|
|
- haveCallback: false, // 如果是 true 会接手 navbarBackClk
|
|
|
- fromShare: false,
|
|
|
- fromProject: 0,
|
|
|
- shareToken: "",
|
|
|
- pageName: this.pvCurPageName,
|
|
|
- },
|
|
|
- id:'',// 户型编号
|
|
|
- spaceList:[], // 空间列表
|
|
|
- gltfSpaces:[], // 场景中地板模型数组
|
|
|
- curSpaceObj:null, // 当前选中的空间
|
|
|
- // curSpaceIndex:-1, // 当前选中的空间索引
|
|
|
- spaceId:null,
|
|
|
- wallIds:[], // 空间墙体id
|
|
|
- wallList:[], // 墙体数据
|
|
|
- gltfWalls:[], // 场景中墙体模型数组
|
|
|
- loader:null,
|
|
|
- scene:null,
|
|
|
- // sky:null,
|
|
|
- camera:null,
|
|
|
- controlStarPosition : { x:0, y:0, z:0}, //控制器初始位置
|
|
|
- cameraStarPosition : { x:0, y:20, z:0} ,//摄像头初始位置
|
|
|
- cameraLastPosition: null, //摄像头上一次移动到的位置
|
|
|
- controlLastPosition: null, //观察点上一次移动到的位置
|
|
|
- canvasHeight:408, //canvas视图的高度-计算得出
|
|
|
- chooseMesh:null,//标记鼠标拾取到的mesh
|
|
|
- isManyou: false, //当前是否处在漫游状态
|
|
|
- shottingImg: [],
|
|
|
- progress:1, //进度条
|
|
|
- myLoadingStatus:false,
|
|
|
- // textGeoList:[],
|
|
|
- repeatFlag:false, //重复点击
|
|
|
- // skyPlan: null, // 天空盒子
|
|
|
- instancedMeshList: [],
|
|
|
- screenshotResolve:null,
|
|
|
- actors:[],
|
|
|
- showDownView:true,//默认显示下载按钮
|
|
|
- currentActor:null,
|
|
|
- isIos:false, //是否ios手机。默认不是
|
|
|
- circleGroup:null,
|
|
|
- // aiImagesList:[
|
|
|
- // // "https://dm.static.elab-plus.com/miniProgram/plus_IM01.png",
|
|
|
- // // "https://dm.static.elab-plus.com/miniProgram/plus_IM02.png",
|
|
|
- // // "https://dm.static.elab-plus.com/miniProgram/plus_IM03.png",
|
|
|
- // // "https://dm.static.elab-plus.com/miniProgram/plus_IM04.png",
|
|
|
- // ]
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- cancelAnimationFrame(requestId, this.canvas)
|
|
|
- this.worker && this.worker.terminate()
|
|
|
- if (this.renderer instanceof THREE.WebGLRenderer) {
|
|
|
- this.renderer.dispose()
|
|
|
- this.renderer.forceContextLoss()
|
|
|
- this.renderer.context = null
|
|
|
- this.renderer.domElement = null
|
|
|
- this.renderer = null;
|
|
|
- this.clearHandle()
|
|
|
- }
|
|
|
- TWEEN && TWEEN.removeAll();//清除所有的tween;
|
|
|
- console.warn("***beforeDestroy-webgl_rxdz_roam***");
|
|
|
- },
|
|
|
- mounted(options) {
|
|
|
- var that = this;
|
|
|
- console.warn("***webgl_rxdz_roam-options***",this.$route.query)
|
|
|
-
|
|
|
- let unit = window.screen.width / 750;//单位rpm 对应 px 的值
|
|
|
- that.canvasHeight = window.screen.height - (408 * unit) + (20 * unit);
|
|
|
- this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
|
|
|
- this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
|
|
|
- let container = this.$refs.webgl;
|
|
|
- let canvas3d = this.canvas = this.$refs.glcanvas;
|
|
|
- //uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
|
|
|
-
|
|
|
- let camera = null, renderer = null;
|
|
|
- let needRender = false; //是否需要渲染 false表示不需要渲染；true 表示需要渲染
|
|
|
- let loader = this.loader = new GLTFLoader();
|
|
|
- let scene = this.scene = new THREE.Scene();
|
|
|
- let raycaster = null;
|
|
|
- let mouse = new THREE.Vector2();
|
|
|
- let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
|
|
|
- let isUserContorl = true;//是否进入漫游状态-默认是
|
|
|
- //漫游时变量
|
|
|
- let onPointerDownMouseX = 0, onPointerDownMouseY = 0,
|
|
|
- lon = 0;
|
|
|
- let fingerCount = 0; //触摸时的手指数目
|
|
|
- let startTime = 0; //非漫游时的移动变量
|
|
|
- let tweenCameraAnma = false; //表示当前是否处在动画过程中
|
|
|
- let controls = null,boundary=null;
|
|
|
- let stats;
|
|
|
- init();
|
|
|
- // this.$refs.myLoading.showLoading("加载中...1%")
|
|
|
- this.$store.state.loadingMsg="加载中...1%";
|
|
|
- // this.myLoadingStatus = true;
|
|
|
- this.progress = 1;
|
|
|
- this.clearEvent = clearEvent;
|
|
|
- this.attendEvent = attendEvent;
|
|
|
- // this.meshRoam = meshRoam;
|
|
|
- this.tweenCameraAnmaChange = tweenCameraAnmaChange;
|
|
|
- this.switchActor = switchActor;
|
|
|
- this.hideOrShowActor = hideOrShowActor;
|
|
|
- this.starRender = starRender;//对外暴露启动渲染的方法
|
|
|
- this.positionCamer = positionCamer;
|
|
|
- function init() {
|
|
|
-
|
|
|
- scene.background = new THREE.Color("#FFFFFF");
|
|
|
- // scene.environment = new THREE.Color("#F2F2F2");
|
|
|
- // 创建一个HDR贴图加载器
|
|
|
- // const rgbeloader = new RGBELoader();
|
|
|
- // // 加载HDR贴图
|
|
|
- // rgbeloader.load('https://dm.static.elab-plus.com/miniProgram/environment.hdr', (texture) => {
|
|
|
- // // 将HDR贴图设置为场景的环境贴图
|
|
|
- // texture.mapping = THREE.EquirectangularReflectionMapping;
|
|
|
- // scene.environment = texture;
|
|
|
- // })
|
|
|
-
|
|
|
- // 创建相机位置
|
|
|
- camera = new THREE.PerspectiveCamera(95, window.screen.width / that.canvasHeight, 0.1, 10000 );
|
|
|
- // camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
|
|
|
- // camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
|
|
|
- scene.add(camera);
|
|
|
- that.camera = camera;
|
|
|
-
|
|
|
- // 环境光会均匀的照亮场景中的所有物体
|
|
|
- const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
|
|
|
- scene.add(ambientLight);
|
|
|
- //平行光
|
|
|
- const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
|
|
|
- light.position.set(5, 7, 3); //default; light shining from top
|
|
|
- light.castShadow = true; // default false
|
|
|
- // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
|
|
|
- light.shadow.camera.left = -100; // 这个区域内产生阴影
|
|
|
- light.shadow.camera.right = 100; // 这个区域内产生阴影
|
|
|
- light.shadow.camera.top = 100; // 这个区域内产生阴影
|
|
|
- light.shadow.camera.bottom = -100; // 这个区域内产生阴影
|
|
|
-
|
|
|
- light.shadow.mapSize.width = 8192; // 影响阴影的清晰度
|
|
|
- light.shadow.mapSize.height = 8192; // 影响阴影的清晰度
|
|
|
-
|
|
|
- scene.add(light);
|
|
|
-
|
|
|
- //antialias 这个值得设置为false，不然IOS上截图会失效
|
|
|
- renderer = that.renderer = new THREE.WebGLRenderer( {
|
|
|
- canvas:canvas3d,
|
|
|
- alpha: true,
|
|
|
- antialias:true,
|
|
|
- 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 = 0.5;
|
|
|
- controls.maxDistance = 10;
|
|
|
- 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.enablePan = false;//禁用摄像机平移
|
|
|
- controls.enableRotate = true;//启用摄像机水平或垂直旋转
|
|
|
- controls.zoomToCursor = true;
|
|
|
- // controls.update();
|
|
|
- // 监听相机移动事件-限制只能在当前空间范围内移动
|
|
|
- controls.addEventListener('change', () => {
|
|
|
- // 检查相机位置是否超出边界框
|
|
|
- if (boundary && !boundary.containsPoint(camera.position)) {
|
|
|
- let clampedPosition = new THREE.Vector3( );
|
|
|
- boundary.clampPoint(camera.position,clampedPosition);
|
|
|
- if(clampedPosition){
|
|
|
- camera.position.copy(clampedPosition);
|
|
|
- // controls.target.copy(clampedPosition);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- // controls.target = new THREE.Vector3( );;
|
|
|
- // camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
|
|
|
- raycaster = new THREE.Raycaster();
|
|
|
- stats = new Stats();
|
|
|
- container.appendChild(stats.dom);
|
|
|
- stats.domElement.style.top = '100px';
|
|
|
- attendEvent();//注册监听事件
|
|
|
- starRender(); //启动渲染
|
|
|
- }
|
|
|
- function tweenCameraAnmaChange (value) {
|
|
|
- tweenCameraAnma = value
|
|
|
- }
|
|
|
- function attendEvent () {
|
|
|
- renderer.domElement.addEventListener('touchstart', onPointerStart, false);
|
|
|
- renderer.domElement.addEventListener('touchmove', onPointerMove, false);
|
|
|
- renderer.domElement.addEventListener('touchend', onPointerUp, false);
|
|
|
- }
|
|
|
- //取消事件监听-避免二次进入时触发多次事件
|
|
|
- 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){
|
|
|
- startTime = (new Date()).getTime();
|
|
|
- fingerCount = event.touches.length;//手指个数
|
|
|
- console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
|
|
|
- if (fingerCount === 1) {
|
|
|
- // 只有一个手指时记录当前点的坐标作为平移起始点
|
|
|
- onPointerDownMouseX = event.changedTouches[0].clientX;
|
|
|
- onPointerDownMouseY = event.changedTouches[0].clientY;
|
|
|
- }
|
|
|
- }
|
|
|
- //持续触摸中
|
|
|
- function onPointerMove( event ) {
|
|
|
- fingerCount = event.touches.length;//手指个数
|
|
|
- }
|
|
|
- //触摸结束
|
|
|
- function onPointerUp(event) {
|
|
|
- fingerCount = event.touches.length;//手指个数
|
|
|
- console.warn("***触摸结束***",fingerCount,startTime)
|
|
|
- if(fingerCount==0){
|
|
|
- let now = new Date().getTime()
|
|
|
- if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10
|
|
|
- && Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10
|
|
|
- && (now - startTime) < 300 ){
|
|
|
- checkIntersection(event);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //射线检测handle
|
|
|
- function checkIntersection(event) {
|
|
|
- let x = (event.changedTouches[0].clientX / window.screen.width) * 2 - 1;
|
|
|
- let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
|
|
|
- mouse.x = x;
|
|
|
- mouse.y = y;
|
|
|
- //更新射线
|
|
|
- raycaster.setFromCamera(mouse, camera);
|
|
|
- let intersects = raycaster.intersectObjects(scene.children,true);
|
|
|
- console.warn("***checkIntersection***",intersects.length)
|
|
|
- if (intersects.length > 0) {
|
|
|
- //找到最近的那个网格模型物体
|
|
|
- let mesh = intersects.find((it) => {
|
|
|
- if(it.object && it.object.isMesh == true
|
|
|
- && it.object.parent && it.object.parent.name == 'actor'
|
|
|
- && it.object.parent.visible == true){
|
|
|
- return true;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- //拾取到了视角，就不继续拾取了
|
|
|
- if(mesh){
|
|
|
- moveActor(mesh.object.parent);
|
|
|
- return false;
|
|
|
- }
|
|
|
- mesh = intersects.find((it) => {
|
|
|
- if(it.object && it.object.isInstancedMesh
|
|
|
- && (it.object.name == '地板' || it.object.name == '花园') && it.object.visible == true){
|
|
|
- return true;
|
|
|
- }
|
|
|
- });
|
|
|
- //拾取到了地板
|
|
|
- if(mesh){
|
|
|
- let floor = mesh.object;
|
|
|
- let index = mesh.instanceId;//射线相交是的实例序号
|
|
|
- let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
|
|
|
- if(floor.name == "花园"){//花园
|
|
|
- let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType==14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
|
|
|
- spaceId = selectMesh.spaceId;
|
|
|
- }else{//室内
|
|
|
- // floor.name = "地板";
|
|
|
- let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType!=14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
|
|
|
- spaceId = selectMesh.spaceId;
|
|
|
- }
|
|
|
- // let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
|
|
|
- console.warn("***checkIntersection-地板***",mesh,floor,index,spaceId,that.spaceId)
|
|
|
- //当前拾取到的是本空间的底部-意味着用户点击了地板
|
|
|
- if(floor && spaceId == that.spaceId){
|
|
|
- // console.warn("***checkIntersection-地板***",mesh,floor)
|
|
|
- moveCarmer(mesh.point);
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //显示当前选中的视角或者隐藏所有视角-因为截图时不能保留视角
|
|
|
- function hideOrShowActor (type) {
|
|
|
- console.warn("***hideOrShowActor***",type)
|
|
|
- if(type=='hide'){
|
|
|
- that.actors.forEach(it=>{
|
|
|
- it.visible = false;//隐藏所有的视角的mesh模型
|
|
|
- })
|
|
|
- }else{
|
|
|
- if(!that.currentActor){
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: "没有视角!",
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- that.actors.forEach(it=>{
|
|
|
- if(that.currentActor.userIndex==it.userIndex){
|
|
|
- it.visible = false;//隐藏即将切换到的视角的mesh模型
|
|
|
- }else{
|
|
|
- it.visible = true;//显示其他视角的模型
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- //自动切换视角
|
|
|
- function switchActor () {
|
|
|
- if(!that.currentActor){
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: "没有当前视角!",
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(!that.actors || that.actors.length==0){
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: "没有视角!",
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- let index = that.currentActor.userIndex;//当前视角的序号
|
|
|
- let nextIndex = (index + 1) % that.actors.length;
|
|
|
- //移动到对应的视角去
|
|
|
- moveActor(that.actors[nextIndex]);
|
|
|
- }
|
|
|
- //移动到选中的位置-地板
|
|
|
- function moveCarmer (point) {
|
|
|
- //还在动画中，不能点击切换
|
|
|
- if(tweenCameraAnma == true){
|
|
|
- return false;
|
|
|
- }
|
|
|
- let _x = point.x - camera.position.x;//x轴移动的距离
|
|
|
- let _z = point.z - camera.position.z;//z轴移动的距离
|
|
|
- // console.warn("***moveCarmer***",_x,_z)
|
|
|
- let cameraNewPosition = {x:camera.position.x + _x,y:1.2,z:camera.position.z + _z};
|
|
|
- let targetNewPosition = {x:controls.target.x + _x,y:1.2,z:controls.target.z + _z};
|
|
|
- let oldUp = {x:0,y:1,z:0};
|
|
|
- let newUp = {x:0,y:1,z:0};
|
|
|
- moveTip(cameraNewPosition)
|
|
|
- // console.warn("**moveCarmer***",lon,JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
|
|
|
- tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
|
|
|
- }
|
|
|
- //创建地标
|
|
|
- function creatMoveTip(position){
|
|
|
- if(!that.circleGroup){
|
|
|
- that.circleGroup = new THREE.Group();
|
|
|
- let geometry = new THREE.CircleGeometry( 0.2, 32 );
|
|
|
- let material = new THREE.MeshBasicMaterial( { transparent: true } );
|
|
|
- let circle = new THREE.Mesh( geometry, material );
|
|
|
- circle.position.set(position.x,0.01,position.z);
|
|
|
- circle.rotation.x = -Math.PI / 2;
|
|
|
- // let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
|
|
|
- // let circle2 = new THREE.Mesh( geometry1, material );
|
|
|
- // circle2.position.set(position.x,0.01,position.z);
|
|
|
- // 使用贴图
|
|
|
- const textureLoader = new THREE.TextureLoader();
|
|
|
- textureLoader.load('https://dm.static.elab-plus.com/miniProgram/circlemap1.png', function(texture) {
|
|
|
- material.map = texture; // 将贴图应用于材质的map属性
|
|
|
- material.needsUpdate = true; // 更新材质
|
|
|
- });
|
|
|
- that.circleGroup.add(circle);
|
|
|
- scene.add(that.circleGroup);
|
|
|
- }
|
|
|
- }
|
|
|
- //移动地标
|
|
|
- function moveTip(position){
|
|
|
- if(!that.circleGroup){
|
|
|
- that.circleGroup = new THREE.Group();
|
|
|
- let geometry = new THREE.CircleGeometry( 0.2, 32 );
|
|
|
- let material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
|
|
|
- let circle = new THREE.Mesh( geometry, material );
|
|
|
- circle.position.set(position.x,0.01,position.z);
|
|
|
- circle.rotation.x = -Math.PI / 2;
|
|
|
- // let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
|
|
|
- // let circle2 = new THREE.Mesh( geometry1, material );
|
|
|
- // circle2.position.set(position.x,0.01,position.z);
|
|
|
- that.circleGroup.add(circle);
|
|
|
- scene.add(that.circleGroup);
|
|
|
- }else{
|
|
|
- that.circleGroup.children[0].position.set(position.x,0.01,position.z);
|
|
|
- }
|
|
|
- }
|
|
|
- //移动视角点位
|
|
|
- function moveActor (obj) {
|
|
|
- clearEvent();//注销事件监听
|
|
|
- that.actors.forEach(it=>{
|
|
|
- if(obj.userIndex==it.userIndex){
|
|
|
- it.visible = false;//隐藏
|
|
|
- }else{
|
|
|
- it.visible = true;//显示其他
|
|
|
- }
|
|
|
- })
|
|
|
- // console.warn("***moveActor***",obj)
|
|
|
- that.currentActor = obj;//记录下当前的视角对象 mesh网格模型
|
|
|
- let cameraNewPosition = obj.position;
|
|
|
- let targetNewPosition = obj.targetNewPosition;
|
|
|
- let oldUp = {x:0,y:1,z:0}; //俯视
|
|
|
- let newUp = {x:0,y:1,z:0}; //正视
|
|
|
- console.warn("**moveActor***",JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
|
|
|
- tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
|
|
|
- lon = 0;
|
|
|
- setTimeout(()=> {
|
|
|
- attendEvent()
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- //初始化点位视角
|
|
|
- function initActor(){
|
|
|
- if(!chooseMesh){
|
|
|
- console.error("[drawActor],没有选中的空间数据")
|
|
|
- return false;
|
|
|
- }
|
|
|
- let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
|
|
|
- if(!spaceObj.actors){
|
|
|
- return false;
|
|
|
- }
|
|
|
- let defaulIndex = spaceObj.actors.findIndex(it=>it.isSelected==true);
|
|
|
- if(defaulIndex == -1){
|
|
|
- defaulIndex = 0;
|
|
|
- }
|
|
|
- that.actors = [];
|
|
|
- that.loader.load("https://dm.static.elab-plus.com/miniProgram/hs/gltf/sxtgltf.gltf", ( gltf ) => {
|
|
|
- spaceObj.actors.forEach((actor,index)=>{
|
|
|
- let model = gltf.scene; // 获取模型
|
|
|
- let cloneModel = model.clone(true);//赋值模型，准备复用
|
|
|
- cloneModel.children.map((v,i)=>{
|
|
|
- if(v.material){
|
|
|
- v.material = model.children[i].material.clone()
|
|
|
- }
|
|
|
- })
|
|
|
- let cube = cloneModel;
|
|
|
- cube.name = "actor";
|
|
|
- cube.userType = "mesh";
|
|
|
- //新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
|
|
|
- let _actorLoaction = actor.actorLocation.split(',');//x y z
|
|
|
- let _actorTransform = actor.actorTransform.split(',');//旋转角度，取第三个值
|
|
|
- let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]));//将度转化为弧度。
|
|
|
- let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
|
|
|
- if(parseInt(_actorLoaction[1])==0){//X轴
|
|
|
- _actorLoaction[1] = spaceObj.centerX;
|
|
|
- }
|
|
|
- if(parseInt(_actorLoaction[0])==0){//Y轴
|
|
|
- _actorLoaction[0] = spaceObj.centerY;
|
|
|
- }
|
|
|
- let X_C = _actorLoaction[0] - spaceObj.centerY;//X轴偏移量
|
|
|
- let Y_C = _actorLoaction[1] - spaceObj.centerX;//Y轴偏移量
|
|
|
- let px = spaceObj.centerX + X_C;
|
|
|
- let py = spaceObj.centerY + Y_C;
|
|
|
- let position = {
|
|
|
- x:(parseInt(px))/100,
|
|
|
- y:1.2,
|
|
|
- z:-(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
|
|
|
- }
|
|
|
- //新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.2
|
|
|
- let targetNewPosition = {
|
|
|
- x:position.x + Math.sin(_hd),
|
|
|
- y:1.2 + Math.tan(_hdY),
|
|
|
- z:(position.z - Math.cos(_hd)),
|
|
|
- }
|
|
|
- cube.position.set(position.x,position.y,position.z)
|
|
|
- cube.scale.set(2, 2, 2);
|
|
|
- cube.userIndex = index;
|
|
|
- cube.actorEum = index;
|
|
|
- cube.targetNewPosition = targetNewPosition;
|
|
|
- console.warn("*actors*",cube)
|
|
|
- scene.add(cube);
|
|
|
- that.actors.push(cube);//添加视角
|
|
|
- if(index == defaulIndex){//隐藏当前视角
|
|
|
- cube.visible = false;
|
|
|
- that.currentActor = cube;//记录下当前的视角对象 mesh网格模型
|
|
|
- let param = {
|
|
|
- type: 'CLK', //埋点类型
|
|
|
- clkId: 'clk_2cmina_23080411', //点击ID
|
|
|
- clkName: 'visualangle_clk', //点击前往的页面名称
|
|
|
- clkParams: {
|
|
|
- locusName: "预制视角",
|
|
|
- type:that.actors[index].actorEum
|
|
|
- }
|
|
|
- };
|
|
|
- util.trackRequest(param);
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- //计算当前选中空间的平视时的观察点和摄像机的放置点位
|
|
|
- function roamPositionHandle(lon=''){
|
|
|
- if(!chooseMesh){
|
|
|
- console.error("[roamPositionHandle],没有选中的空间数据")
|
|
|
- return false;
|
|
|
- }
|
|
|
- let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
|
|
|
- //获取视角
|
|
|
- let defaultActor = null;
|
|
|
- if(spaceObj.actors && spaceObj.actors.length>0){
|
|
|
- defaultActor = spaceObj.actors.find(it=>it.isSelected==true);
|
|
|
- if(!defaultActor){
|
|
|
- defaultActor = spaceObj.actors[0];
|
|
|
- }
|
|
|
- }
|
|
|
- let _actorLoaction = defaultActor.actorLocation.split(',');//x y z
|
|
|
- let _actorTransform = defaultActor.actorTransform.split(',');//旋转角度，取第三个值
|
|
|
- let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]) + lon);//将度转化为弧度。
|
|
|
- let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
|
|
|
- if(parseInt(_actorLoaction[1])==0){//X轴
|
|
|
- _actorLoaction[1] = spaceObj.centerX;
|
|
|
- }
|
|
|
- if(parseInt(_actorLoaction[0])==0){//Y轴
|
|
|
- _actorLoaction[0] = spaceObj.centerY;
|
|
|
- }
|
|
|
- let X_C = _actorLoaction[0] - spaceObj.centerY;//X轴偏移量
|
|
|
- let Y_C = _actorLoaction[1] - spaceObj.centerX;//Y轴偏移量
|
|
|
- let px = spaceObj.centerX + X_C;
|
|
|
- let py = spaceObj.centerY + Y_C;
|
|
|
- //新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
|
|
|
- let cameraNewPosition = {
|
|
|
- x:(parseInt(px))/100,
|
|
|
- y:1.2,
|
|
|
- z:-(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
|
|
|
- }
|
|
|
- if(cameraNewPosition){
|
|
|
- let minX = 0,maxX = 0,minY = 0,maxY = 0;//0.1 是模型墙壁厚度
|
|
|
- minX = (spaceObj.centerX - (spaceObj.spaceWidth/2))/100 + 0.1;
|
|
|
- maxX = (spaceObj.centerX + (spaceObj.spaceWidth/2))/100 - 0.1;
|
|
|
- maxY = -((spaceObj.centerY - (spaceObj.spaceHeight/2))/100 + 0.1);
|
|
|
- minY = -((spaceObj.centerY + (spaceObj.spaceHeight/2))/100 - 0.1);
|
|
|
- //新的坐标轴不在房间范围内，则不能移动
|
|
|
- // console.warn("**roamPositionHandle-观察点不在范围中****",JSON.stringify(cameraNewPosition),minX,maxX,minY,maxY)
|
|
|
- if(cameraNewPosition.x<minX || cameraNewPosition.x>maxX
|
|
|
- ||cameraNewPosition.z<minY || cameraNewPosition.z>maxY){//不在房间范围
|
|
|
- let _x = ((spaceObj.spaceWidth/2) - 15)*defaultActor.presentX + spaceObj.centerX;
|
|
|
- let _z = ((spaceObj.spaceHeight/2) - 15)*defaultActor.presentY + spaceObj.centerY;
|
|
|
- cameraNewPosition.x = _x/100;
|
|
|
- cameraNewPosition.z = - _z/100;
|
|
|
- console.warn("**roamPositionHandle-观察点不在空间范围-强制修正观察点位置****",JSON.stringify(cameraNewPosition))
|
|
|
- }
|
|
|
- }
|
|
|
- //新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.2
|
|
|
- let targetNewPosition = {
|
|
|
- x:cameraNewPosition.x + Math.sin(_hd),
|
|
|
- y:1.2 + Math.tan(_hdY),
|
|
|
- z:(cameraNewPosition.z - Math.cos(_hd)),
|
|
|
- }
|
|
|
- return {cameraNewPosition,targetNewPosition}
|
|
|
- }
|
|
|
- //直接定位到摄像头位置
|
|
|
- function positionCamer(mesh=null){
|
|
|
- if(mesh){//如果传入了模型，则取模型
|
|
|
- chooseMesh = mesh;
|
|
|
- }
|
|
|
- if(!chooseMesh){
|
|
|
- console.error("[positionCamer],没有选中的空间数据")
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(!chooseMesh.actors || chooseMesh.actors.length==0){
|
|
|
- chooseMesh.actors = [{
|
|
|
- actorLocation:chooseMesh.actorLocation,
|
|
|
- actorTransform:chooseMesh.actorTransform,
|
|
|
- isSelected:true,
|
|
|
- presentX:chooseMesh.presentX,
|
|
|
- presentY:chooseMesh.presentY,
|
|
|
- }]
|
|
|
- }
|
|
|
- boundary = new THREE.Box3(
|
|
|
- new THREE.Vector3(chooseMesh.centerX/100 - chooseMesh.spaceWidth/100/2 + 0.1, 0, -chooseMesh.centerY/100 - chooseMesh.spaceHeight/100/2 + 0.1), // 边界框的最小点
|
|
|
- new THREE.Vector3(chooseMesh.centerX/100 + chooseMesh.spaceWidth/100/2 - 0.1, 2.7, -chooseMesh.centerY/100 + chooseMesh.spaceHeight/100/2 - 0.1) // 边界框的最大点
|
|
|
- );
|
|
|
- initActor();//初始化视角
|
|
|
- let data = roamPositionHandle();
|
|
|
- let cameraNewPosition = data.cameraNewPosition;
|
|
|
- let targetNewPosition = data.targetNewPosition;
|
|
|
- creatMoveTip(cameraNewPosition);//创建移动的地标
|
|
|
- camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
|
|
|
- camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
|
|
|
- controls.target.set(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
|
|
|
- }
|
|
|
- // 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)){
|
|
|
- that.repeatFlag = false;//放开限制，可以再次点击
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (!chooseMesh) {
|
|
|
- that.repeatFlag = false;//放开限制，可以再次点击
|
|
|
- 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;
|
|
|
- that.repeatFlag = false;//放开限制，可以再次点击
|
|
|
- })
|
|
|
- // 开始动画
|
|
|
- tween.start();
|
|
|
- }
|
|
|
-
|
|
|
- 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){
|
|
|
-
|
|
|
- }
|
|
|
- renderer.render(scene, camera);//单次渲染
|
|
|
- requestId = requestAnimationFrame(render, canvas3d);
|
|
|
- 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;//清空内存中的数据
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // const eventChannel = this.getOpenerEventChannel();
|
|
|
- // // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
|
|
|
- // eventChannel && eventChannel.hasOwnProperty('on') && eventChannel.on('acceptDataFromOpenerPage', (data) => {
|
|
|
- // console.log('监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据',data)
|
|
|
- // this.setHouseDetail(data);
|
|
|
- // })
|
|
|
-
|
|
|
- },
|
|
|
- computed: {
|
|
|
- curHouseObj() {
|
|
|
- return this.$store.state.curHouseObj;
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- curHouseObj: {
|
|
|
- handler(val) {
|
|
|
- if (val) {
|
|
|
- setTimeout(()=> {
|
|
|
- this.setHouseDetail(val);
|
|
|
- }, 10);
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- hideOrShowActor(){
|
|
|
-
|
|
|
- },
|
|
|
- switchActor(){
|
|
|
-
|
|
|
- },
|
|
|
- positionCamer(){},
|
|
|
- clearHandle(){
|
|
|
- this.clearEvent();
|
|
|
- },
|
|
|
- showOrHideWebGl(){
|
|
|
- this.$refs.viewMask.showOrHideWebGl();//显示或者隐藏AI
|
|
|
- },
|
|
|
- save(){
|
|
|
- this.$refs.viewMask.save();//下载
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置户型详情信息
|
|
|
- * @param {Object} data 户型详情
|
|
|
- */
|
|
|
- setHouseDetail(data){
|
|
|
- if(data){
|
|
|
- this.id = this.curHouseObj.id;
|
|
|
- this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
|
|
|
- console.warn("***curHouseObj***",this.curHouseObj)
|
|
|
- // 加载户型
|
|
|
- this.loadSpace();
|
|
|
- }else{
|
|
|
- this.curHouseObj = {}
|
|
|
- }
|
|
|
- },
|
|
|
- // 绘制空间-即地板
|
|
|
- async loadSpace(){
|
|
|
- this.spaceList = [];
|
|
|
- this.wallIds = [];
|
|
|
- if(!this.curHouseObj || !this.spaceId){//减少重复请求
|
|
|
- console.warn("***数据错误***")
|
|
|
- return false
|
|
|
- }
|
|
|
- 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.actors.forEach(actor=>{
|
|
|
- let _actorLoaction = actor.actorLocation.split(',');//x y z
|
|
|
- let X_C = (parseInt(_actorLoaction[0]) || element.centerY) - element.centerY;//X轴偏移量-UE原因
|
|
|
- let Y_C = (parseInt(_actorLoaction[1]) || element.centerX) - element.centerX;//Y轴偏移量-向量
|
|
|
- let _x = element.centerX + X_C;
|
|
|
- let _z = element.centerY + Y_C;
|
|
|
-
|
|
|
- // let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标
|
|
|
- // let _z = parseInt(_actorLoaction[0]) || element.centerY;//观察点 Z轴坐标
|
|
|
- let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 10);//10是墙壁厚度-单位cm
|
|
|
- let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 10);
|
|
|
- //注意如果一开始就设置大超过空间大小，则处理成贴近空间边界
|
|
|
- actor.presentX = Math.abs(_presentX)>1 ? (_presentX>1?1:-1) : _presentX;//观察点跟空间中心原点的距离比例
|
|
|
- actor.presentY = Math.abs(_presentY)>1 ? (_presentY>1?1:-1) : _presentY;
|
|
|
- })
|
|
|
-
|
|
|
- element.wallMoveValue = "[0,0,0,0]"
|
|
|
- this.spaceList.push(element);
|
|
|
- this.wallIds.push(element.wallId);
|
|
|
-
|
|
|
- if(element.spaceId == this.spaceId){ // 默认选中空间
|
|
|
- this.curSpaceObj = element;
|
|
|
- }
|
|
|
- }
|
|
|
- if(!this.curSpaceObj && this.spaceList.length > 0){
|
|
|
- this.curSpaceObj = this.spaceList[0];
|
|
|
- }
|
|
|
- }
|
|
|
- let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
|
|
|
- this.navbar.title = this.curSpaceObj.spaceName + " " + curSpaceArea + "㎡"
|
|
|
- console.log("该户型空间数据:", this.spaceList);curSpaceArea
|
|
|
- console.log("当前选中的空间:", this.curSpaceObj);
|
|
|
- this.positionCamer(this.curSpaceObj);
|
|
|
- this.loaderSpaceArr(this.spaceList);//绘制地板
|
|
|
- // 获取墙体数据并且绘制墙体
|
|
|
- this.getHouseTypeSpaceWalls();
|
|
|
- },
|
|
|
- // 获取墙体数据
|
|
|
- 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();//
|
|
|
- },
|
|
|
- // 加载单个空间墙体资源
|
|
|
- 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.setSpaceListWallInfo();
|
|
|
- this.$nextTick(()=>{
|
|
|
- // this.moveMeshCenter(this.curSpaceObj);
|
|
|
- this.progress = 100;
|
|
|
- // this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.myLoadingStatus = false;
|
|
|
- // this.$refs.myLoading.hideLoading();
|
|
|
- // this.meshRoam(this.curSpaceObj);//开始漫游，必须先选中模型
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
- @import "./webgl_rxdz_roam.scss";
|
|
|
- /* @import "@/common/css/common.css"; */
|
|
|
-</style>
|
zjs_project