Spaces:

AstraOS
/

multipleWindow3dScene

Running

App Files Files Community

AstraOS commited on Feb 22

Commit

8637a12

verified ·

1 Parent(s): 592e7a7

Upload 4 files

Browse files

Files changed (4) hide show

WindowManager.js +151 -0
index.html +20 -19
main.js +375 -0
three.r124.min.js +0 -0

WindowManager.js ADDED Viewed

	@@ -0,0 +1,151 @@

+class WindowManager
+{
+	#windows;
+	#count;
+	#id;
+	#winData;
+	#winShapeChangeCallback;
+	#winChangeCallback;
+	constructor ()
+	{
+		let that = this;
+		// event listener for when localStorage is changed from another window
+		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();
+				}
+			}
+		});
+		// event listener for when current window is about to ble closed
+		window.addEventListener('beforeunload', function (e)
+		{
+			let index = that.getWindowIndexFromId(that.#id);
+			//remove this window from the list and update local storage
+			that.#windows.splice(index, 1);
+			that.updateWindowsLocalStorage();
+		});
+	}
+	// check if theres any changes to the window list
+	#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;
+		}
+	}
+	// initiate current window (add metadata for custom data to store with each window instance)
+	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 ()
+	{
+		//console.log(step);
+		let winShape = this.getWinShape();
+		//console.log(winShape.x, winShape.y);
+		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;
+			//console.log(windows);
+			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;

index.html CHANGED Viewed

@@ -1,19 +1,20 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 ADDED Viewed

	@@ -0,0 +1,375 @@

+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;
+// get time in seconds since beginning of the day (so that all windows use the same time)
+function getTime ()
+{
+	return (new Date().getTime() - today) / 1000.0;
+}
+if (new URLSearchParams(window.location.search).get("clear"))
+{
+	localStorage.clear();
+}
+else
+{
+	// this code is essential to circumvent that some browsers preload the content of some pages before you actually hit the url
+	document.addEventListener("visibilitychange", () =>
+	{
+		if (document.visibilityState != 'hidden' && !initialized)
+		{
+			init();
+		}
+	});
+	window.onload = () => {
+		if (document.visibilityState != 'hidden')
+		{
+			init();
+		}
+	};
+	function init ()
+	{
+		initialized = true;
+		// add a short timeout because window.offsetX reports wrong values before a short period
+		setTimeout(() => {
+			setupScene();
+			// createParticleSystem();
+			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 );
+		var starGeometry = new THREE.Geometry();
+		for (let i = 0; i < 5000; i++) {
+			var star = new THREE.Vector3();
+			star.x = Math.random() * 5000 - 2000;
+			star.y = Math.random() * 5000 - 2000;
+			star.z = Math.random() * 5000 - 2000;
+			starGeometry.vertices.push(star);
+			var color = new THREE.Color();
+			if (Math.random() < 0.5) {
+				color.setHSL(0.16, 0.5, Math.random() * 0.5 + 0.25);
+			} else {
+				color.setHSL(0.0, 0.0, Math.random() * 0.5 + 0.5);
+			}
+			starGeometry.colors.push(color);
+		}
+		var starMaterial = new THREE.PointsMaterial({
+			size: 2,
+			vertexColors: THREE.VertexColors
+		});
+		var starField = new THREE.Points(starGeometry, starMaterial);
+		scene.add(starField);
+		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 );
+		// Lights
+		var light = new THREE.AmbientLight( 0x404040 ); // soft white light
+		scene.add( light );
+		var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+		directionalLight.position.set( 0, 128, 128 );
+		scene.add( directionalLight );
+	}
+	function setupWindowManager ()
+	{
+		windowManager = new WindowManager();
+		windowManager.setWinShapeChangeCallback(updateWindowShape);
+		windowManager.setWinChangeCallback(windowsUpdated);
+		// here you can add your custom metadata to each windows instance
+		let metaData = {foo: "bar"};
+		// this will init the windowmanager and add this window to the centralised pool of windows
+		windowManager.init(metaData);
+		// call update windows initially (it will later be called by the win change callback)
+		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;
+			if (i == 0) {
+				c = new t.Color('hsl(230, 80%, 75%)');
+			} else if (i == 1) {
+				c = new t.Color('hsl(350, 60%, 65%)');
+			} else {
+				let idBasedHueValue = (win.id % 10) / 10;
+				let hue;
+				if(idBasedHueValue < 0.5) {
+					hue = 240 - (idBasedHueValue * 2 * 60);
+				} else {
+					hue = 360 - ((idBasedHueValue - 0.5) * 2 * 60);
+				}
+				c = new t.Color(`hsl(${hue}, 50%, 70%)`);
+			}
+			let s = 100 + i * 50;
+			let radius = s / 2;
+			let sphere = createComplexSphere(radius, c);
+			sphere.position.x = win.shape.x + (win.shape.w * .5);
+			sphere.position.y = win.shape.y + (win.shape.h * .5);
+			world.add(sphere);
+			cubes.push(sphere);
+		}
+	}
+	function createComplexSphere(radius, color) {
+		let innerSize = radius * 0.9;
+		let outerSize = radius;
+		let innerColor = color;
+		let outerColor = color;
+		let complexSphere = new THREE.Group();
+		let sphereWireframeInner = new THREE.Mesh(
+			new THREE.IcosahedronGeometry(innerSize, 2),
+			new THREE.MeshLambertMaterial({
+				color: innerColor,
+				wireframe: true,
+				transparent: true,
+				shininess: 0
+			})
+		);
+		complexSphere.add(sphereWireframeInner);
+		let sphereWireframeOuter = new THREE.Mesh(
+			new THREE.IcosahedronGeometry(outerSize, 3),
+			new THREE.MeshLambertMaterial({
+				color: outerColor,
+				wireframe: true,
+				transparent: true,
+				shininess: 0
+			})
+		);
+		complexSphere.add(sphereWireframeOuter);
+		let sphereGlassInner = new THREE.Mesh(
+			new THREE.SphereGeometry(innerSize, 32, 32),
+			new THREE.MeshPhongMaterial({
+				color: innerColor,
+				transparent: true,
+				shininess: 25,
+				opacity: 0.3
+			})
+		);
+		complexSphere.add(sphereGlassInner);
+		let sphereGlassOuter = new THREE.Mesh(
+			new THREE.SphereGeometry(outerSize, 32, 32),
+			new THREE.MeshPhongMaterial({
+				color: outerColor,
+				transparent: true,
+				shininess: 25,
+				opacity: 0.3
+			})
+		);
+		complexSphere.add(sphereGlassOuter);
+		let particlesOuter = createParticles(outerSize, outerColor);
+		complexSphere.add(particlesOuter);
+		let particlesInner = createParticles(innerSize, innerColor);
+		complexSphere.add(particlesInner);
+		return complexSphere;
+	}
+	function createParticles(size, color) {
+		let geometry = new THREE.Geometry();
+		for (let i = 0; i < 35000; i++) {
+			let x = -1 + Math.random() * 2;
+			let y = -1 + Math.random() * 2;
+			let z = -1 + Math.random() * 2;
+			let d = 1 / Math.sqrt(x * x + y * y + z * z);
+			x *= d * size;
+			y *= d * size;
+			z *= d * size;
+			geometry.vertices.push(new THREE.Vector3(x, y, z));
+		}
+		let material = new THREE.PointsMaterial({
+			size: 0.1,
+			color: color,
+			transparent: true
+		});
+		return new THREE.Points(geometry, material);
+	}
+	function updateWindowShape (easing = true)
+	{
+		// storing the actual offset in a proxy that we update against in the render function
+		sceneOffsetTarget = {x: -window.screenX, y: -window.screenY};
+		if (!easing) sceneOffset = sceneOffsetTarget;
+	}
+	function render ()
+	{
+		let t = getTime();
+		windowManager.update();
+		// calculate the new position based on the delta between current offset and new offset times a falloff value (to create the nice smoothing effect)
+		let falloff = .05;
+		sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff);
+		sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff);
+		// set the world position to the offset
+		world.position.x = sceneOffset.x;
+		world.position.y = sceneOffset.y;
+		let wins = windowManager.getWindows();
+		// loop through all our cubes and update their positions based on current window positions
+		for (let i = 0; i < cubes.length; i++)
+		{
+			let complexSphere = cubes[i];
+			let win = wins[i];
+			let _t = t;
+			let posTarget = {x: win.shape.x + (win.shape.w * .5), y: win.shape.y + (win.shape.h * .5)}
+			complexSphere.position.x = complexSphere.position.x + (posTarget.x - complexSphere.position.x) * falloff;
+        	complexSphere.position.y = complexSphere.position.y + (posTarget.y - complexSphere.position.y) * falloff;
+			complexSphere.rotation.x = _t * .5;
+			complexSphere.rotation.y = _t * .3;
+			updateComplexSphere(complexSphere, t);
+		};
+		// updateParticles();
+		renderer.render(scene, camera);
+		requestAnimationFrame(render);
+	}
+	function updateComplexSphere(complexSphere, elapsedTime) {
+		let sphereWireframeInner = complexSphere.children[0];
+		let sphereWireframeOuter = complexSphere.children[1];
+		let sphereGlassInner = complexSphere.children[2];
+		let sphereGlassOuter = complexSphere.children[3];
+		let particlesOuter = complexSphere.children[4];
+		let particlesInner = complexSphere.children[5];
+		sphereWireframeInner.rotation.x += 0.002;
+		sphereWireframeInner.rotation.z += 0.002;
+		sphereWireframeOuter.rotation.x += 0.001;
+		sphereWireframeOuter.rotation.z += 0.001;
+		sphereGlassInner.rotation.y += 0.005;
+		sphereGlassInner.rotation.z += 0.005;
+		sphereGlassOuter.rotation.y += 0.01;
+		sphereGlassOuter.rotation.z += 0.01;
+		particlesOuter.rotation.y += 0.0005;
+		particlesInner.rotation.y -= 0.002;
+		var innerShift = Math.abs(Math.cos(((elapsedTime + 2.5) / 20)));
+		var outerShift = Math.abs(Math.cos(((elapsedTime + 5) / 10)));
+		sphereWireframeOuter.material.color.setHSL(0.55, 1, outerShift);
+		sphereGlassOuter.material.color.setHSL(0.55, 1, outerShift);
+		particlesOuter.material.color.setHSL(0.55, 1, outerShift);
+		sphereWireframeInner.material.color.setHSL(0.08, 1, innerShift);
+		particlesInner.material.color.setHSL(0.08, 1, innerShift);
+		sphereGlassInner.material.color.setHSL(0.08, 1, innerShift);
+		sphereWireframeInner.material.opacity = Math.abs(Math.cos((elapsedTime + 0.5) / 0.9) * 0.5);
+		sphereWireframeOuter.material.opacity = Math.abs(Math.cos(elapsedTime / 0.9) * 0.5);
+	}
+	// resize the renderer to fit the window size
+	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 );
+	}
+}

three.r124.min.js ADDED Viewed

The diff for this file is too large to render. See raw diff