尝试优化

src/components/newBottomCom/viewCareful/viewCareful.scss

@@ -12,14 +12,14 @@
 }
 .careful-list{
 	width: 100%;
-	max-height:600px;
-	margin-top:30px;
+	max-height:584px;
 }
 .item-top{
 	width: 100%;
 }
 .scroll-view{
 	overflow-y: auto;
+	margin-top:30px;
 }
 .careful-item .item-top {
 	font-family: "Verdana Bold";

src/mixins/commonPageMethod.js

@@ -11,6 +11,9 @@ export default {
 			window.removeEventListener('beforeunload', this.pvCloseHandle);
 			window.removeEventListener('visibilitychange', this.visibilitychange);
 			window.currentPage = this;
+			if(this.starRender && typeof(this.starRender)==='function'){
+				this.starRender()
+			}
 			let param = {
 				type: 'PV',
 				pvId: this.pvId,
@@ -48,6 +51,9 @@ export default {
 		// 在离开当前路由前执行的方法
 		// 例如保存表单数据、清理定时器等操作
 		this.pvCloseHandle();
+		if(this.stopRender && typeof(this.stopRender)==='function'){
+			this.stopRender();//停止webgl的渲染
+		}
 		window.removeEventListener('beforeunload', this.pvCloseHandle);//注销监听刷新事件
 		window.removeEventListener('visibilitychange', this.visibilitychange);
 		next();
@@ -62,6 +68,9 @@ export default {
 			window.removeEventListener('beforeunload', this.pvCloseHandle);
 			window.removeEventListener('visibilitychange', this.visibilitychange);
 			window.currentPage = this;
+			if(this.starRender && typeof(this.starRender)==='function'){
+				this.starRender()
+			}
 			let param = {
 				type: 'PV',
 				pvId: this.pvId,
@@ -77,9 +86,12 @@ export default {
 		visibilitychange(){
 			console.warn("visibilitychange");
 			if (document.visibilityState !== 'visible') { // 离开页面
-			   this.pvCloseHandle()
+				if(this.stopRender && typeof(this.stopRender)==='function'){
+					this.stopRender();//停止webgl的渲染
+				}
+				this.pvCloseHandle()
 			} else { // 进入页面
-			   this.pvShowHandle()
+				this.pvShowHandle()
 			}
 		},
 		pvShowHandle(){

src/mixins/floorMethod.js

@@ -38,7 +38,7 @@ export default {
 		loaderCommonSpace(gltfSpaceUrl,list,type=1){
 			var that = this;
 			this.loader.load(gltfSpaceUrl,  ( gltf ) => {
-				console.log("地板模型加载成功",list)
+				console.log("地板模型加载成功")
 				// gltf.scene.receiveShadow = true;//材质是否接收阴影
 				gltf.scene.traverse((child)=> {
 					if (child.isMesh && child.visible) {
@@ -132,9 +132,9 @@ export default {
 			let glbWidth = 300;
 			let glbHeight = 300;
 			var that = this;
-			console.log("草地模型加载成功",list)
+			console.log("草地模型加载成功")
 			//将模型添加到场景中
-			let texture = new THREE.TextureLoader().load( "https://dm.static.elab-plus.com/miniProgram/grass.jpg");
+			let texture = new THREE.TextureLoader().load("https://dm.static.elab-plus.com/miniProgram/grass.jpg");
 			// let texture = new THREE.TextureLoader().load( "https://dm.static.elab-plus.com/miniProgram/Avatar_male.png" );
 			texture.wrapS = THREE.RepeatWrapping;
 			texture.wrapT = THREE.RepeatWrapping;
@@ -183,49 +183,6 @@ export default {
 				that.scene.add(cube);
 			})
 		},
-		//修改当前空间的面积大小
-		changeSpacesAnimOld(curSpace){
-			// 寻找地板
-			const cube = this.gltfSpaces.find((item)=>{
-			    return item.spaceId == curSpace.spaceId;
-			})
-			console.log("空间移动目标",cube.spaceId, JSON.stringify(cube.position),JSON.stringify(cube.scale),curSpace.toScaleX, curSpace.toScaleZ, curSpace.toPx, curSpace.toPz);
-			//获取地板模型的geometry实例
-			cube.instancedMeshIndexList.forEach(instanced=>{
-				let _index = instanced.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
-				let instancedMesh = this.instancedSpaceMeshList[_index];//获取具体的网格实例
-				let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
-				instancedMesh.getMatrixAt(instanced.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
-				
-				let endMatrix = stratMatrix.clone();//复制一个四维矩阵 
-				let scaleMatrix = new THREE.Matrix4();//定义一个缩放变化矩阵
-				let panMatrix = new THREE.Matrix4();//定义一个平移变化矩阵
-				
-				scaleMatrix.makeScale(curSpace.toScaleX / cube.scale.x,1,curSpace.toScaleZ / cube.scale.z);		//获得缩放变化矩阵
-				panMatrix.makeTranslation(curSpace.toPx - cube.position.x,0,curSpace.toPz - cube.position.z);	//获得平移变化矩阵
-				endMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的矩阵
-				// console.warn("***drawModel-isAnimate-space***",JSON.stringify(endMatrix1),JSON.stringify(endMatrix),JSON.stringify(stratMatrix));
-				var tween = new TWEEN.Tween(stratMatrix.elements)
-				.to(endMatrix.elements, 2000)
-				.easing(TWEEN.Easing.Quadratic.InOut)
-				.onUpdate((matrixWorld)=> {
-					let m4 = new THREE.Matrix4();//定义一个四维矩阵
-					m4.set(...matrixWorld);//注意：四维矩阵的显示和实际计算的行列优先规则不同
-					instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
-					instancedMesh.setMatrixAt(instanced.instancedAtIndex,m4.transpose());//更新几何体的世界矩阵
-				}).onComplete(()=>{
-					instancedMesh.setMatrixAt(instanced.instancedAtIndex,endMatrix);//更新几何体的世界矩阵
-					this.tweenCameraAnmaChange(false)
-				});
-				// 开始动画
-				tween.start();
-				this.tweenCameraAnmaChange(true)
-				cube.position.x = curSpace.toPx;
-				cube.position.z = curSpace.toPz;
-				cube.scale.x = curSpace.toScaleX;
-				cube.scale.z = curSpace.toScaleZ;
-			});
-		},
 		//修改当前空间的面积大小-动画方案2
 		changeSpacesAnim(curSpace){
 			// 寻找地板
@@ -347,15 +304,10 @@ export default {
 			if(cubeRoof){
 				let roofScaleX =  curSpace.spaceObj.spaceWidth / cubeRoof.userData.spaceWidth
 				let roofScaleY =  curSpace.spaceObj.spaceHeight / cubeRoof.userData.spaceHeight
-				console.log("屋顶尺寸变化", curSpace.spaceObj, cubeRoof, roofScaleX, roofScaleY)
-				// cubeRoof.scale.x = toScaleX / scaleX;
-				// cubeRoof.scale.z = 0.5;
-				// cubeRoof.position.x = toPx;
-				// cubeRoof.position.z = toPz;
+				// console.log("屋顶尺寸变化", curSpace.spaceObj, cubeRoof, roofScaleX, roofScaleY)
 				cubeRoof.scale.set(roofScaleX,roofScaleY,1);//缩小为原来0.5倍
 				cubeRoof.position.x = toPx;
 				cubeRoof.position.z = toPz;
-				// cubeRoof.position.set(toPx - x, 0, 1);
 			}
 		},
 		//所有空间整体缩放-同时同步到数据里面

src/mixins/loadModel.js

@@ -201,6 +201,9 @@ export default {
 			}else{
 				this.calculateLayoutModelSize() // 提前计算模型的位置
 			}
+			tmpList = [];
+			this.realList = [];
+			this.tmpList = []
 			console.log("***realFurArr***", realFurArr,this.gltfLayouts);
 			realFurArr && realFurArr.forEach((item,index) => {
 				this.loadLayFlag = true;
@@ -213,6 +216,7 @@ export default {
 			Promise.all(this.promise_list).then(() => {
 				let endTime = new Date().getTime();
 				this.loadLayFlag = false;
+				realFurArr = [];
 				console.log("家具模型全部加载完成，时间：", endTime - startTime, this.gltfLayouts);
 				this.loadLastSpaceModel();//加载剩余空间的家具模型
 			})

src/mixins/wallMethod.js

@@ -15,142 +15,6 @@ export default {
 	},
 	watch: {},
 	methods: {
-			// 加载所有墙体模型
-			// modelItem 变化后的
-			// wallObj 变化前的
-			drawModelOld(modelItem, spaceObj, wallObj, isAnimate=false){
-			    let cube = wallObj.obj;
-			    let that = this;
-				
-			    // console.log("模型参数", wallPositionX, wallPositionY, wallScaleX, wallScaleY, lastWallPosition, wallDirection)
-	
-				console.log("墙体动画", modelItem, spaceObj, wallObj, isAnimate,spaceObj.rightCenter);
-				if(!wallObj.obj){//新的逻辑
-					//无变化则不需要启动动画
-					if(modelItem.wallPositionX == wallObj.wallPositionX 
-					&& modelItem.wallPositionY == wallObj.wallPositionY
-					&& modelItem.wallScaleX == wallObj.wallScaleX
-					&& modelItem.wallScaleY == wallObj.wallScaleY){
-						return false;
-					}
-					wallObj.instancedMeshIndexList.forEach(item=>{
-						let _index = item.instancedMeshIndex;
-						let instancedMesh = this.instancedMeshList[_index];//获取网格实例
-						let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
-						let endMatrix = new THREE.Matrix4();//定义一个四维矩阵
-						instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
-						let position = new THREE.Vector3();//当前几何体的位置参数
-						let position1 = new THREE.Vector3();//计算后的位移参数
-						let scale = new THREE.Vector3();//当前几何体的位置参数
-						let scale1 = new THREE.Vector3();//计算后的形变参数
-						let quaternion = new THREE.Quaternion();//四元数
-						stratMatrix.decompose(position,quaternion,scale);//从当前几何体提取相关参数
-						// 计算变化后的位置：位移后的位置 是 当前几何体的位置参数 加上 模型移动后的位置偏移量
-						let x = position.x + modelItem.wallPositionX - wallObj.wallPositionX;
-						let z = position.z + modelItem.wallPositionY - wallObj.wallPositionY;
-						// 计算变化后的缩放：缩放后的值 是 当前几何体的缩放比例 同步 模型缩放后缩放比例
-						let scalex = scale.x * (modelItem.wallScaleX/ wallObj.wallScaleX);
-						let scaley = scale.z * (modelItem.wallScaleY/ wallObj.wallScaleY);
-						//x轴放大，则需要移动多一倍的距离
-						if(modelItem.wallScaleX!=wallObj.wallScaleX){
-							if(modelItem.wallRotateY>0){//说明旋转了
-								let _ch = modelItem.wallPositionY - wallObj.wallPositionY;
-								if(spaceObj.rightCenter){//即形变几何体是右侧不变，由于中心点在左侧，所以要再加一倍变化的值
-									z = z + _ch;
-								}else{//形变几何体是左侧不变，由于中心点在左侧，所以要减去变化的值
-									z = z - _ch;
-								}
-								// z = z + modelItem.wallPositionY - wallObj.wallPositionY
-							}else{
-								let _ch = modelItem.wallPositionX - wallObj.wallPositionX;
-								if(spaceObj.rightCenter){
-									x = x + _ch;
-								}else{
-									x = x - _ch;
-								}
-							}
-						}
-						//Y轴缩小(这里理解是Z轴，映射原因)，则需要移动多一倍的距离 
-						//因为几何体的操作原点是左边中心点，不是几何中心点 所以计算的时候需要在多移动一倍
-						if(modelItem.wallScaleY!=wallObj.wallScaleY){
-							if(modelItem.wallRotateY>0){//说明旋转了
-								let _ch = modelItem.wallPositionX - wallObj.wallPositionX;
-								if(spaceObj.rightCenter){
-									x = x + _ch;
-								}else{
-									x = x - _ch;
-								}
-								// x = x + modelItem.wallPositionX - wallObj.wallPositionX;
-							}else{
-								let _ch = modelItem.wallPositionY - wallObj.wallPositionY;
-								if(spaceObj.rightCenter){
-									z = z + _ch;
-								}else{
-									z = z - _ch;
-								}
-								// z = z + modelItem.wallPositionY - wallObj.wallPositionY
-							}
-						}
-						position1.set(x, position.y, z);
-						scale1.set(scalex,scale.y,scaley);
-						//获取最终的几何体四维变化矩阵
-						endMatrix = endMatrix.compose(position1,quaternion,scale1);
-						// console.warn("***drawModel-isAnimate0***",JSON.stringify(position),JSON.stringify(scale),wallObj.name,modelItem,wallObj);
-						// console.warn(JSON.stringify(stratMatrix.elements),JSON.stringify(endMatrix.elements));
-						// instancedMesh.instanceMatrix.needsUpdate = true;
-						// instancedMesh.setMatrixAt(item.instancedAtIndex,endMatrix);//更新几何体的世界矩阵
-						var tween = new TWEEN.Tween(stratMatrix.elements)
-						.to(endMatrix.elements, 2000)
-						.easing(TWEEN.Easing.Quadratic.InOut)
-						.onUpdate((matrixWorld)=> {
-							let m4 = new THREE.Matrix4();//定义一个四维矩阵
-							m4.set(...matrixWorld);//注意：四维矩阵的显示和实际计算的行列优先规则不同
-							instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
-							instancedMesh.setMatrixAt(item.instancedAtIndex,m4.transpose());//更新几何体的世界矩阵
-						}).onComplete(()=>{
-							instancedMesh.setMatrixAt(item.instancedAtIndex,endMatrix);//更新几何体的世界矩阵
-							this.tweenCameraAnmaChange(false)
-						});
-						// 开始动画
-						tween.start();
-						this.tweenCameraAnmaChange(true)
-					})
-					//更新模型的最新位置，确保计算结果正确
-					setTimeout(()=>{
-						let gltfWall = that.gltfWalls.find(gltfWall=>gltfWall.uniId==wallObj.uniId);//判断是否已经添加过
-						gltfWall.wallPositionX = modelItem.wallPositionX;
-						gltfWall.wallPositionY = modelItem.wallPositionY;
-						gltfWall.wallScaleX = modelItem.wallScaleX;
-						gltfWall.wallScaleY = modelItem.wallScaleY;
-						gltfWall.wallRotateY = modelItem.wallRotateY;
-					}, 2000);
-				}else{
-					console.warn("***drawModel-isAnimate-2***",JSON.stringify(cube.position),JSON.stringify(cube.scale),modelItem);
-					var tween = new TWEEN.Tween({
-						x: cube.position.x,
-						z: cube.position.z,
-						sx:cube.scale.x,
-						sz:cube.scale.z
-					})
-					.to({
-						x: modelItem.wallPositionX,
-						z: modelItem.wallPositionY,
-						sx:modelItem.wallScaleX
-					}, 2000)
-					.easing(TWEEN.Easing.Quadratic.InOut)
-					.onUpdate((object)=> {
-						cube.position.x = object.x;
-						cube.position.z = object.z;
-						cube.scale.x = object.sx;
-						cube.scale.z = object.sz;
-					}).onComplete(()=>{
-						this.tweenCameraAnmaChange(false)
-					});
-					// 开始动画
-					tween.start();
-					this.tweenCameraAnmaChange(true)
-				}
-			},
 			// modelItem 变化后的
 			// wallObj 变化前的-一面墙下的某一段墙体
 			drawModel(modelItem, spaceObj, wallObj, isAnimate=false){

src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -133,20 +133,43 @@
 			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;
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if (object instanceof THREE.Mesh) {
+						return object
+					}
+				})
+				if(deleList && deleList.length>0){
+					this.scene.remove(...deleList);
+				}
+				this.scene.traverse(function(object) {
+					if (object instanceof THREE.Mesh) {
+						if(object.geometry && typeof(object.geometry.dispose)=='function'){
+							object.geometry.dispose();
+						}
+						if(object.material && typeof(object.material.dispose)=='function'){
+							object.material.dispose();
+						}
+						if(object.texture && typeof(object.texture.dispose)=='function'){
+							object.texture.dispose();
+						}
+					}
+				});
+				this.renderer.clear();
+				this.renderer.dispose();
+				this.renderer.forceContextLoss();
+				this.renderer.context = null;
+				this.renderer.domElement = null;
+				this.renderer = null;;
 				this.clearEvent()
 			}
 			this.gltfWalls = [];
 			this.gltfSpaces = [];
 			this.gltfSpaceRoofs = [];
+			this.gltfLayouts = [];
 			this.instancedMeshList = [];
 			this.instancedSpaceMeshList = [];
 			this.lableItem = [];
-			this.gltfLayouts = [];
 			this.instancedFurList = [];
 			this.wallList = [];
 			TWEEN && TWEEN.removeAll();//清除所有的tween;
@@ -197,6 +220,7 @@
 			this.gradientResize = gradientResize;
 			this.moveMeshCenterHandle = moveMeshCenterHandle;
 			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.stopRender = stopRender;//对外暴露停止渲染的方法
 			this.cameraInit = cameraInit;
 			this.resetControl = resetControl;
 			function init() {

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -91,19 +91,34 @@
 			this.worker && this.worker.terminate()
 			setTimeout(() => {
 				if (this.renderer instanceof THREE.WebGLRenderer) {
-					// 清空场景中所有对象的资源
+					// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+					let deleList = this.scene.children.filter(object=>{
+						if (object instanceof THREE.Mesh) {
+							return object
+						}
+					})
+					if(deleList && deleList.length>0){
+						this.scene.remove(...deleList);
+					}
 					this.scene.traverse(function(object) {
 						if (object instanceof THREE.Mesh) {
-							object.geometry && object.geometry.dispose();
-							object.material && object.material.dispose();
-							object.texture && object.texture.dispose();
+							if(object.geometry && typeof(object.geometry.dispose)=='function'){
+								object.geometry.dispose();
+							}
+							if(object.material && typeof(object.material.dispose)=='function'){
+								object.material.dispose();
+							}
+							if(object.texture && typeof(object.texture.dispose)=='function'){
+								object.texture.dispose();
+							}
 						}
 					});
-					this.renderer.dispose()
-					this.renderer.forceContextLoss()
-					this.renderer.context = null
-					this.renderer.domElement = null
-					this.renderer = null;
+					this.renderer.clear();
+					this.renderer.dispose();
+					this.renderer.forceContextLoss();
+					this.renderer.context = null;
+					this.renderer.domElement = null;
+					this.renderer = null;;
 					this.clearHandle()
 				}
 			}, 0)

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -99,19 +99,34 @@
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
 			if (this.renderer instanceof THREE.WebGLRenderer) {
-				// 清空场景中所有对象的资源
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if (object instanceof THREE.Mesh) {
+						return object
+					}
+				})
+				if(deleList && deleList.length>0){
+					this.scene.remove(...deleList);
+				}
 				this.scene.traverse(function(object) {
 					if (object instanceof THREE.Mesh) {
-						object.geometry && object.geometry.dispose();
-						object.material && object.material.dispose();
-						object.texture && object.texture.dispose();
+						if(object.geometry && typeof(object.geometry.dispose)=='function'){
+							object.geometry.dispose();
+						}
+						if(object.material && typeof(object.material.dispose)=='function'){
+							object.material.dispose();
+						}
+						if(object.texture && typeof(object.texture.dispose)=='function'){
+							object.texture.dispose();
+						}
 					}
 				});
-				this.renderer.dispose()
-				this.renderer.forceContextLoss()
-				this.renderer.context = null
-				this.renderer.domElement = null
-				this.renderer = null;
+				this.renderer.clear();
+				this.renderer.dispose();
+				this.renderer.forceContextLoss();
+				this.renderer.context = null;
+				this.renderer.domElement = null;
+				this.renderer = null;;
 				this.clearHandle()
 			}
 			TWEEN && TWEEN.removeAll();//清除所有的tween;
@@ -165,6 +180,7 @@
 			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
 			this.switchActor = switchActor;
 			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.stopRender = stopRender;//对外暴露停止渲染的方法
 			this.positionCamer = positionCamer;
 			if(this.curHouseObj && this.curHouseObj.id){
 				this.setHouseDetail(this.curHouseObj);
@@ -721,36 +737,12 @@
 				}
                 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;//清空内存中的数据
-					// 		}
-					// 	}
-					// }
+					stopRender();
+					that.screenshotResolve()
+					that.screenshotResolve = null;//释放Promise
 				}
             }