如何跑通跨窗口渲染:multipleWindow3dScene
New 这是一个跨窗口渲染的示例,用 Three.js 和 localStorage 在同一源(同产品窗口)上跨窗口设置 3D 场景。而这也是本周推特和前端圈的一个热点,有不少人在争相模仿它的实现,如果你对跨窗口的渲染有兴趣,可以读一读这个项目的代码。
https://github.com/bgstaal/multipleWindow3dScene
https://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
记得打开多个页面,之后阉割版量子纠缠就出现了
相关文章:
如何跑通跨窗口渲染:multipleWindow3dScene
New 这是一个跨窗口渲染的示例,用 Three.js 和 localStorage 在同一源(同产品窗口)上跨窗口设置 3D 场景。而这也是本周推特和前端圈的一个热点,有不少人在争相模仿它的实现,如果你对跨窗口的渲染有兴趣,可…...
flutter-web中使用js工具类
文章目录 为什么要调用js1. flutter-web1. 引入js web/index.html2. 创建工具js web/CryptoEnc.js3. 创建对应的lib/js/js_interop.dart4. 由于引入的js是针对web平台的,所以引入需要做引入处理5. 使用 2. Android1. 引入依赖2. index.html3. dart引用 为什么要调用…...
@ResponseBody详解:用于响应体响应数据
RestFul风格或者是web阶段接触过的异步请求,都需要把数据转换成Json放入响应体中。 ResponseBody的作用其实是将java对象转为json格式的相应内容 使用 RequestMapping注解时,Spring会将返回值解析为视图路径,然后跳转路径返回对应的视图页面…...
【Python百练——第3练】矩形类及操作
💐作者:insist-- 💐个人主页:insist-- 的个人主页 理想主义的花,最终会盛开在浪漫主义的土壤里,我们的热情永远不会熄灭,在现实平凡中,我们终将上岸,阳光万里 ❤️欢迎点…...
【C语言学习疑难杂症】C语言中数组存储时为什么从低地址到高地址
在C语言中,数组的存储从低地址到高地址是有其历史原因的。这种设计主要是为了与计算机系统的内存组织方式相一致。 在计算机系统中,内存通常按照字节进行编址,地址从低到高递增。数组在内存中是连续存储的,因此数组的第一个元素&…...
Linux:查看端口占用的进程
命令 netstat -tunlp可以从图中看到,端口被那个进程占用,对应进程的pid是多少。...
医美店会员管理系统预约小程序作用是什么
医美在美业中占据着一定地位,爱美使然和经济独立、悦己消费下,不少女性会前往医美机构做脸部整容、嫩肤补水等服务,如美容院一样都是具备本地外地属性的,因此在如今互联网盛行下,商家需要借势线上破解难题及增强生意效…...
Linux 正则表达式
内容概述 1 文本编辑工具之神 VIM 1.1 vi 和 vim 简介 在 Linux 中我们经常编辑修改文本文件,即由 ASCII Unicode 或者其他编码的纯文字的文件。之前介绍过的 nano,实际工具中我们使用更为专业,功能强大的工具 文本编辑种类: vi…...
C语言面试之数组指针上篇
C语言数组是C语言中重要的数据结构之一,它用于存储一组相同类型的数据。数组在C语言中是以连续的内存空间来存储的,每个数组元素都是一个变量,占据一定的内存空间,数组元素之间是紧密相邻的。 一、数组的定义 在C语言中࿰…...
LinkWeChat,唯一以开源为核心的SCRM
LinkWeChat是国内首个基于企业微信的开源SCRM,在集成了企微强大的开放能力的基础上,进一步升级拓展灵活高效的客户运营能力及多元化精准营销能力,让客户与企业之间建立强链接,帮助企业提高客户运营效率,强化营销能力&a…...
Android textView 显示: STRING_TOO_LARGE
在Android中,字符串资源的长度限制是32KB,getString()方法返回的字符串资源的大小超过这个限制,就会抛出STRING_TOO_LARGE 这个错误。 我本地的临界值是:32.3 KB (33,090 字节) 小于等于33090时,能正常显示ÿ…...
用HeidiSQL在MySQL中创建新的数据库
用有权限的用户登录: 右键单击,选择: 输入要创建的数据库名称,然后点击“确定”: 刷新下,就看到新创建的数据库了: 在新创建的数据库中,就可以做其它操作了,例如…...
纯前端实现导入excel数据
准备工作 - 下载 xlsx npm install xlsx下面直接上代码👇 <template><div><input type"file" accept".xlsx, .xls" change"handleClick"></div> </template><script langts setup> import * a…...
Matlab下载许可证文件 教程(在账号有许可证的前提下)
文章目录 Part.I IntroductionPart.II 许可证文件过期解决方案Chap.I 使用 Internet 自动激活Chap.II 在不使用 Internet 的情况下手动激活 Part.I Introduction 本文主要介绍,在 Mathwork 账号有许可证的前提下,下载许可证的操作流程。 好久没有用 Mat…...
AI 绘画 | Stable Diffusion 电商模特
前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特,就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》,这篇文章对你来说,上手会更轻松。 教程 提取服装蒙版…...
vue面试题整理(1.0)
一、对MVC,MVP,MVVM的理解 三者都是项目的架构模式(不是类的设计模式),即:一个项目的结构,如何分层,不同层负责不同的职责。 1.MVC MVC的出现是用在后端(全栈时代&…...
PyQt基础_007_ 按钮类控件QCombox
import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class ComboxDemo(QWidget):def __init__(self, parentNone):super(ComboxDemo, self).__init__(parent)self.setWindowTitle("combox 例子") self.resize(300, 90) …...
Android Wifi的扫描机制
Android Wifi 的扫描场景分为下面四种情况: 1.亮屏情况下,在Wifi settings界面,固定扫描,扫描时间为10s。 2.亮屏情况下,在非Wifi settings界面,二进制指数退避扫描,退避:interval…...
类 —— 友元、常/静态成员函数
类 类的大小 和结构体大小求法一致。但需注意,普通空类也会占用 1 字节大小,因为普通空类可以实例化对象。 而 抽象空类占 4 字节(32 位机中),因为抽象空类中含有虚指针(含有虚函数的非抽象空类同理&am…...
单页面应用
单页面应用 1.什么是SPA 多页面应用:每个页面都是独立的html文件,页面切换是整体刷新,需要重新加载html、css、JS等文件,容易实现搜索引擎,数据通过url、cookie、localStore传递。 单页面应用:多个页面是…...
Workerman-todpole 部署实战:Linux/Windows 环境配置与优化技巧 [特殊字符]
Workerman-todpole 部署实战:Linux/Windows 环境配置与优化技巧 🚀 【免费下载链接】workerman-todpole HTML5WebSocketPHP(Workerman) , rumpetroll server writen using php 项目地址: https://gitcode.com/gh_mirrors/wo/workerman-todpole Wo…...
Veil-Evasion项目演进与替代方案:从Veil-Evasion到Veil 3.0的迁移指南
Veil-Evasion项目演进与替代方案:从Veil-Evasion到Veil 3.0的迁移指南 【免费下载链接】Veil-Evasion Veil Evasion is no longer supported, use Veil 3.0! 项目地址: https://gitcode.com/gh_mirrors/ve/Veil-Evasion 🚨 重要通知:V…...
layerJS与现代前端框架集成:Vue、React、Angular中的最佳实践指南 [特殊字符]
layerJS与现代前端框架集成:Vue、React、Angular中的最佳实践指南 🚀 【免费下载链接】layerJS layerJS: Javascript UI composition framework 项目地址: https://gitcode.com/gh_mirrors/la/layerJS layerJS是一个创新的JavaScript UI组合框架&…...
C++、汇编与易语言:三大编程语言深度对比
好的,我们来比较一下 C、汇编语言和易语言这三种编程语言的主要区别:抽象层级和与硬件的距离:汇编语言: 这是最低级的编程语言之一。它使用特定于 CPU 架构的 助记符(如 MOV, ADD, JMP)来直接操作 寄存器 和…...
新手如何通过Taotoken控制台快速创建并管理自己的API Key
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 新手如何通过Taotoken控制台快速创建并管理自己的API Key 对于初次接触大模型服务的开发者而言,如何安全、便捷地获取和…...
089、机器人动力学:拉格朗日法
机器人动力学:拉格朗日法 从一次机械臂抖动说起 去年调试一台六轴协作机器人,末端负载从0.5kg换到2kg,位置环PID参数调了三轮,静态精度勉强达标。一跑轨迹,末端抖得像筛糠。同事说“加个低通滤波”,我试了,抖动小了,但轨迹跟踪滞后明显。后来翻出动力学模型,用拉格朗…...
实战指南:深度掌握5大梯度下降优化器的可视化秘籍
实战指南:深度掌握5大梯度下降优化器的可视化秘籍 【免费下载链接】gradient_descent_viz interactive visualization of 5 popular gradient descent methods with step-by-step illustration and hyperparameter tuning UI 项目地址: https://gitcode.com/gh_mi…...
C语言实现热水器温度控制PID算法详解与嵌入式实战
1. 项目概述与核心价值最近在整理一些嵌入式开发的老项目,翻出来一个用C语言写的热水器温度控制PID算法示例。这玩意儿虽然代码量不大,但麻雀虽小五脏俱全,把PID控制的核心思想、参数整定、抗积分饱和这些关键点都体现出来了。对于刚接触自动…...
告别电脑“飞机起飞“噪音:FanControl风扇控制终极指南
告别电脑"飞机起飞"噪音:FanControl风扇控制终极指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tr…...
别再傻傻分不清了!一张图看懂CRT、PEM、PFX、P7B证书格式的区别与应用场景
数字证书格式全解析:CRT、PEM、PFX、P7B的核心差异与实战选择 当你第一次在服务器上配置SSL证书时,面对CRT、PEM、PFX、P7B这些后缀名,是不是感觉像在解密码?上周我帮一个创业团队迁移服务器,他们的CTO拿着五个不同格式…...
