文章报道了一段视频展示了如何使用纯前端技术，特别是three.js和localStorage，在多个窗口间实现类似量子纠缠的3D场景。作者开源了简化版本的源码，虽然不如原视频炫酷，但原理相似。
这两天，很多群里都在疯传一个视频，视频演示了纯前端实现的“量子纠缠”效果，不少前端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>
这里就不再详细解释了，可以查看完整源码：https://github.com/bgstaal/multipleWindow3dScene
扫一扫
2167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
