如何跑通跨窗口渲染: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;或者一张图片. . . 是…

穷游?“穷”游?

Description 贫穷的小A有一个梦想&#xff0c;就是到t国去一次穷游&#xff0c;但现实是残酷的。小A所在的世界一共有n(n<500)个国家&#xff0c;国家与国家之间总共有E(E<50000)条道路相连&#xff0c;第i个国家对于进入它的外国人都要收取Bi的费用&#xff0c;而小A家住…

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…

vscode console.log快捷键

在 Visual Studio Code 中&#xff0c;您可以使用快捷键「Ctrl Shift P」&#xff08;Mac 用户请使用「Cmd Shift P」&#xff09;打开命令面板&#xff0c;然后输入「Editor: Insert Console.log」即可快速插入「console.log」代码。此快捷键已内置于 Visual Studio Code …

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…

php使用CORS解决跨域

CORS 是一种由 W3C 制定的跨域资源共享标准&#xff0c;通过在服务器端设置 HTTP 头来实现跨域请求。 在 PHP 中&#xff0c;可以通过设置响应头来启用 CORS&#xff1a; <?php // 服务器端 PHP 文件 header(Access-Control-Allow-Origin: *); // 允许所有域名访问 heade…

Spring Boot 集成 spring security 01

一、导入依赖&#xff08;pom.xml&#xff09; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&qu…

态势感知是什么

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

软件产品经理常用的ChatGPT通用提示词模板

产品规划和发展战略&#xff1a;请帮助我制定软件产品的规划和发展战略&#xff0c;包括市场调研、用户需求分析、产品定位、竞争对手分析等方面的内容&#xff0c;以便我能够更好地把握市场机会并制定相应的发展策略。 产品设计和开发&#xff1a;请帮助我进行软件产品的设计…

听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;。下面对文件及其…

Python----文件备份案例

实例代码 # 1、接收用户输入的文件名&#xff08;要备份的文件名&#xff09; oldname input(请输入要备份的文件名称&#xff1a;) # python.txt # 2、规划备份文件名&#xff08;python[备份].txt&#xff09; # 搜索点号 index oldname.rfind(.) # 返回文件名和文件后缀 …