全网最火爆的 "量子纠缠" 网页版

纯前端实现的量子纠缠效果视频在网络上迅速传播开来。视频中，作者在两个窗口中打开了相同的网页，然后在两个窗口中同时移动鼠标。

作者

简化版

作者目前在Github开源项目是使用 three.js 和 localStorage 实现的在同一源上设置跨窗口的 3D 场景的简化版。完整源码地址：https://github.com/bgstaal/multipleWindow3dScene

本地部署

把源码克隆到本地，配置Nginx亲自体验一番

代码语言：javascript复制

git clone git@github.com:bgstaal/multipleWindow3dScene.git

目录结构

Nginx配置

代码语言：javascript复制

server {
    listen 80;
    server_name 3d.tinywan.com;

    location / {
        root   /var/www/multipleWindow3dScene; 
        index  index.html index.htm;
    }
}

配置本地server主机 打开本地C:WindowsSystem32driversetchosts添加以下

代码语言：javascript复制

127.0.0.1       3d.tinywan.com

表示本地将域名3d.tinywan.com指向自己想要解析的IP 127.0.0.1 这时候就可以通过域名访问项目啦！配置完成后重启nginx。

访问

浏览器打开访问：http://3d.tinywan.com/index.html

录制一个Gif图片看看效果

虽然没有原视频那么炫酷，但基本原理应该差不多。作者只是公布了前端相关代码，通过three.js绘制图形，通过本地存储通信，这些都是很基础的知识。

真正难得的是创意，而真正复杂的是算法。给想自己实现的同学一些方向，前提需要一些图形学的知识。主要算法大都需要在shader中实现。以点的形式绘制一个球体，顶点数量多一些。

顶点位置用噪波进行一个分布，也就是有的地方粒子密度大，有的地方小。对每个顶点做扰动，以球体当前顶点的切线方向运动，以实现流动效果。两个球体的通信管道可以用圆柱体实现，一头的顶点做一些扩张。这只是一个思路，具体的实现细节还是非常复杂的。

配置 视频 通信 域名 源码

0 人点赞