Дисплейсмент за мышкой

pixi.js (500кб), Tweenlite.js Какой-то баг с дублированием

by vovkasolovev

HTML

<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
<div id="pica2"><canvas></canvas></div>

CSS

body { margin: 0; }
canvas {
	height: 100vh;
	width: 100vw;
	display: block;
}

JavaScript

let app_pica2;
function add3dImgFor_pica2(i, t) {
	var e = document.getElementById("pica2");
	if (!app_pica2) {
		app_pica2 = new PIXI.Application({
			width: e.clientWidth,
			height: e.clientHeight
		});
		e.appendChild(app_pica2.view)
	}
	if (document.loaderBusy) {
		setTimeout(()=>{
			add3dImgFor_pica2(i, t)
		}
		, 400)
	} else {
		document.loaderBusy = true;
		PIXI.Loader.shared.add("img_pica2", i).add("dimg_pica2", t).load(function(i, t) {
			document.loaderBusy = false;
			onAssetsLoadedFor_pica2(t)
		})
	}
}
function onAssetsLoadedFor_pica2(i) {
	var n = document.getElementById("pica2");
	var e = document.getElementsByTagName("canvas");
	var t;
	for (t = 0; t < e.length; t++) {
		e[t].height = window.innerHeight;
		e[t].width = window.innerWidth
	}
	let h = n.clientWidth / n.clientHeight;
	let d = new PIXI.Sprite.from(i["img_pica2"].texture);
	d.name = "img";
	d.anchor.x = .5;
	d.anchor.y = .5;
	d.position.x = n.clientWidth / 2;
	d.position.y = n.clientHeight / 2;
	let a = d.width / d.height;
	console.log("imgRatio", a);
	if (a > h) {
		d.height = n.clientHeight;
		d.width = d.height * a
	} else {
		d.width = n.clientWidth;
		d.height = d.width * (1 / a)
	}
	app_pica2.stage.addChild(d);
	let o = new PIXI.Sprite.from(i["dimg_pica2"].texture);
	o.name = "dimg";
	o.anchor.x = .5;
	o.anchor.y = .5;
	o.position.x = n.clientWidth / 2;
	o.position.y = n.clientHeight / 2;
	if (a > h) {
		o.height = n.clientHeight;
		o.width = o.height * a
	} else {
		o.width = n.clientWidth;
		o.height = o.width * (1 / a)
	}
	app_pica2.stage.addChild(o);
	let c = new PIXI.filters.DisplacementFilter(o);
	app_pica2.stage.filters = [c];
	document.addEventListener("mousemove", function(i) {
		TweenLite.to(c.scale, .7, {
			x: (n.clientWidth / 2 - i.clientX) / 18,
			y: (n.clientHeight / 2 - i.clientY) / 18
		})
	});
	window.addEventListener("deviceorientation", function(i) {
		var t = i.gamma;
		t = t < -15 ? -15 : t;
		t = t > 15 ? 15 : t;
		t += 15;
		sideRatio = n.clientWidth /...