当前位置: 首页 > news >正文

如何跑通跨窗口渲染: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

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

相关文章:

如何跑通跨窗口渲染: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语言中&#xff0…...

LinkWeChat,唯一以开源为核心的SCRM

LinkWeChat是国内首个基于企业微信的开源SCRM,在集成了企微强大的开放能力的基础上,进一步升级拓展灵活高效的客户运营能力及多元化精准营销能力,让客户与企业之间建立强链接,帮助企业提高客户运营效率,强化营销能力&a…...

Android textView 显示: STRING_TOO_LARGE

在Android中,字符串资源的长度限制是32KB,getString()方法返回的字符串资源的大小超过这个限制,就会抛出STRING_TOO_LARGE 这个错误。 我本地的临界值是:32.3 KB (33,090 字节) 小于等于33090时,能正常显示&#xff…...

用HeidiSQL在MySQL中创建新的数据库

用有权限的用户登录: 右键单击,选择: 输入要创建的数据库名称,然后点击“确定”: 刷新下,就看到新创建的数据库了: 在新创建的数据库中,就可以做其它操作了,例如…...

纯前端实现导入excel数据

准备工作 - 下载 xlsx npm install xlsx下面直接上代码&#x1f447; <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 本文主要介绍&#xff0c;在 Mathwork 账号有许可证的前提下&#xff0c;下载许可证的操作流程。 好久没有用 Mat…...

AI 绘画 | Stable Diffusion 电商模特

前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特,就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》,这篇文章对你来说,上手会更轻松。 教程 提取服装蒙版…...

vue面试题整理(1.0)

一、对MVC&#xff0c;MVP&#xff0c;MVVM的理解 三者都是项目的架构模式&#xff08;不是类的设计模式&#xff09;&#xff0c;即&#xff1a;一个项目的结构&#xff0c;如何分层&#xff0c;不同层负责不同的职责。 1.MVC MVC的出现是用在后端&#xff08;全栈时代&…...

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 的扫描场景分为下面四种情况&#xff1a; 1.亮屏情况下&#xff0c;在Wifi settings界面&#xff0c;固定扫描&#xff0c;扫描时间为10s。 2.亮屏情况下&#xff0c;在非Wifi settings界面&#xff0c;二进制指数退避扫描&#xff0c;退避&#xff1a;interval…...

类 —— 友元、常/静态成员函数

类 类的大小 和结构体大小求法一致。但需注意&#xff0c;普通空类也会占用 1 字节大小&#xff0c;因为普通空类可以实例化对象。 而 抽象空类占 4 字节&#xff08;32 位机中&#xff09;&#xff0c;因为抽象空类中含有虚指针&#xff08;含有虚函数的非抽象空类同理&am…...

单页面应用

单页面应用 1.什么是SPA 多页面应用&#xff1a;每个页面都是独立的html文件&#xff0c;页面切换是整体刷新&#xff0c;需要重新加载html、css、JS等文件&#xff0c;容易实现搜索引擎&#xff0c;数据通过url、cookie、localStore传递。 单页面应用&#xff1a;多个页面是…...

基于vue的错题管理系统[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;随着在线教育的发展&#xff0c;错题管理作为学习过程中的重要环节&#xff0c;其信息化管理需求日益增长。本文旨在设计并实现一个基于Vue框架的错题管理系统&#xff0c;通过对系统需求进行深入分析&#xff0c;采用合适的技术架构和开发技术&#xff0c;完成…...

Android Studio中文界面汉化终极指南:5分钟打造舒适开发环境

Android Studio中文界面汉化终极指南&#xff1a;5分钟打造舒适开发环境 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 还在为An…...

如何快速上手AutoGPT-Next-Web:5分钟搭建专属AI助手

如何快速上手AutoGPT-Next-Web&#xff1a;5分钟搭建专属AI助手 【免费下载链接】AutoGPT-Next-Web &#x1f916; Assemble, configure, and deploy autonomous AI Agents in your browser.一键免费部署你的私人AutoGPT 网页应用 项目地址: https://gitcode.com/gh_mirrors/…...

挖到宝!阿贝云免费云服务太香了,学生党开发者闭眼冲

做个人博客、练技术、部署轻量应用还在找高性价比云服务&#xff1f;阿贝云https://www.abeiyun.com 直接把免费做到极致&#xff0c;免费虚拟主机 免费云服务器双福利&#xff0c;用下来的体验真的远超预期&#xff0c;稳定不卡顿还免备案&#xff0c;新手操作也毫无门槛太省…...

Go AI 生态实战:从单机 RAG 到分布式智能服务架构演进

Go AI 生态实战:从单机 RAG 到分布式智能服务架构演进 摘要:本文面向具备后端与架构背景的技术人员,系统讲透 Go 在 AI 应用落地中的工程化方法。文章不再停留在“调用一个模型接口”的层面,而是从 RAG 原理、服务拆分、索引构建、高并发治理、缓存策略、容错机制、可观测性…...

[具身智能-189]:ROS2的Node通信机制,为硬件的仿真平台与模型算法的分离以及他们之间标准化的通信提供了保障,在嵌入式系统,特别是具身智能开发中,解决“软硬耦合”这一顽疾。

ROS 2 的节点通信机制&#xff0c;本质上就是为了解决“软硬耦合”这一顽疾而生的。 它通过去中心化的架构和标准化的中间件&#xff08;DDS&#xff09;&#xff0c;让仿真平台&#xff08;如 Gazebo、Isaac Sim&#xff09;和模型算法&#xff08;如导航、感知&#xff09;能…...

解决企业级流程建模挑战:基于Vue与bpmn.js的Flowable工作流设计器深度集成指南

解决企业级流程建模挑战&#xff1a;基于Vue与bpmn.js的Flowable工作流设计器深度集成指南 【免费下载链接】workflow-bpmn-modeler &#x1f525; flowable workflow designer based on vue and bpmn.io7.0 项目地址: https://gitcode.com/gh_mirrors/wo/workflow-bpmn-mode…...

java打卡学习6:集合框架 Collection

集合框架概述集合框架&#xff08;Collection Framework&#xff09;是Java中用于存储、操作和传输数据的标准化架构。它提供了一组接口、实现类和算法&#xff0c;用于处理对象集合&#xff0c;简化了数据结构的操作。核心目标&#xff1a;性能优异&#xff1a;提供不同数据结…...

STM32与NB-IoT温室水培系统设计与实现

1. 项目概述与背景这个温室水培系统项目是我去年为一个农业科技园区设计的实际案例&#xff0c;当时客户需要一套能够实现远程监控的智能种植解决方案。经过三个月的开发和调试&#xff0c;最终形成了这套基于STM32和NB-IoT的完整系统。现代温室种植面临几个核心痛点&#xff1…...

5个维度解析LimeReport:Qt框架下的高效全能报表生成解决方案

5个维度解析LimeReport&#xff1a;Qt框架下的高效全能报表生成解决方案 【免费下载链接】LimeReport Report generator for Qt Framework 项目地址: https://gitcode.com/gh_mirrors/li/LimeReport 在企业级应用开发中&#xff0c;报表功能往往是连接数据与决策的关键纽…...