如何跑通跨窗口渲染:multipleWindow3dScene

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


https://github.com/bgstaal/multipleWindow3dSceneicon-default.png?t=N7T8https://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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/192531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 安装go环境

下载go SDK All releases - The Go Programming Language 此处建议选择与本机windows一样的版本,便于调试,若不涉及本地windows,则忽略此提示 上传到linux 解压go SDK 执行下述命令进行解压 tar -xvf go1.19.linux-amd64.tar.gz 此处选择…

tcp/ip协议 error=10022 Winsock.reg Winsock2.reg

tcp/ip协议 error10022 这2个注册表选项千万不能删除,否则上不了网。 按下windows键R键,输入regedit,打开注册表,在文件目录里找到如下两个文件夹,删除这两个文件夹。 路径:HKEY_LOCAL_MACHINE\System\C…

12.二维字符数组——输出basic和BASIC

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为二维字符数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 输出basic和BASIC 二、题目分析 法一&#xff1a; for(i0;i<1;i){ for(j0;j<6;j){ putchar(a[i][j]); pri…

RxJava

Single 使用 Flowable 比较重一般使用Single onSubscribe 产生订阅时调用 线程切换1 2 发送顺序事件.just just 源码 钩子方法,进行验证再处理 Single 对象 订阅,RxJavaPlugins.onSubscribe 钩子方法,产生订阅和过滤 Single 核心方法,抽象的,实现为SingleJust 订阅和执行成功回…

视图层与模板层

视图层 1 视图函数 一个视图函数&#xff0c;简称视图&#xff0c;是一个简单的Python 函数&#xff0c;它接受Web请求并且返回Web响应。响应可以是一张网页的HTML内容&#xff0c;一个重定向&#xff0c;一个404错误&#xff0c;一个XML文档&#xff0c;或者一张图片. . . 是…

93基于matlab的萤火虫算法优化支持向量机(GSA-SVM)分类模型

基于matlab的萤火虫算法优化支持向量机&#xff08;GSA-SVM&#xff09;分类模型&#xff0c;以分类精度为优化目标优化SVM算法的参数c和g&#xff0c;输出分类可视化结果。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 93萤火虫算法优化支持向量机 (xiaoh…

盘点25个Html游戏Game源码网页爱好者不容错过

盘点25个Html游戏Game源码网页爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 下载链接&#xff1a;https://pan.baidu.com/s/1lSNLjWB4xMuLV8m_kDtczw?pwd6666 提取码&#xff1a;6666 项目名称 21点游戏 H5…

将多个字节对象组成的列表中的多个字节对象连接成为一个字节对象bytes.join()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将多个字节对象组成的列表 中的多个字节对象 连接成为一个字节对象 bytes.join() [太阳]选择题 请以下代码输出的结果是&#xff1f; byte_list [bK,be,by] print("【显示】byte_list&q…

智慧用电安全动态监控系统

智慧用电安全动态监控系统是一种先进的电力监控技术系统&#xff0c;它运用物联网、大数据、云计算等先进技术&#xff0c;对电力系统的运行状况进行实时监控和预警。 该系统依托电易云-智慧电力物联网&#xff0c;通过智能传感终端采集电气线路的实时运行数据&#xff0c;客户…

面试题:说说 Cookie、Session、Token、JWT?

文章目录 什么是认证&#xff08;Authentication&#xff09;什么是授权&#xff08;Authorization&#xff09;什么是凭证&#xff08;Credentials&#xff09;什么是 Cookiecookie 重要的属性 什么是 Sessionsession 认证流程 Cookie 和 Session 的区别什么是 Token&#xff…

23种设计模式之C++实践(二)

23种设计模式之C++实践 3. 设计模式(二)组合型模式7. 适配器模式——不兼容结构的协调7.2:类适配器模式7.3:双向适配器模式适配器模式总结8.桥接模式——处理多维度变化桥接模式总结9. 组合模式——树形结构的处理9.2 透明组合模式9.3 安全组合模式组合模式总结10. 装饰模式…

解读Java虚拟机垃圾回收器:探究经典算法背后的奥秘

目录 一、GC分类与性能指标 &#xff08;一&#xff09;垃圾回收器分类 &#xff08;二&#xff09;性能指标 &#xff08;三&#xff09;不可能三角 二、不同的垃圾回收器概述 三、Serial回收器&#xff1a;串行回收 四、ParNew回收器&#xff1a;并行回收 五、Parall…

态势感知是什么

在当今高度信息化的时代&#xff0c;信息安全风险已经成为企业、政府和个人的重要关注点。为了有效应对这些风险&#xff0c;态势感知成为了一种日益重要的能力。态势感知是一种基于环境的、动态、整体地洞悉安全风险的能力&#xff0c;是以安全大数据为基础&#xff0c;从全局…

听GPT 讲Rust源代码--src/tools(5)

File: rust/src/tools/rust-analyzer/crates/hir-ty/src/mir/lower.rs 在Rust源代码中&#xff0c;lower.rs文件位于Rust Analyzer项目的hir-ty子库中&#xff0c;其目的是将高级中间表示&#xff08;HIR&#xff09;降低为中间表示&#xff08;MIR&#xff09;。下面对文件及其…

数据结构-归并排序

归并排序 基本概念 归并是指将两个或两个以上的有序表合并成一个有序表。 基本思想 假设有N个记录&#xff0c;则可以看成是N个有序的子序列&#xff0c;每个子序列的长度为1&#xff0c;然后两两归并得到[n/2] 个&#xff08;上取整&#xff09;长度为2的子序列&#xff…

css实现最简单的3d透视效果,通过旋转可以直观感受到

css的3d效果还是非常复杂的&#xff0c;我今天简单学习了一下入门&#xff0c;实现了一个超级简单的效果&#xff0c;帮助我自己理解这个3d的过程&#xff0c;实现的效果动画如下&#xff1a;可以通过调整父元素旋转的角度&#xff0c;更加直观的感受这个3d效果&#xff1a; 实…

C/S与B/S的区别

B/S与C/S理解 C/S结构B/S结构问题数据放在服务器端与客户端的利弊 C/S结构 客户端&#xff1a;用户安装的软件 服务端&#xff1a;统一管理数据库的主机中的软件 叫做服务端。 B/S结构 用户通过浏览器实现&#xff08;往往表示业务逻辑在前端进行实现&#xff0c;主要业务逻…

【数据结构初阶】双向链表

各位读者老爷好&#xff0c;很高兴你又来读本鼠鼠的博客。鼠鼠我呀基于C语言实现一下双向链表&#xff0c;有兴趣的读者老爷可以瞅瞅哈&#xff01; 目录 1.定义双向链表节点 2.初始化哨兵位 3.双向链表销毁 4.双向链表打印 5.双向链表在pos的前面进行插入 6.双向链表删除…

Linux系统之部署Plik临时文件上传系统

Linux系统之部署Plik临时文件上传系统 一、Plik介绍1.1 Plik简介1.2 Plik特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本 四、下载Plik软件包4.1 创建下载目录4.2 下载Plik软件包4.3 查看下载的Plik软件…

3.4_1 java自制小工具 - pdf批量转图片

相关链接 目录参考文章&#xff1a;pdf转图片(apache pdfbox)参考文章&#xff1a;GUI界面-awt参考文章&#xff1a;jar包转exe(exe4j)参考文章&#xff1a;IDEA导入GIT项目参考文章&#xff1a;IDEA中使用Gitee管理代码gitee项目链接&#xff1a;pdf_2_image网盘地址&#xf…