全網瘋傳的前端量子糾纏效果，源碼來了！

作者：CUGGZ 2023-11-24 08:03:32

作者使用 window.screenLeft、window.screenTop、window.innerWidth和 window.innerHeight 這些屬性來計算立方體的位置和大小信息，通過 localstorage 來在不同窗口之間共享不同的位置信息。

昨天，很多群里都在瘋傳一個視頻，視頻演示了純前端實現的“量子糾纏”效果，不少前端er表示：“前端白學了”。

圖片

視頻作者昨晚開源一個簡化版的實現源碼（截止發文，該項目在 Github 上已獲得超過 1k Star），本文就來看看他是怎么實現的！

簡化版

根據作者的描述，該項目是使用 three.js 和 localStorage 實現的在同一源上設置跨窗口的 3D 場景。

圖片

雖然沒有原視頻那么炫酷，但基本原理應該差不多。

源碼包含多個文件，最主要的文件如下：

index.html
main.js：主文件
WindowManager.js：窗口管理

在線體驗：https://bgstaal.github.io/multipleWindow3dScene/

源碼

index.html 文件中引入了 three.js 的壓縮包，以及main.js：

<!DOCTYPE html>
<html lang="en">
  <head>
  	<title>3d example using three.js and multiple windows</title>
  	<script type="text/javascript" src="./three.r124.min.js"></script>
  	<style type="text/css">
  		
  		*
  		{
  			margin: 0;
  			padding: 0;
  		}
  
  	</style>
  </head>
  <body>
  	
  	<script type="module" src="./main.js"></script>
  </body>
</html>

這沒啥可說的，下面就來看看 main.js 中都寫了點啥。代碼如下：

import WindowManager from './WindowManager.js'

const t = THREE;
let camera, scene, renderer, world;
let near, far;
let pixR = window.devicePixelRatio ? window.devicePixelRatio : 1;
let cubes = [];
let sceneOffsetTarget = {x: 0, y: 0};
let sceneOffset = {x: 0, y: 0};

let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();

let internalTime = getTime();
let windowManager;
let initialized = false;

// // 獲取從一天開始以來的秒數（以便所有窗口使用相同的時間）
function getTime () {
	return (new Date().getTime() - today) / 1000.0;
}

if (new URLSearchParams(window.location.search).get("clear")) {
	localStorage.clear();
}
else {	
	// 在某些瀏覽器中避免在實際點擊URL之前預加載頁面內容
	document.addEventListener("visibilitychange", () => {
		if (document.visibilityState != 'hidden' && !initialized) {
			init();
		}
	});
  // 確保在窗口完全加載后，只有在頁面可見時才執行初始化邏輯
	window.onload = () => {
		if (document.visibilityState != 'hidden') {
			init();
		}
	};

  // 初始化操作
	function init () {
		initialized = true;

		// 短時間內window.offsetX屬性返回的值可能不準確，需要添加一個短暫的延遲，等待一段時間后再執行相關操作。
		setTimeout(() => {
			setupScene();
			setupWindowManager();
			resize();
			updateWindowShape(false);
			render();
			window.addEventListener('resize', resize);
		}, 500)	
	}

  // 設置場景相關的配置
	function setupScene () {
		camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000);
		
		camera.position.z = 2.5;
		near = camera.position.z - .5;
		far = camera.position.z + 0.5;

		scene = new t.Scene();
		scene.background = new t.Color(0.0);
		scene.add( camera );

		renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true});
		renderer.setPixelRatio(pixR);
	    
	  	world = new t.Object3D();
		scene.add(world);

		renderer.domElement.setAttribute("id", "scene");
		document.body.appendChild( renderer.domElement );
	}

  // 設置窗口管理器的相關配置
	function setupWindowManager () {
		windowManager = new WindowManager();
		windowManager.setWinShapeChangeCallback(updateWindowShape);
		windowManager.setWinChangeCallback(windowsUpdated);

		let metaData = {foo: "bar"};

		// 初始化窗口管理器(windowmanager)并將當前窗口添加到窗口池中。
		windowManager.init(metaData);

		windowsUpdated();
	}

	function windowsUpdated () {
		updateNumberOfCubes();
	}

	function updateNumberOfCubes () {
		let wins = windowManager.getWindows();

		cubes.forEach((c) => {
			world.remove(c);
		})

		cubes = [];

		for (let i = 0; i < wins.length; i++) {
			let win = wins[i];

			let c = new t.Color();
			c.setHSL(i * .1, 1.0, .5);

			let s = 100 + i * 50;
			let cube = new t.Mesh(new t.BoxGeometry(s, s, s), new t.MeshBasicMaterial({color: c , wireframe: true}));
			cube.position.x = win.shape.x + (win.shape.w * .5);
			cube.position.y = win.shape.y + (win.shape.h * .5);

			world.add(cube);
			cubes.push(cube);
		}
	}

	function updateWindowShape (easing = true) {
		sceneOffsetTarget = {x: -window.screenX, y: -window.screenY};
		if (!easing) sceneOffset = sceneOffsetTarget;
	}


	function render () {
		let t = getTime();

		windowManager.update();

		// 根據當前位置和新位置之間的偏移量以及一個平滑系數來計算出窗口的新位置
		let falloff = .05;
		sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff);
		sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff);

		world.position.x = sceneOffset.x;
		world.position.y = sceneOffset.y;

		let wins = windowManager.getWindows();


		// 遍歷立方體對象，并根據當前窗口位置的變化更新它們的位置。
		for (let i = 0; i < cubes.length; i++) {
			let cube = cubes[i];
			let win = wins[i];
			let _t = t;// + i * .2;

			let posTarget = {x: win.shape.x + (win.shape.w * .5), y: win.shape.y + (win.shape.h * .5)}

			cube.position.x = cube.position.x + (posTarget.x - cube.position.x) * falloff;
			cube.position.y = cube.position.y + (posTarget.y - cube.position.y) * falloff;
			cube.rotation.x = _t * .5;
			cube.rotation.y = _t * .3;
		};

		renderer.render(scene, camera);
		requestAnimationFrame(render);
	}


	// 調整渲染器大小以適合窗口大小
	function resize () {
		let width = window.innerWidth;
		let height = window.innerHeight
		
		camera = new t.OrthographicCamera(0, width, 0, height, -10000, 10000);
		camera.updateProjectionMatrix();
		renderer.setSize( width, height );
	}
}

這段代碼主要實現以下幾點：

初始化場景和渲染器：在 setupScene 函數中，設置了一個正交相機、場景和渲染器，并將渲染器的 DOM 元素添加到頁面中。
初始化窗口管理器：在 setupWindowManager 函數中，創建了一個窗口管理器實例，并初始化了窗口并添加到窗口池中。
更新立方體數量和位置：通過 updateNumberOfCubes 函數，根據窗口管理器中窗口的數量和位置信息，動態創建立方體并根據窗口位置更新其在場景中的位置。
渲染循環：在 render 函數中，使用 requestAnimationFrame 不斷循環渲染場景，并根據窗口管理器中窗口的位置更新立方體的位置和旋轉。
響應窗口大小變化：通過 resize 函數，在窗口大小變化時重新設置相機的寬高比和渲染器的大小，以適應新的窗口尺寸。

接下來看看最核心的實現：WindowManager，代碼如下：

class WindowManager {
	#windows;
	#count;
	#id;
	#winData;
	#winShapeChangeCallback;
	#winChangeCallback;
	
	constructor () {
		let that = this;

		// 監聽 localStorage 是否被其他窗口更改
		addEventListener("storage", (event) => {
			if (event.key == "windows") {
				let newWindows = JSON.parse(event.newValue);
				let winChange = that.#didWindowsChange(that.#windows, newWindows);

				that.#windows = newWindows;

				if (winChange) {
					if (that.#winChangeCallback) that.#winChangeCallback();
				}
			}
		});

		// 監聽當前窗口是否即將關閉
		window.addEventListener('beforeunload', function (e) {
			let index = that.getWindowIndexFromId(that.#id);

			// 從窗口列表中移除當前窗口并更新 localStorage
			that.#windows.splice(index, 1);
			that.updateWindowsLocalStorage();
		});
	}

	// 檢查窗口列表是否有變化
	#didWindowsChange (pWins, nWins) {
		if (pWins.length != nWins.length) {
			return true;
		}
		else {
			let c = false;

			for (let i = 0; i < pWins.length; i++) {
				if (pWins[i].id != nWins[i].id) c = true;
			}

			return c;
		}
	}

	// 初始化當前窗口（添加元數據以將自定義數據存儲在每個窗口實例中）
	init (metaData) {
		this.#windows = JSON.parse(localStorage.getItem("windows")) || [];
		this.#count= localStorage.getItem("count") || 0;
		this.#count++;

		this.#id = this.#count;
		let shape = this.getWinShape();
		this.#winData = {id: this.#id, shape: shape, metaData: metaData};
		this.#windows.push(this.#winData);

		localStorage.setItem("count", this.#count);
		this.updateWindowsLocalStorage();
	}

	getWinShape () {
		let shape = {x: window.screenLeft, y: window.screenTop, w: window.innerWidth, h: window.innerHeight};
		return shape;
	}

	getWindowIndexFromId (id) {
		let index = -1;

		for (let i = 0; i < this.#windows.length; i++) {
			if (this.#windows[i].id == id) index = i;
		}

		return index;
	}

	updateWindowsLocalStorage () {
		localStorage.setItem("windows", JSON.stringify(this.#windows));
	}

	update () {
		let winShape = this.getWinShape();
    
		if (winShape.x != this.#winData.shape.x ||
			winShape.y != this.#winData.shape.y ||
			winShape.w != this.#winData.shape.w ||
			winShape.h != this.#winData.shape.h) {
			
			this.#winData.shape = winShape;

			let index = this.getWindowIndexFromId(this.#id);
			this.#windows[index].shape = winShape;

			if (this.#winShapeChangeCallback) this.#winShapeChangeCallback();
			this.updateWindowsLocalStorage();
		}
	}

	setWinShapeChangeCallback (callback) {
		this.#winShapeChangeCallback = callback;
	}

	setWinChangeCallback (callback) {
		this.#winChangeCallback = callback;
	}

	getWindows () {
		return this.#windows;
	}

	getThisWindowData () {
		return this.#winData;
	}

	getThisWindowID () {
		return this.#id;
	}
}

export default WindowManager;

這段代碼定義了一個 WindowManager 類，用于管理窗口的創建、更新和刪除等操作，并將其作為模塊導出。

該類包含以下私有屬性：

#windows: 存儲所有窗口的數組。
#count: 記錄窗口的數量。
#id: 當前窗口的唯一標識符。
#winData: 當前窗口的元數據，包括窗口的形狀、自定義數據等。
#winShapeChangeCallback: 當窗口形狀發生變化時調用的回調函數。
#winChangeCallback: 當窗口列表發生變化時調用的回調函數。

該類包含以下公共方法：

init(metaData): 初始化當前窗口，并添加到窗口列表中。
getWindows(): 獲取所有窗口的數組。
getThisWindowData(): 獲取當前窗口的元數據。
getThisWindowID(): 獲取當前窗口的標識符。
setWinShapeChangeCallback(callback): 設置窗口形狀變化時的回調函數。
setWinChangeCallback(callback): 設置窗口列表變化時的回調函數。
update(): 更新當前窗口的形狀信息，并將更新后的窗口列表存儲到本地存儲中。

可以看到，作者使用 window.screenLeft、window.screenTop、window.innerWidth和 window.innerHeight 這些屬性來計算立方體的位置和大小信息，通過 localstorage 來在不同窗口之間共享不同的位置信息。

當新增一個窗口時，就將其保存到 localstorage 中，每個窗口使用唯一的 id 進行標記，并儲存立方體的位置和大小信息。不同瀏覽器窗口都可以獲得所有的窗口信息，以確保實時更新。

圖片

當窗口的位置，即screenTop、screenLeft 發生變化時，就更新立方體。

這里就不再詳細解釋了，可以查看完整源碼：https://github.com/bgstaal/multipleWindow3dScene

責任編輯：武曉燕來源：前端充電寶

前端量子