当前位置: 首页 > 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

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

http://www.lryc.cn/news/251347.html

相关文章:

  • flutter-web中使用js工具类
  • @ResponseBody详解:用于响应体响应数据
  • 【Python百练——第3练】矩形类及操作
  • 【C语言学习疑难杂症】C语言中数组存储时为什么从低地址到高地址
  • Linux:查看端口占用的进程
  • 医美店会员管理系统预约小程序作用是什么
  • Linux 正则表达式
  • C语言面试之数组指针上篇
  • LinkWeChat,唯一以开源为核心的SCRM
  • Android textView 显示: STRING_TOO_LARGE
  • 用HeidiSQL在MySQL中创建新的数据库
  • 纯前端实现导入excel数据
  • Matlab下载许可证文件 教程(在账号有许可证的前提下)
  • AI 绘画 | Stable Diffusion 电商模特
  • vue面试题整理(1.0)
  • PyQt基础_007_ 按钮类控件QCombox
  • Android Wifi的扫描机制
  • 类 —— 友元、常/静态成员函数
  • 单页面应用
  • 六、ZooKeeper Java API操作
  • 美甲美睫店预约会员管理小程序作用如何
  • Vue3为什么会推出组合式API
  • windows11 phpstudy_pro php8.2 安装redis扩展
  • 中英双语大模型ChatGLM论文阅读笔记
  • 力扣题:字符串的反转-11.24
  • NIO--07--Java lO模型详解
  • OpenSSH 漏洞修复升级最新版本
  • 【数据结构和算法】无限集中的最小数字
  • SimpleDataFormat 非线程安全
  • SpringBoot : ch12 多模块配置YAML文件