日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

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

發布時間：2023-12-08 21:40:32 作者：網友整理

昨天，很多群里都在瘋傳一個視頻，視頻演示了純前端實現的“量子糾纏”效果，不少前端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

分享到：
標簽：源碼
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定