原地址：twitter.com/_nonfigurat...
本文将实现以该源码为基础，做核心原理的介绍。
该源码核心代码总共几百行，两个核心 js 文件有： WindowManager.js、main.js, 除此之外就依赖了 three.js这个库。
WindowManager.js
在 WindowManager 我们主要管理多个窗口应用，记住核心在于监听浏览器 Storage 事件来同步其他窗口的变化 。在 update 方法中不断更新自己窗口中形状的变化。那么如何更新这两个变化呢，我们通过 main.js 传入的winShapeChangeCallback 和 winChangeCallback 回调来控制，这样我们可以解耦出自定义的形状和窗口动画。
js
/**
* 窗口管理
*/
class WindowManager {
/** object[] */
#windows;
// 总更新数
#count;
// 当前窗口形状的id
#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) {
// 一旦存在改变更新 update回调
if (that.#winChangeCallback) that.#winChangeCallback();
}
}
});
// 移除对应卸载的窗口
window.addEventListener('beforeunload', function (e) {
let index = that.getWindowIndexFromId(that.#id);
// 移除
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")) || [];
// 唯一id标识
this.#count = localStorage.getItem("count") || 0;
this.#count++;
this.#id = this.#count;
// 更新当前id窗口最新数据
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;
}
// 找到windows数组中当前最新的id的索引 （因为顺序可能在切换中不一致）
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;
// 注意只更新我当前的形状的位置，其他形状会在其他窗口更新到localstorag，并同步更新到 storage 事件中
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;Main.js
在 Main.js 的核心在于监听 visibilitychange 事件来保证窗口在屏幕上，而不是后台中。这个时候我们需要初始化来确保更新当前窗口。比如按初始化顺序的setupScene、setupWindowManager、resize、updateWindowShape、render，但是这里还是注意核心的render渲染方法。
在render方法中我们要确保所有窗口时间的同步，因为会影响到动画的同步更新。同时通过平滑因子 falloff 来控制强度。其他就是窗口移动的动画、多个cube的旋转偏移动画更新。
除此之外，由于每个窗口都保留了一份windows的状态数据，这就意味着你在任意一个窗口在控制台手动删除确实有用，但是一旦你开启另一个窗口数据又会同步到你这个被清理的窗口。所以作者在这里判断了查询字符串 clear = true 的时候做同步的清理windows。
我们可以看下localstorage中保存的windows状态数据：
Main.js 源码：
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;
// 从一天开始以秒为单位的时间(以便所有Windows使用相同的时间)
function getTime() {
return (new Date().getTime() - today) / 1000.0;
}
// 查询字符串有clear= true 就清空（ 因为多个窗户都有一个备份）
if (new URLSearchParams(window.location.search).get("clear")) {
localStorage.clear();
}
else {
// 只有在窗口在屏幕显示才初始化
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(() => {
// 基础的three配置
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);
// 传入要更新的cube回调
windowManager.setWinChangeCallback(windowsUpdated);
let metaData = { foo: "bar" };
windowManager.init(metaData);
windowsUpdated();
}
function windowsUpdated() {
updateNumberOfCubes();
}
function updateNumberOfCubes() {
let wins = windowManager.getWindows();
// 移除所有cube
cubes.forEach((c) => {
world.remove(c);
})
cubes = [];
// 循环创建cube
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) {
// winodw.screenX 取反得到正向偏移
sceneOffsetTarget = { x: -window.screenX, y: -window.screenY };
// 初始化直接相等 在world.position就不会有变化
if (!easing) sceneOffset = sceneOffsetTarget;
}
function render() {
let t = getTime();
windowManager.update();
// 根据新的偏移量和滑动因子的大小来做窗口移动阻尼的效果
let falloff = 0.2;
sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff);
sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff);
// 通过基类也就是object3d来控制当前视口的位置
world.position.x = sceneOffset.x;
world.position.y = sceneOffset.y;
let wins = windowManager.getWindows();
// 循环更新旋转cube
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);
}
}效果：
总结
通过上文的代码解释，是不是感觉很简单，这个时候我们可以动手用 Three.js 对大量的cube改成大量的粒子模型，通过噪声来控制粒子的起伏动画，是不是很有意思？
如果你对可视化感兴趣，想要有长远的技术提升，不妨看一看这本最新的掘金小册 《前端可视化入门与实战》！前端可视化入门与实战 - 谦宇 - 掘金小册 (juejin.cn)