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

前端量子纠缠 效果炸裂 multipleWindow3dScene

我 | 在这里

🕵️ 读书 | 长沙 ⭐软件工程 ⭐ 本科
🏠 工作 | 广州 ⭐ Java 全栈开发(软件工程师)
🎃 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲
✈️已经旅游的地点 | 新疆-乌鲁木齐、新疆-吐鲁番、广东-广州、广东-佛山、湖南-长沙、湖南-张家界、山西、上海、郑州等。老家河南嘞
🏷️ 标签 | 男 自律狂人 目标明确 责任心强
✈️公众号 | 热爱技术的小郑 。文章底部有个人公众号二维码。回复 Java全套视频教程前端全套视频教程 即可获取 300G+ 教程资料及项目实战案例
🚀 邮箱 | 2977429967@qq.com
✈️ GitHub传送门 开源项目 + 实战Demo
 
为何而写?
🍍 好记性不如烂笔头,记录学习的相关知识 、项目 BUG 解决
🍇 复盘总结,加深记忆,方便自己查看
🍑 分享知识,咱就是这么乐于助人、专注填坑20年、哈哈哈哈
 
目标描述
🏆 没有伞的孩子、只能用力奔跑。向着架构师的方向努力、做一个有始有终的人。

视频效果

量子纠缠

源码地址

改项目目前已达到 9.9k stars
项目地址:https://github.com/bgstaal/multipleWindow3dScene

在这里插入图片描述

运行

1、Vscode安装 Live Server这个插件

在这里插入图片描述

2、点击Go live 就可以看到运行效果了
在这里插入图片描述
在这里插入图片描述

部分源码

import WindowManager from './WindowManager.js'const t = THREE;
let camera, scene, renderer, world;
let near, far;
let pixR = window.devicePixelRatio ? window.devicePixelRatio : 1;
let cubes = [];
let sceneOffsetTarget = {x: 0, y: 0};
let sceneOffset = {x: 0, y: 0};let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();let internalTime = getTime();
let windowManager;
let initialized = false;// get time in seconds since beginning of the day (so that all windows use the same time)
function getTime ()
{return (new Date().getTime() - today) / 1000.0;
}if (new URLSearchParams(window.location.search).get("clear"))
{localStorage.clear();
}
else
{	// this code is essential to circumvent that some browsers preload the content of some pages before you actually hit the urldocument.addEventListener("visibilitychange", () => {if (document.visibilityState != 'hidden' && !initialized){init();}});window.onload = () => {if (document.visibilityState != 'hidden'){init();}};function init (){initialized = true;// add a short timeout because window.offsetX reports wrong values before a short period setTimeout(() => {setupScene();setupWindowManager();resize();updateWindowShape(false);render();window.addEventListener('resize', resize);}, 500)	}function setupScene (){camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000);camera.position.z = 2.5;near = camera.position.z - .5;far = camera.position.z + 0.5;scene = new t.Scene();scene.background = new t.Color(0.0);scene.add( camera );renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true});renderer.setPixelRatio(pixR);world = new t.Object3D();scene.add(world);renderer.domElement.setAttribute("id", "scene");document.body.appendChild( renderer.domElement );}function setupWindowManager (){windowManager = new WindowManager();windowManager.setWinShapeChangeCallback(updateWindowShape);windowManager.setWinChangeCallback(windowsUpdated);// here you can add your custom metadata to each windows instancelet metaData = {foo: "bar"};// this will init the windowmanager and add this window to the centralised pool of windowswindowManager.init(metaData);// call update windows initially (it will later be called by the win change callback)windowsUpdated();}function windowsUpdated (){updateNumberOfCubes();}function updateNumberOfCubes (){let wins = windowManager.getWindows();// remove all cubescubes.forEach((c) => {world.remove(c);})cubes = [];// add new cubes based on the current window setupfor (let i = 0; i < wins.length; i++){let win = wins[i];let c = new t.Color();c.setHSL(i * .1, 1.0, .5);let s = 100 + i * 50;let cube = new t.Mesh(new t.BoxGeometry(s, s, s), new t.MeshBasicMaterial({color: c , wireframe: true}));cube.position.x = win.shape.x + (win.shape.w * .5);cube.position.y = win.shape.y + (win.shape.h * .5);world.add(cube);cubes.push(cube);}}function updateWindowShape (easing = true){// storing the actual offset in a proxy that we update against in the render functionsceneOffsetTarget = {x: -window.screenX, y: -window.screenY};if (!easing) sceneOffset = sceneOffsetTarget;}function render (){let t = getTime();windowManager.update();// calculate the new position based on the delta between current offset and new offset times a falloff value (to create the nice smoothing effect)let falloff = .05;sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff);sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff);// set the world position to the offsetworld.position.x = sceneOffset.x;world.position.y = sceneOffset.y;let wins = windowManager.getWindows();// loop through all our cubes and update their positions based on current window positionsfor (let i = 0; i < cubes.length; i++){let cube = cubes[i];let win = wins[i];let _t = t;// + i * .2;let posTarget = {x: win.shape.x + (win.shape.w * .5), y: win.shape.y + (win.shape.h * .5)}cube.position.x = cube.position.x + (posTarget.x - cube.position.x) * falloff;cube.position.y = cube.position.y + (posTarget.y - cube.position.y) * falloff;cube.rotation.x = _t * .5;cube.rotation.y = _t * .3;};renderer.render(scene, camera);requestAnimationFrame(render);}// resize the renderer to fit the window sizefunction resize (){let width = window.innerWidth;let height = window.innerHeightcamera = new t.OrthographicCamera(0, width, 0, height, -10000, 10000);camera.updateProjectionMatrix();renderer.setSize( width, height );}
}

相关文章:

前端量子纠缠 效果炸裂 multipleWindow3dScene

我 | 在这里 &#x1f575;️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 &#x1f3e0; 工作 | 广州 ⭐ Java 全栈开发&#xff08;软件工程师&#xff09; &#x1f383; 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 ✈️已经旅游的地点 | 新疆-乌鲁木齐、新疆-吐鲁番、广东-广州…...

第十七章 处理空字符串和 Null 值 - XMLIGNORENULL、XMLNIL 和 XMLUSEMPTYELEMENT 的详细信息

文章目录 第十七章 处理空字符串和 Null 值 - XMLIGNORENULL、XMLNIL 和 XMLUSEMPTYELEMENT 的详细信息XMLIGNORENULL、XMLNIL 和 XMLUSEMPTYELEMENT 的详细信息XMLIGNORENULLXMLNILXMLUSEEMPTYELEMENT 导入值 第十七章 处理空字符串和 Null 值 - XMLIGNORENULL、XMLNIL 和 XML…...

Asp.net core WebApi 配置自定义swaggerUI和中文注释

1.创建asp.net core webApi项目 默认会引入swagger的Nuget包 <PackageReference Include"Swashbuckle.AspNetCore" Version"6.2.3" />2.配置基本信息和中文注释&#xff08;默认是没有中文注释的&#xff09; 2.1创建一个新的controller using Micr…...

Xilinx SDK获取代码运行时间

Xilinx SDK获取代码运行时间 一、API 头文件 “xtime_l.h”函数XTime_GetTime(XTime * xtime),获取周期数时钟频率宏 COUNTS_PER_SECOND 二、使用 #include "xtime_l.h"int main(){XTime tBegin, tEnd;unsigned int t_us;unsigned long long cycles;XTime_GetTim…...

【力扣】189. 轮转数组

【力扣】189. 轮转数组 文章目录 【力扣】189. 轮转数组1. 题目介绍2. 解法2.1 方法一&#xff1a;不太正规&#xff0c;但是简单2.2 方法二&#xff1a;使用额外的数组2.3 方法三&#xff1a;环状替换2.4 方法四&#xff1a;数组翻转 3. Danger参考 1. 题目介绍 给定一个整数…...

Spring 拾枝杂谈—Spring原生容器结构剖析(通俗易懂)

目录 一、前言 二、Spring快速入门 1.简介 : 2. 入门实例 : 三、Spring容器结构分析 1.bean配置信息的存储 : 2.bean对象的存储 : 3.bean-id的快捷访问 : 四、总结 一、前言 开门见山&#xff0c;11.25日开始我们正式进入Java框架—Spring的学习&#xff0c;此前&…...

Java核心知识点整理大全22-笔记

目录 19.1.14. CAP 一致性&#xff08;C&#xff09;&#xff1a; 可用性&#xff08;A&#xff09;&#xff1a; 分区容忍性&#xff08;P&#xff09;&#xff1a; 20. 一致性算法 20.1.1. Paxos Paxos 三种角色&#xff1a;Proposer&#xff0c;Acceptor&#xff0c;L…...

qt 5.15.2读取csv文件功能

qt 5.15.2读取csv文件功能 工程文件.pro 内容&#xff1a; QT core#添加网络模块 QT networkCONFIG c17 cmdline# You can make your code fail to compile if it uses deprecated APIs. # In order to do so, uncomment the following line. #DEFINES QT_DISABLE_DEPREC…...

【Vue】绝了!还有不懂生命周期的?

生命周期 Vue.js 组件生命周期&#xff1a; 生命周期函数&#xff08;钩子&#xff09;就是给我们提供了一些特定的时刻&#xff0c;让我们可以在这个周期段内加入自己的代码&#xff0c;做一些需要的事情; 生命周期钩子中的this指向是VM 或 组件实例对象 在JS 中&#xff0c;…...

关于IP与端口以及localhost

IP和域名 IP地址是一个规定&#xff0c;现在使用的是IPv4&#xff0c;既由4个0-255之间的数字组成&#xff0c;在计算机中&#xff0c;IP地址是分配给网卡的&#xff0c;每个网卡有一个唯一的IP地址。 域名(Domain Name)就是给IP取一个字符的名字&#xff0c;例如http://163.c…...

如何进行MySQL的主从复制(MySQL5.7)

背景&#xff1a;在一些Web服务器开发中&#xff0c;系统用户在进行数据访问时&#xff0c;基本都是直接操作数据库MySQL进行访问&#xff0c;而这种情况下&#xff0c;若只有一台MySQL服务器&#xff0c;可能会存在如下问题 数据的读和写的所有压力都会由一台数据库独…...

5:kotlin 类(Classes )

kotlin支持面向对象编程&#xff0c;也有雷和对象的概念 要声明一个类需要使用class关键字 class Customer属性&#xff08;Properties&#xfeff;&#xff09; 可以在类名后边添加()&#xff0c;在()里边声明属性 class Contact(val id: Int, var email: String)声明了不…...

达梦:【1】达梦常用操作

达梦&#xff1a;【1】达梦常用操作 一、登录达梦二、创建表空间及用户模式三、查看表空间、用户、模式四、系统查询五、角色管理六、数据库导入导出七、达梦数据库汉字存储八、根据表生成ctl控制文件九、本地连多台数据库(RAC) 一、登录达梦 ./disql username/passwordip:por…...

数字人透明屏幕的技术原理是什么?

数字人透明屏幕的技术原理主要包括人脸识别和全息影像技术。其中&#xff0c;人脸识别技术是通过摄像头捕捉游客的面部表情和动作&#xff0c;并将其转化为数据指令&#xff0c;以便与数字人物进行互动。而全息影像技术则是利用透明屏幕&#xff0c;通过全息投影的方式将数字人…...

提升APP软件的用户体验方法

提升APP软件的用户体验是确保用户满意度和应用成功的关键。以下是一些方法&#xff0c;可以帮助提升APP的用户体验&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.简洁的用户界面设计&#xff1a; …...

JVM运行时数据区域、对象内存分配、内存溢出异常总结

深入理解java虚拟机第二章 二、运行时数据区域2.2.1 程序计数器2.2.2 Java虚拟机栈2.2.3 本地方法栈2.2.4 Java堆2.2.5 方法区2.2.6 运行时常量池2.2.7 直接内存 三、HotSpot虚拟机对象解密2.3.1 对象的创建对象如何分配内存&#xff1f;对象的创建如何处理并发问题&#xff1f…...

【C++设计模式】单例模式singleton

C 设计模式–单例模式singleton 单例模式 单例模式是指确保一个类在任何情况下都绝对只有一个实例&#xff0c;并提供一个全局访问点。 优点&#xff1a;内存中只有一个实例&#xff0c;减少内存开销&#xff1b;避免对资源多重占用&#xff1b;设置全局访问点&#xff0c;严…...

CVPR 2023 精选论文学习笔记:Post-Training Quantization on Diffusion Models

基于MECE原则,我们给出以下四种分类依据: 1. 模型类型 生成模型用于生成与其训练数据相似的新数据。它们通常用于图像生成、文本生成和音乐生成等任务。语言模型用于理解和生成人类语言。它们通常用于机器翻译、聊天机器人和文本摘要等任务。其他模型用于各种任务,例如图像…...

Python基础语法之学习字符串快速格式化

Python基础语法之学习字符串快速格式化 一、代码二、效果 一、代码 # 通过f"{占位}"控制字符串快速格式化,不做精度控制 name "张三" age 13 money 12.5 text f"姓名是{name},年龄是{age},钱是{money}" print(text)二、效果 每一天都是一个…...

Ubuntu22.04 server版本关闭DHCP,手动设置ip

在Ubuntu 22.04 中&#xff0c;网络配置已迁移到 Netplan&#xff0c;因此可以使用 Netplan 配置文件来手动设置 IP 地址并关闭 DHCP。 以下是在 Ubuntu 22.04 上手动设置 IP 地址并禁用 DHCP 的步骤&#xff1a; 打开终端&#xff0c;使用 root 权限或 sudo 执行以下命令&…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...