VUE2+THREE.JS 销毁,防止越来越卡顿

THREE.JS 销毁

将场景相关的参数重置,防止页面多次打开,导致的越来越卡顿的问题

beforeDestroy() {
	this.resetScene();
},
deactivated() {
	this.resetScene();
},
//销毁场景等信息
resetScene() {
	this.isShowWebgl = false; //销毁div
	try {
		cancelAnimationFrame(animateId);
		clearInterval(this.interval3D);

		renderer.domElement.addEventListener("click", null, false); //remove listener to render
		window.addEventListener("resize", null, false);
		document.addEventListener("visibilitychange", null, false);

		// 清理动画混合器
		if (personMixer) {
			personMixer.uncacheClip(personMixer._actions[0]._clip);
			personMixer = null;
		}
		if (mixer) {
			mixer.uncacheClip(mixer._actions[0]._clip);
			mixer = null;
		}
		// 从父对象中移除模型资源
		pathToShow && pathToShow.removeFromParent();
		person && person.removeFromParent();

		//tween停止
		tween && tween.stop();
		changeAreaTween && changeAreaTween.stop();
		tweenHandlers.forEach((item) => item.stop());
		tweenHandlers = [];

		renderer.dispose();
		renderer.forceContextLoss();
		renderer.content = null;
		let gl = renderer.domElement.getContext("webgl");
		if (gl && gl.getExtension("WEBGL_lose_context")) {
			gl.getExtension("WEBGL_lose_context").loseContext();
		}
		renderer = null;
		camera = null;
		scene.traverse((child) => {
			if (child.material) {
			     // 可能存在材质为数组的情况
				if (child.material instanceof Array) {
					child.material.forEach((item) => item.dispose());
				} else {
					child.material.dispose();
					if (child.material.map) {
						child.material.map.dispose();
					}
				}
			}
			if (child.geometry) {
				child.geometry.dispose();
				child.geometry.attributes = null; // 这些属性包括position, normal, uv等等
			}
			child = null;
		});
		scene = new THREE.Scene();
	} catch (e) {
		console.error("Failed to destroy threejs", e);
	}

	controls = null; //控制器
	effectComposer = null; //场景渲染器
	unrealBloomPass = null; // 辉光效果
	glowComposer = null; //辉光效果器
	pathCurve = null; // 路径曲线
	// pathToShow = null; //路径网格模型
	pathPoints = null; // 路径上的点
	//漫游路径参数
	renderFunc = {}; // 漫游的方法
	animateId = null;
	//线体信息label参数
	labelRender = null;
	isAnimating = false; // 是否开始巡航
	this.isPaused = false; // 是否开始暂停
	// person = null; // 保存人物模型的引用
	currentTween = null; // 当前播放的动画
	tweenHandlers = []; // 保存 TWEEN 动画的句柄
	savedCameraPosition = null;
	savedCameraTarget = null;
},

你可能感兴趣的:(ThreeJS,VUE,javascript,服务器,数据库)