h5-webgl-program/src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

<template src="./webgl_rxdz_look.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');
    const config = require('@/services/urlConfig.js');
	import loadModel from '@/mixins/loadModel.js';
	import wallMethod from '@/mixins/wallMethod.js';
	import floorMethod from '@/mixins/floorMethod.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
    // const app = getApp(); //获取应用实例
    export default {
		mixins:[loadModel,floorMethod,wallMethod],
        /**
         * 页面的初始数据
         */
        data() {
            return {
				pvCurPageName: "webgl_rxdz_look",
				pvCurPageParams: null,
                houseId: "",
				pvId: 'p_2cmina_01043',
				navbar: {
				    showCapsule: 1,
				    title: '查看户型',
				    titleColor: '#fff',
				    navPadding: 0,
				    navPaddingBg:'transparent',
				    navBarColor: 'transparent',
				    navBackColor: 'transparent',
				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
				    fromShare: false,
				    fromProject: 0,
				    shareToken: "",
				    pageName: this.pvCurPageName,
				},
				canvas:null,
                id:'',// 户型编号
                spaceList:[], // 空间列表
                gltfSpaces:[], // 场景中地板模型数组
				spaceId:null,
                wallIds:[], // 空间墙体id
				wallList:[], // 墙体数据
                gltfWalls:[], // 场景中墙体模型数组
                loader:null,
                scene:null,
                // sky:null,
                camera:null,
                controls:null,
				curHouseObj: null,
				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
				// cameraLastPosition: null,		//摄像头上一次移动到的位置
				// controlLastPosition: null,		//观察点上一次移动到的位置
				canvasHeight:430,	//canvas视图的高度-计算得出
				chooseMesh:null,//标记鼠标拾取到的mesh
				progress:1,	//进度条
				myLoadingStatus:false,
				repeatFlag:false,	//重复点击
				instancedFloorMesh:null,
				instancedMeshList: [],
				lableItem:[],
				showLables:false,
				floorList:[],
				floorId:null,
				curData:null,	//上一个页面传来的数据
				curSpaceObj:null,	//当前应该定位到的空间
				isIOS:false,
            }
        },
		computed: {
			userId() {
				return this.$store.state.userId;
			},
		},
        watch:{

        },
		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.clearHandle()
				}
			}, 0)
			this.gltfWalls = [];
			this.instancedMeshList = [];
			this.instancedSpaceMeshList = [];
			this.lableItem = [];
			this.gltfLayouts = [];
			this.instancedFurList = [];
			TWEEN && TWEEN.removeAll();//清除所有的tween;
			console.warn("***destroyed-webgl_rxdz_look***")
		},
        async mounted(options) {
			var that = this;

            this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
            this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
            this.id = this.$route.query.id?this.$route.query.id:'';
			console.warn("***mounted-webgl_rxdz_look****",this.id,this.$route.query)
			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			if(this.id){
				this.getIdData()
			}else{
				this.$store.state.loadingMsg = "没有数据~";
			}
            let container = this.$refs.webgl;
            let canvas3d = this.canvas = this.$refs.glcanvas;

			let controls = null;
			let camera = null, renderer = null, mixer = null;

            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 = false;//是否进入漫游状态

			let stats;
			let tweenCameraAnma = false;	//表示当前是否处在动画过程中

		
			init();
			this.$store.state.loadingMsg="加载中...1%";
			this.progress = 1;
			this.clearEvent = clearEvent;
			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
			this.updateLables = updateLables;
			this.moveMeshCenterHandle = moveMeshCenterHandle;
			this.cameraInit = cameraInit;
			this.resetControl = resetControl;
			function init() {

                scene.background = new THREE.Color("#FFFFFF");

				// 创建相机位置
				camera = new THREE.PerspectiveCamera( 80, window.screen.width / window.screen.height, 0.1, 10000 );
				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
				scene.add(camera);
                that.camera = camera;

                // 环境光会均匀的照亮场景中的所有物体
                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 = 1024; // default
                light.shadow.mapSize.height = 1024; // 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);
				//antialias 这个值得设置为false，不然IOS上截图会失效
                renderer = that.renderer = new THREE.WebGLRenderer({
					canvas:canvas3d, 
					alpha: true,
				});
				// if(!that.isIOS){
					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, window.screen.height );
                container.appendChild( renderer.domElement );
				

				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
                
				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;//启用摄像机的缩放
				
				stats = new Stats();
				container.appendChild(stats.dom);
				stats.domElement.style.top = '100px';
				// 监听
                window.addEventListener( 'resize', onWindowResize );
                // raycaster = new THREE.Raycaster();
				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
				renderer.domElement.addEventListener('touchend', onPointerUp, false);
				render();//重启渲染
				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 tweenCameraAnmaChange (value) {
				tweenCameraAnma = value
			}
			//取消事件监听-避免二次进入时触发多次事件
			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 object = chooseMesh;//当前选中的空间模型
				// let spaceObj = object.userData;//获取空间模型的相关数据
				
				let spaceObj = chooseMesh;//获取空间模型的相关数据
				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,600);
				setTimeout(()=>{
					that.showLables = true;
					updateLables();
					controls.enable = true;//控制器响应用户的操作
				},601);//动画结束后回复原始状态
			}
			
			// 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;
				}
				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 onWindowResize() {
                camera.aspect = window.screen.width / window.screen.height;
                camera.updateProjectionMatrix();
                renderer.setSize( window.screen.width, window.screen.height );
            }
			//计算漫游时当前选中空间的观察点和摄像机的放置点位
			//distance 表示要沿着视角移动的距离
			function updateLables(){
				if(!that.showLables){
					return false;
				}
				that.lableItem.forEach(lable =>{
					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) * window.screen.height;
					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
				})
			}
            function render() {
                TWEEN && TWEEN.update();
                stats.update();
				//不处在动画过程中，则可以处理移动等动作
				if(tweenCameraAnma==false){
					controls.update();
				}
				renderer.render(scene, camera);//单次渲染
				requestId = requestAnimationFrame(render, canvas3d);
            }
		},

		methods: {
			clearHandle(){
				this.clearEvent();
			},
			//楼层切换
			floorChange(item){
				if(this.floorId==item.layoutId){
					return false;
				}
				this.floorId = item.layoutId;
				
				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
				let deleList = this.scene.children.filter(object=>{
					if(object.userType=="mesh" || object.userType=="layoutMesh"){
						return object
					}
				})
				// console.warn("***deleList***",deleList)
				if(deleList && deleList.length>0){
					this.showLables = false;//隐藏lable
					this.scene.remove(...deleList);
				}
				this.gltfWalls = [];
				this.gltfSpaces = [];
				this.instancedMeshList = [];
				this.instancedSpaceMeshList = [];
				this.lableItem = [];
				this.gltfLayouts = [];
				this.instancedFurList = [];
				this.wallList = [];
				//恢复初始视角
				this.cameraInit();
				this.resetControl();
				setTimeout(()=>{
					this.loadSpace();
				}, 100);
				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
			},
			async getIdData(){
				let userId = this.userId || '';
			    let params = {
			        id: this.id,
			        brandId: $config.brandId,
					houseId:this.houseId,
					userId,
			    };
			    const res = await requestConfig('getCustomizedRecord', params);
			    if (res.success ) {
			        let single = res.list[0];
					this.layoutStruct = JSON.parse(JSON.stringify(single));
					this.setHouseDetail(this.layoutStruct)
			    }
			},
			/**
			 * 设置户型详情信息
			 * @param {Object} data 户型详情
			 */
			setHouseDetail(data){
				if(data && data.layoutStruct){
					let curData = data;
					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
					// this.spaceId = this.curHouseObj.spaceId;
					console.warn("***curHouseObj***",this.curHouseObj)
					this.floorList = [];
					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
						this.floorList.push({
							houseFloor:item.floor,
							layoutId:item.layoutId,
						});
					})
					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
					this.curData = curData;
					console.warn("***floorList-init***",this.floorList,select)
					// 加载户型
					this.loadSpace();
				}else{
					this.curHouseObj = {}
				}
			},
			// 添加文字标签
			addWordLabel(){
				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
					return false;
				}
				// 方案二
				this.lableItem = [];
				this.gltfSpaces.forEach((cube,index) =>{
					// 给地板加上空间类型标注, 空间为链接空间的不显示
					if(cube.spaceName && !cube.isSizeLock){
						this.lableItem.push(
							{
								text:cube.spaceName,
								spaceId:cube.spaceId,
								transform:'',
								cubeIndex:index,
							}
						)
					}
				})
				this.showLables = true;
				this.updateLables();//更新lable
			}, 
			//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 = [];
				if(!this.curHouseObj){//减少重复请求
					console.warn("***数据错误***")
					return false
				}
                if(this.curHouseObj){
                    const spaceDetail = this.curHouseObj;
                    const spaceList = 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;
						// 计算观察点向量（相对中心点）
						let _actorLoaction = element.actorLocation.split(',');//x y z
						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
						element.presentY = _presentY;
						element.wallMoveValue = "[0,0,0,0]"
                        this.spaceList.push(element);
                        this.wallIds.push(element.wallId);
						if(element.wallList){
							this.wallList.push(JSON.parse(element.wallList));
						}
						if(element.isSelected){ // 默认选中空间
						    this.curSpaceObj = element;
						}
                    }
					if(!this.curSpaceObj && this.spaceList.length > 0){
					    this.curSpaceObj = this.spaceList[0];
					}
                }
                console.log("该户型空间数据:", this.spaceList);
				console.log("当前选中的空间:", 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 wallList = [];
				if(this.wallList && this.wallList.length>0){
					wallList = this.wallList;
				}else{
					let data = {id:this.wallIds}
					const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
					console.log("墙体数据:", res.list)
					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})
                        }
                    }
                }
                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.$nextTick(()=>{
						this.moveMeshCenter(this.curSpaceObj);
						this.progress = 100;
						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
						this.$nextTick(()=>{
							this.myLoadingStatus = false;
							// this.$refs.myLoading.hideLoading();
							setTimeout(()=>{
								this.addWordLabel(); // 添加文字标签
							}, 610);
						})
					})
				})
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import "./webgl_rxdz_look.scss";
</style>