如何跑通跨窗口渲染:multipleWindow3dScene

New 这是一个跨窗口渲染的示例,用 Three.js 和 localStorage 在同一源(同产品窗口)上跨窗口设置 3D 场景。而这也是本周推特和前端圈的一个热点,有不少人在争相模仿它的实现,如果你对跨窗口的渲染有兴趣,可以读一读这个项目的代码。

https://github.com/bgstaal/multipleWindow3dScenehttps://github.com/bgstaal/multipleWindow3dScene

那么我们如何跑通这段代码呢?

首先把项目克隆下来,放在一个目录,用vscode打开这个目录,在vscode中安装插件live server和 Node.js当然你安装过就不用安装了。

之后是一个简便方法在vscode中双击打开intex.html文件,不断点击右下角的go live,出现一个窗口可以断开连接再点就可以出现多个连接了。

之后是复杂方法,此时我们可以尝试直接双击index.html文件,看是否能够顺利运行,多半是不可以的因为浏览器阻止了从本地文件系统 (file:///) 加载的 JavaScript 文件发起的跨域请求。这是浏览器的同源策略(Same Origin Policy)的一部分,用于保护用户安全。

此时使用本地服务器运行咱们的项目

之后创建一个简单的 Express 服务器文件,首先在cmd或者终端运行下边两条命令:

复制代码
npm init -y
npm install express

注意如果报错请查找报错原因,有些电脑可以需要从官网下载node.js进行安装并设置环境变量

然后在项目中创建一个文件server.js,并将下方代码放进去

复制代码
const express = require('express');
const app = express();
const port = 3000;

app.use(express.static(__dirname));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

之后运行程序

复制代码
node server.js

注意如果报错请查找原因

通过浏览器访问项目: 打开浏览器,并在地址栏中输入 http://localhost:3000

记得打开多个页面,之后阉割版量子纠缠就出现了

相关推荐
whuzhang1613 小时前
3dgs通俗讲解
3d
3DVisionary15 小时前
3D-DIC与机器学习协同模拟材料应力-应变本构行为研究
人工智能·机器学习·3d·3d-dic技术 机器学习·应力-应变本构行为·卷积神经网络(ecnn)·数字图像相关法(dic)
千鼎数字孪生-可视化16 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
huoyingcg2 天前
3D Mapping秀制作:沉浸式光影盛宴 3D mapping show
科技·3d·动画·虚拟现实
luoganttcc2 天前
FastPillars:一种易于部署的基于支柱的 3D 探测器
3d
工业3D_大熊2 天前
3D Web轻量化引擎HOOPS Communicator在装配件管理上的具体优势
3d·3d web轻量化·3d渲染·3d模型可视化·工业3d·web端3d可视化·3d复杂模型轻量化
在下胡三汉2 天前
3dmax批量转glb/gltf/fbx/osgb/stl/3ds/dae/obj/skp格式导出转换插件,无需一个个打开max,材质贴图在
3d·材质·贴图
xhload3d2 天前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
木木黄木木2 天前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
lb29173 天前
CSS 3D变换,transform:translateZ()
前端·css·3d