终于把国外大佬的跨窗口量子纠缠粒子效果给肝出来

前言

上篇文章 尝试实现了国外大佬用Web做出来跨窗口渲染动画效果反响很大，但是仅仅只是实现了跨窗口动画效果，严格说就没有动画，还有些bug和遗憾，尤其是粒子效果，得入three.js坑，怎么办？跳啊！

硬肝了两天，实在肝不动了，看效果吧。

第一版v2效果，大粒子，粒子数量较少：

第二版v2.1，小粒子，粒子数量多：

three.js

官方文档：threejs.org/，中文文档：three.js docs

我第一次接触three.js，之前只是听说过，比如能弄车展啥的，感觉很厉害，就想借此机会学习下，跳进坑里才发现，这坑也太深了。随便找个教程，里面各种名词就给我弄吐了。

先按文档 three.js docs 画个立方体，跑起来了，但是我想要球体啊，还有粒子围着中心转，这么多api学不起啊，搜教程也是杂乱无章，无从学起，咋整？找现成的啊！

看到官网有很多现成的例子，找了一个相近的：threejs.org/examples/#w…，截了个静态图长这样：

找源码：three.js/examples/we…，copy到本地，代码就200行，用到的three api就几个，搜下api大概了解代码各部分的功能，基本都能看懂，然后删了多余功能，一个粒子绕球中心旋转功能就出来了。

现在关于粒子移动、渲染、球体旋转缩放等变化api都已经基本搞懂了，然后就是痛苦折磨的计算调试了，不想再回忆了。

动画效果的移动都是靠循环对象、计算坐标，改变粒子的position来实现的，感觉应该会有更好的现成api能简化这个过程，而且有缓冲、阻尼效果等。如果有更好的例子，欢迎大佬分享。

总结下用到的api吧，就几个：

构造方法

属性

难点

在THREE.PerspectiveCamera透视投影相机下，由于是模拟人的眼睛从远处看的，所以会导致坐标上的单位跟html里的像素单位是不一致的，有一定的比例。但是判断浏览器窗口位置都是像素单位的，所以得算出这个比例、或者找到一种办法让两个单位是一致的。在外网搜到一个方案：forum.babylonjs.com/t/how-to-se…

const perspective = 800;
const fov = (180 * (2 * Math.atan(window.innerHeight / 2 / perspective))) / Math.PI;
const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 1, 1000);

camera.position.set(0, 0, perspective);

这样设置相机后，俩个单位就是一致的。至于原理。。。看见Math.atan就头大，过！

BroadcastChannel

BroadcastChannel的api很简单，在一个窗口中postMessage，另一个窗口就会通过message事件接受到了。

const channel = new BroadcastChannel('editor_channel');

channel.postMessage({ aa: '123' });

channel.addEventListener('message', ({ data }) => {
console.log(data);

});

在此例逻辑是，进页面初始化时、或者坐标改变时，需要把当前窗口坐标postMessage发送到别的窗口中，然后再把所有窗体坐标数据都存在js全局变量里使用。

但是这里有个问题，如果刷新其中一个窗口时，没办法立即获取别的窗口数据，因为别的窗口只有在坐标变化时才会发送数据（为了提高效率，不会在requestAnimationFrame里一直发数据），这样就得主动postMessage一个标记到别的窗口，然后别的窗口再把自己的数据postMessage回来，是个异步过程，有些繁琐。

使用上不比LocalStorage简单多少，不过BroadcastChannel确实可以解决LocalStorage的全局影响和缓存不自动清空问题。有兴趣可以自己实现下。（可以重写storage.js里方法）

优化窗口数据监听与更新

• 
  
• 注册window storage事件，监听storage变化时（当其它窗口位置变化时），判断最新窗口总数，当数量变化时，在当前窗口重新实例化所有球体及粒子对象。
  
• 注册window resize事件，更新摄像机比例和渲染器size。
  
• 将所有窗口数据保存在js全局变量里，用于在requestAnimationFrame中读取渲染动画，并且只在需要时更新：
  
  • 
    
  • 其它窗口位置变化时（通过window storage事件）；
    
  • 在requestAnimationFrame中判断当前窗口位置变化时（比较全局变量与当前window位置），更新全局变量和storage；
    
  
  
  

通过以上逻辑优化，可以有效提高渲染速度，减少代码重复执行，减小客户端压力。

待改进

总结

总结下相比之前的例子 尝试实现了国外大佬用Web做出来跨窗口渲染动画效果，有以下提升：

跨窗口通信、存储窗口坐标、在每个窗口画出所有球体和连线，这个机制流程已经很成熟了，没有太大的优化提升空间了，所以要实现国外大佬视频效果，就只剩three.js了，实在是学不动了，水太深。

源码已上传至GitHub，代码里有详细注释，希望能有所帮助：github.com/markz-demo/…

做了两版效果，可以通过代码里注释查看效果，README.md 中有说明。

Demo：markz-demo.github.io/mark-cross-…