全网疯传的前端量子纠缠效果，源码来了！

本文主要是介绍全网疯传的前端量子纠缠效果，源码来了！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这两天，很多群里都在疯传一个视频，视频演示了纯前端实现的“量子纠缠”效果，不少前端er表示：“前端白学了”。

原视频如下：

全网疯传的前端量子纠缠效果，源码来了！

体验地址：3d example using three.js and multiple windows

视频作者昨晚开源一个简化版的实现源码（截止发文，该项目在 Github 上已获得超过 1k Star），本文就来看看他是怎么实现的！

简化版
根据作者的描述，该项目是使用three.js和localStorage实现的在同一源上设置跨窗口的 3D 场景。

把源码克隆到本地，用 Live Server 启动一下，简化版的效果是这样的：

在线体验：https://bgstaal.github.io/multipleWindow3dScene/

虽然没有原视频那么炫酷，但基本原理应该差不多。

源码包含多个文件，最主要的文件如下：

index.html

main.js：主文件

WindowManager.js：窗口管理

源码
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>