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;
},
Vue.js 是一个流行的前端框架,而 Three.js 是一个用于创建 3D 图形的 JavaScript 库。将两者结合起来可以创建出令人惊叹的 3D 应用程序。下面是 vue+three.js 的每步解析: 1. 创建 Vue.js 应用程序 首先,需要创建一个 Vue.js 应用程序。可以使用 Vue CLI 来生成一个新的项目或手动创建一个新的 Vue.js 应用程序。 2. 安装 Three.js 可以使用 npm 包管理器安装 Three.js,也可以直接下载 Three.js 库文件并将其添加到项目中。 3.Vue 组件中引入 Three.jsVue.js 中使用 Three.js 需要将其导入到组件中。可以使用 ES6 的 import 语句来引入 Three.js。 4. 创建场景、相机和渲染器 在 Three.js 中创建 3D 场景需要场景、相机和渲染器。可以在 Vue.js 组件的 mounted 钩子函数中创建它们。 5. 创建 3D 对象 可以使用 Three.js 来创建各种类型的 3D 对象,如立方体、球体、平面等。可以在 Vue.js 组件的 mounted 钩子函数中创建它们。 6. 将 3D 对象添加到场景中 创建 3D 对象后,需要将它们添加到场景中。可以使用场景对象的 add 方法来添加它们。 7. 渲染场景 最后,在 Vue.js 组件的 mounted 钩子函数中使用渲染器对象来渲染场景。 这是一个基本的 vue+three.js 应用程序的步骤。当然,还有很多其他的细节需要注意,如处理用户交互、加载 3D 模型等。但是,掌握了这些基本步骤,就可以开始创建自己的 3D 应用程序了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值