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

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系:

有了虚拟场景Scene,相机录像Camera,在相机小屏幕上看到的Renderer

Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上
在这里插入图片描述
首先先描述下Scene:
这个场景为三要素之一,一切需要展示的东西都需要添加到Scene里面,也就是画布,你需要在页面展示的东西都需要add到Scene中,
在场景里面我们可以添加 Mesh网格模型、光源等

Mesh网格模型组成需要两部分 需要几何体Geometry和对应的材质模型Material

1、如何创建Scene、camera 、renderer 三要素并渲染:

<!DOCTYPE html>
<html><head><title>three.js</title><meta charset="utf-8"><style>* {margin: 0;padding: 0;}</style>
</head><body><div id="container"></div><!-- 类似于创建 并设置别名 --><script type="importmap">{"imports": {"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script><!-- 导入包名 --><script type="module">import * as THREE from 'three';// 创建一个新的场景对象const scene = new THREE.Scene();// 创建一个透视相机,参数分别为视野角度、宽高比、近平面和远平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建一个WebGL渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器的大小,使其充满整个窗口renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素添加到文档的body中document.body.appendChild(renderer.domElement);</script>
</body></html>

现在建立了场景、相机和渲染器;但是页面还是不能正常渲染的~

Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera

OrthographicCamera:适用于:CAD 图纸、工程图、UI 设计、2D 游戏等场景,这些场景通常需要保持物体的比例和形状。
PerspectiveCamera:适用于:3D 游戏、虚拟现实、建筑设计等场景,这些场景通常需要模拟真实世界的视觉效果。

透视投影相机PerspectiveCamera

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间,被称为视锥体,只有视锥体之内的物体,才会渲染出来,视锥体范围之外的物体不会显示在Canvas画布上。

PerspectiveCamera( fov, aspect, near, far )

第一个参数是视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,它的单位是角度(与弧度区分开)。默认值:50

第二个参数是长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的值。比如说,当你在一个宽屏电视上播放老电影时,可以看到图像仿佛是被压扁的。默认值:1

最后两个参数是近截面(near)和远截面(far)。 当物体某些部分比摄像机的远截面远或者比近截面近的时候,该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响,但未来为了获得更好的渲染性能,你将可以在你的应用程序里去设置它。near默认值:0.1;far默认值:2000

在这里插入图片描述

创建正方体到场景中

	  // 创建一个网格模型const geometry = new THREE.BoxGeometry(1, 1, 1);    // 创建一个立方体几何体const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });      // 创建一个材质对象const mesh = new THREE.Mesh(geometry, material);        // 创建一个网格模型对象scene.add(mesh);            // 将网格模型对象添加到场景中

这个时候Scene里面已经有了一个Mesh网格模型,也就是一个人进入到了想要拍摄的场景之中。默认在原点坐标
我们也可以设置这个人站在哪里:

 // 创建一个网格模型const geometry = new THREE.BoxGeometry(1, 1, 1);    // 创建一个立方体几何体const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });      // 创建一个材质对象const mesh = new THREE.Mesh(geometry, material);        // 创建一个网格模型对象mesh.position.set(1,1,1,)       // 设置网格模型对象的位置scene.add(mesh);            // 将网格模型对象添加到场景中

这个时候 我们 场景Scene准备好了,场景里面要拍摄的人Mesh也准备好了,相机camera也准备好了,这个时候我们需要相机放到一个可以拍摄到咱们物体的一个位置position,然后让相机看向哪里呢?

相机对象Camera具有位置属性.position,通过位置属性.position可以设置相机的位置。

   // 创建一个透视相机,参数分别为视野角度、宽高比、近平面和远平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(5, 5, 5); 

相机已经放到了xyz都为5的位置,默认看向xyz都为000的位置,现在我们想让它看向人也就是网格模型的位置

     // 创建一个透视相机,参数分别为视野角度、宽高比、近平面和远平面const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(5, 5, 5);   // 设置相机方向(指向的场景对象)                            camera.lookAt(mesh.position); 

这个时候 页面还是不展示嘻嘻 不慌~
渲染场景
这是因为我们还没有对它进行真正的渲染。为此,我们需要使用一个被叫做“渲染循环”(render loop)或者“动画循环”(animate loop)的东西。

      /*** 动画函数* 该函数通过不断地请求下一帧来实现动画效果* 它在每一帧中调用渲染器来重新渲染场景和相机*/function animate() {// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}// 调用animate函数开始动画animate();

这下就相当于一直在录像了~
看下页面:
在这里插入图片描述
我们添加一个坐标系,这样就可以更好的看出所在的位置:
辅助观察坐标系同样的添加到场景中

     // 创建辅助观察坐标系const asesHelper = new THREE.AxesHelper(200);scene.add(asesHelper);

three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴,对于three.js的3D坐标系默认y轴朝上
在这里插入图片描述
我们可以让Z轴朝上

        // 默认是 0 1 0camera.up.x = 0;camera.up.y = 0;camera.up.z = 1; 

在这里插入图片描述

这个时候我们想让他跟随鼠标移动,可拖动旋转我们使用

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const controls = new OrbitControls(camera, renderer.domElement)   function animate() {controls.update();// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}

这时候我们就可以随意的拖动

我们可以设置这个人Mesh网格模型翻跟头,比如我们让他跟随z轴渲染,只需要在循环动画中增加旋转即可

     function animate() {// 跟随Z轴旋转mesh.rotation.z += 0.01;controls.update();// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}

好了,到目前位置,做了哪些?

  1. 创建场景
  2. 在场景中增加Mesh模型,模型由几何体和它对应的材质组成,设置了它的定位位置
  3. 增加camera相机录像,它的四个参数的含义,位置position,看向何方lookAt
  4. 渲染器renderer
  5. 增加辅助坐标系,默认Y朝上
  6. 增加控制器
  7. 增加动画围绕z轴旋转

相关文章:

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系&#xff1a; 有了虚拟场景Scene&#xff0c;相机录像Camera&#xff0c;在相机小屏幕上看到的Renderer Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene&#xff1a; 这个场景为三要素之一&#xff0c;一切需要展示的东西都需…...

Java基础面试题06:hashCode()和equals()方法的重要性体现在什么地方?

前言 Java中的hashCode()和equals()方法看似是干同一件事&#xff0c;但它们的使用场景和作用却大有不同。为了让程序更高效、更准确地运行&#xff0c;我们需要对这两者有深入的了解&#xff0c;并掌握它们的重写规则。 hashCode()和equals()的基础知识 什么是hashCode&…...

Matlab Simulink HDL Coder开发流程(一)— 创建HDL兼容的Simulink模型

创建HDL兼容的Simulink模型 一、使用Balnk DUT模板二、从HDL Coder库中选择模块三、为DUT开发算法/功能四、为设计创建Testbench五、仿真验证设计功能六、Simulink模型生成HDL代码 这个例子说明了如何创建一个用于生成HDL代码的Simulink模型。要创建兼容HDL代码生成的MATLAB算法…...

C#基础之方法

文章目录 1 方法1.1 定义方法1.2 参数传递1.2.1 按值传递参数1.2.2 按引用传递参数1.2.3 按输出传递参数1.2.4 可变参数 params1.2.5 具名参数1.2.6 可选参数 1.3 匿名方法1.3.1 Lambda 表达式1.3.1.1 定义1.3.1.2 常用类型1.3.1.3 Lambda 表达式与 LINQ1.3.1.4 Lambda 表达式的…...

Pytest框架学习19--参数化2

1、数据源是yaml 安装yaml&#xff0c;使用safe_load方法读取文件&#xff0c;解析出数据 pip install PyYAML # test_data.yaml test_case_1:a: 2b: 3expected_result: 5test_case_2:a: -1b: 10expected_result: 9test_case_3:a: 0b: 0expected_result: 0# test_code.pyimpor…...

VSCode中“Run Code”运行程序时,终端出现中文乱码解决方法

问题描述 在VSCode中“Run Code”运行程序时&#xff0c;终端输出结果出现中文乱码现象&#xff1a; 解决方法 1. 检查系统cmd的默认编码 查看Windows终端当前编码方式的命令&#xff1a; chcp输出结果是一段数字代码&#xff0c;如936&#xff0c;这说明当前的cmd编码方式…...

HarmonyOS 5.0应用开发——列表(List)

【高心星出品】 文章目录 列表&#xff08;List&#xff09;列表介绍列表布局设置主轴方向设置交叉轴方向 列表填充分组列表填充 滚动条位置设置滚动位置滚到监听 列表项侧滑 列表&#xff08;List&#xff09; 列表介绍 列表作为一种容器&#xff0c;会自动按其滚动方向排列…...

C++设计模式外观模式(Facade)

什么是桥接模式&#xff1f; 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它的核心目的是解耦抽象部分和实现部分&#xff0c;让它们可以独立变化。在简单的描述中&#xff0c;桥接模式可以让你在不修改原有代码的情况下&#xff0c;分别…...

《Python基础》之Numpy库

目录 简介 一、创建数组 1、根据列表创建数组 2、创建全0数组 3、创建全1数组 4、创建单位矩阵 5、创建随机数数组 二、查看数组的属性 三、 数组的操作 1、索引和切片 2、变形 3、拼接 &#xff08;1&#xff09;、vstack() 纵向拼接 &#xff08;2&#xff09;、hs…...

Python异步编程与API调用:提高效率与性能的实践指南

引言 在当今的软件开发领域&#xff0c;异步编程已成为提高应用程序性能和响应能力的关键技术。特别是在处理I/O密集型任务&#xff0c;如API调用时&#xff0c;异步编程能够显著提升效率。本文将通过一个具体的示例——使用Python的asyncio和aiohttp库来异步调用API&#xff…...

Zookeeper3.4.14集群安装

Zookeeper3.4.14三节点集群安装 为保证集群高可用&#xff0c;Zookeeper 集群的节点数最好是奇数&#xff0c;最少有三个节点&#xff0c;所以这里搭建一个三个节点的集群。(在一个节点模拟三节点&#xff0c;真实的三节点把ip替换一下即可&#xff0c;按照hadoop案件把网络打…...

电机驱动MCU介绍

电机驱动MCU是一种专为电机控制设计的微控制器单元&#xff0c;它集成了先进的控制算法和高性能的功率输出能力。 电机驱动MCU采用高性能的处理器核心&#xff0c;具有快速的运算速度和丰富的外设接口。它内置了专业的电机控制算法&#xff0c;包括PID控制、FOC&#xff08;Fi…...

Python 面向对象编程详解

Python 面向对象编程详解 面向对象编程&#xff08;OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计软件。在 Python 中&#xff0c;面向对象编程非常强大&#xff0c;允许开发者通过类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;来模…...

网络技术-不使用K8S情况下哪些方法可搭建服务链编排

在不使用Kubernetes&#xff08;k8s&#xff09;&#xff08;或不使用Docker环境技术的&#xff09;情况下&#xff0c;搭建服务链编排环境需要依赖其他服务编排和容器化技术&#xff0c;或者采用传统的虚拟机和服务管理方法。以下是一些可能的解决方案&#xff1a; 一、使用其…...

JVM_总结详解

1、CPU和内存的交互 了解jvm内存模型前&#xff0c;了解下cpu和计算机内存的交互情况。【因为Java虚拟机内存模型定义的访问操作与计算机十分相似】 有篇很棒的文章&#xff0c;从cpu讲到内存模型:[什么是java内存模型&#xff1f;] 在计算机中&#xff0c;cpu和内存的交互最…...

go语言 Pool实现资源池管理数据库连接资源或其他常用需要共享的资源

go Pool Pool用于展示如何使用有缓冲的通道实现资源池&#xff0c;来管理可以在任意数量的goroutine之间共享及独立使用的资源。这种模式在需要共享一组静态资源的情况&#xff08;如共享数据库连接或者内存缓冲区&#xff09;下非 常有用。如果goroutine需要从池里得到这些资…...

初级数据结构——邻接表

目录 前言一、定义与结构二、特点与性质三、构建方式四、操作与应用五、代码模版六、经典例题[1.——LCP 07. 传递信息](https://leetcode.cn/problems/chuan-di-xin-xi/description/)代码题解 [2.——547. 省份数量](https://leetcode.cn/problems/number-of-provinces/)代码题…...

思维导图+实现一个登录窗口界面

QQ2024122-205851 import sys from PyQt6.QtGui import QIcon, QPixmap, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QLineEdit, QPushButton, QLabel, QVBoxLayout# 封装我的窗口类 class LoginWidget(QWidget):# 构造函数def __init__(self):# 初始化父类su…...

多级缓存设计实践

缓存是什么&#xff1f; 缓存技术是一种用于加速数据访问的优化策略。它通过将频繁访问的数据存储在高速存储介质&#xff08;如内存&#xff09;中&#xff0c;减少对慢速存储设备&#xff08;如硬盘或远程服务器&#xff09;的访问次数&#xff0c;从而提升系统的响应速度和…...

ElasticSearch学习笔记一

目录 1.ElasticSearch-Head如何启动 2.ElasticSearch-Head创建索引 2.1创建索引时的“分片数”和“副本数”是什么意思&#xff1f; 类比 1&#xff1a;图书馆的书架与备份 类比 2&#xff1a;快递分拣中心与包裹副本 总结 ​编辑 2.2如何查看现有索引的分片数和备份数 …...

A058-基于Spring Boot的餐饮管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

代码设计:设计模式:应对变化

文章目录 概述1.拆分代码2.解耦3.扩展总结概述 代码的设计模式主要为了应对变化 三种代码设计中应对变化的方式 1.拆分代码 2.解耦 3.扩展 1.拆分代码 减小变化对代码的影响 需要拆分代码的几种情况 1.类或方法的代码量巨大,导致代码可读性降低 2.存在复杂的代码,如…...

《Vue 路由导航:打造流畅的单页应用一》

一、Vue Router 简介 Vue Router 是什么&#xff1f; Vue Router 是 Vue.js 官方提供的路由管理器&#xff0c;用于构建单页面应用并实现页面间导航。它基于 Vue 的组件系统构建&#xff0c;通过配置路由将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面…...

【xshell连接失败】

xshell用pem连接失败 Warning: Identity file ”open_api_test.ssh not accessible: No such file or directory. Warning: Identity file open_api_test2.pem not accessible: No such file or directory. Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 搞了半…...

说说Elasticsearch拼写纠错是如何实现的?

大家好&#xff0c;我是锋哥。今天分享关于【说说Elasticsearch拼写纠错是如何实现的&#xff1f;】面试题。希望对大家有帮助&#xff1b; 说说Elasticsearch拼写纠错是如何实现的&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Elasticsearch 中&…...

实例讲解MATLAB绘图坐标轴标签旋转

在进行绘图时需要在图片上添加上做标轴的标签&#xff0c;但是当数据量比较多时&#xff0c;例如一天24小时的数据&#xff0c;这时把每个小时显示在左边轴的标签上&#xff0c;文字内容放不下&#xff0c;因此需要将坐标轴标签旋转一定的角度&#xff0c;这样可以更好在图形上…...

Win10+Ubuntu20.04双系统重装Ubuntu22.04单系统

从去年 8 月美化 Ubuntu 系统后一直存在内核错误问题&#xff0c;但因为大部分功能还能正常使用&#xff0c;只是在 apt 时报错&#xff0c;所以一直逃避不想重装&#xff0c;直到最近 12 月新的开始&#xff0c;恰好设置的界面打不开得重装 gnome &#xff0c;所以下定决心重装…...

eBPF:现代Linux的强大内核扩展技术

eBPF&#xff1a;现代Linux的强大内核扩展技术 eBPF&#xff08;Extended Berkeley Packet Filter&#xff09;是一项变革性的技术&#xff0c;它为Linux内核提供了一个灵活的、可编程的方式来处理数据包过滤、网络监控、安全性和系统性能分析等多种任务。 1. eBPF简介 1.1 …...

深度学习-52-AI应用实战之基于Yolo8的目标检测自动标注

文章目录 1 YOLOv81.1 YOLOV8的不同版本1.2 可检测类别1.3 数据说明1.4 网络结构1.5 算法核心步骤2 目标检测的基本原理2.1 安装yolov8(cpu版本)2.2 图片检测2.3 视频检测2.4 自动标注2.5 保存标注结果3 参考附录1 YOLOv8 YOLOv8是一种前沿的计算机视觉技术,它基于先前YOLO版…...

人工智能工作流程概述:从数据到智能决策

目录 一、引言 二、人工智能工作流程概述 &#xff08;一&#xff09;数据收集 &#xff08;二&#xff09;数据预处理 &#xff08;三&#xff09;模型选择与设计 &#xff08;四&#xff09;模型训练 &#xff08;五&#xff09;模型评估 &#xff08;六&#xff09;模…...

Jenkins升级到最新版本后无法启动

1. 场景还原 最近在web界面将jenkins升级到最新版本后&#xff0c;后台无法启动jenkins服务&#xff0c;服务状态如下&#xff1a; 运行jenkins命令提示invalid Java version jenkins --version jenkins: invalid Java version: java version "1.8.0_202" Java(TM)…...

.net core MVC入门(三)——Product页面添加

文章目录 项目地址一、Product数据库准备 项目地址 教程作者&#xff1a;教程地址&#xff1a; 代码仓库地址&#xff1a; 所用到的框架和插件&#xff1a; dbt airflow一、Product数据库准备 添加Product的EF上下文 public DbSet<Category> Categories { get; set; …...

【Java基础】笔记

List和ArrayList区别 public class Arrays_BugDemo {public static void main(String[] args){/** List 是一个固定大小的列表&#xff0c;虽然可以进行查询操作&#xff0c;但不支持添加、删除或修改元素。* 如果需要一个可以动态修改的列表&#xff0c;可以使用 ArrayList 进…...

Docker 进阶指南:常用命令、最佳实践与资源管理

Docker 进阶指南&#xff1a;常用命令、最佳实践与资源管理 Docker 作为一种轻量级的容器化技术&#xff0c;已经成为现代软件开发和部署不可或缺的工具。本文将为您深入介绍 Docker 的常用命令、最佳实践以及如何有效管理容器资源&#xff0c;帮助您更好地在 Ubuntu 22.04 或…...

C++编写静态库

1、新建项目创建静态库staticLib1. demoStaticLib.h #pragma once class ArrayTool { public:int Max(const int* lpHead, const int nLength);int Sum(const int* lpHead, const int nLength); }; demoStaticLib.cpp #include "pch.h" #include "demoStati…...

oracle数据库日常操作

1、执行SQL语句后不显示PL/SQL procedure successfully completed set feedback off; 2、显示实例名称 echo "set sqlprompt \"_user_connect_identifier> \"" >> $ORACLE_HOME/sqlplus/admin/glogin.sql 3、客户端尝试连接到服务器时发生超时 …...

行驶证 OCR 识别API接口的影响因素

一、影响因素 (一)证件质量与图像质量 行驶证的质量对OCR 识别 API 界面的效果有重要影响。清晰的文件可以使识别系统准确地捕获文本信息&#xff0c;而模糊的文本可能会导致识别错误。而且不同地区、不同年份的行驶证在字体、排版、格式等方面可能存在差异&#xff0c;甚至可…...

什么是TCP/IP和UDP

TCP/IP和UDP都是网络协议&#xff0c;用于不同计算机或设备之间的通信。它们的作用是定义数据如何在网络上传输&#xff0c;但它们在传输方式、可靠性和效率上有显著的区别。 1. TCP/IP TCP/IP&#xff08;传输控制协议/互联网协议&#xff0c;Transmission Control Protocol…...

1074 Reversing Linked List (25)

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specif…...

layui table 纵向滚动条导致单元格表头表体错位问题

我用的时layui2.6.8版本 历史项目维护&#xff0c;bug给我让我做了&#xff0c;本来利用前端手段强解决&#xff0c;后来发现很多table 找了解决办法 打开layui-v2.6.8/lay/modules/table.js 如果打开后时压缩的代码 直接搜索 e.find(".layui-table-patch") …...

算法基础 - 求解非线性方程(牛顿法)

文章目录 1. 前言2. 牛顿迭代算法2.1. 基本思想2.2. 如何求解 x12.3. 如何求解 x22.4. 收敛性2.5. 编码实现2.5.1. 递归实现2.5.2. 非递归实现 1. 前言 前文介绍了如何使用“高斯消元法”求解线性方程组。本文秉承有始有终的态度&#xff0c;继续介绍“非线性方程”的求解算法。…...

[C#]C#实现数字到人民币大写金额的转换

在软件开发中&#xff0c;将数字转换成人民币大写形式的需求通常出现在需要生成财务报表、发票、收据、账单等正式文档的场景中。这些文档往往需要遵循一定的格式和规范&#xff0c;以确保信息的准确性和可读性&#xff0c;特别是在处理与金钱相关的数据时。 比如&#xff1a; …...

Base64.cv:高效安全的在线Base64转换工具详解

在日常开发中&#xff0c;Base64编解码是一个非常常见的需求。本文将介绍一款优秀的在线Base64转换工具&#xff1a;Base64.cv。 工具特点 1. 性能优势 采用浏览器原生API&#xff0c;转换速度快本地运算&#xff0c;无服务器延迟支持大容量文本处理 2. 安全性 纯客户端处…...

前端面试热门题(二)[html\css\js\node\vue)

Vue 性能优化的方法 Vue 性能优化的方法多种多样&#xff0c;以下是一些常用的策略&#xff1a; 使用v-show替换v-if&#xff1a;v-show是通过CSS控制元素的显示与隐藏&#xff0c;而v-if是通过操作DOM来控制元素的显示与隐藏&#xff0c;频繁操作DOM会导致性能下降。因此&am…...

施耐德电气:多维解构AI挑战,引领产业创新变革

CSDN 看到&#xff0c;大模型正在掀起一场智能化革命&#xff0c;带来计算、开发、交互三大范式全面升级和转换&#xff0c;其中 AI 计算范式正在从图灵、冯诺伊曼计算范式转为神经网络计算范式。AI 技术仍在快速发展&#xff0c;AI 算力基础设施的数据中心如果仍走“堆资源、堆…...

Unity的GPU Instancing技术

首先新建一个场景&#xff0c;添加一个相机&#xff0c;并创建一个Render Texture给相机。 然后在相机上挂载以下脚本TestBatches &#xff0c;同时脚本的Inspector面板的Mesh中选择Cube&#xff0c;另外创建一个新的材质拖动给mat&#xff1a; public class TestBatches : M…...

JVM指令集概览:基础与应用

写在文章开头 在现代软件开发中,Java 语言凭借其“一次编写,到处运行”的理念成为了企业级应用的首选之一。这一理念的背后支撑技术正是 Java 虚拟机(JVM)。JVM 是一个抽象的计算机,它实现了 Java 编程语言的各种特性,并且能够执行编译后的字节码文件。了解 JVM 的工作原…...

使用 Redis Stream 结合 Redission DelayedQueue 实现延迟消息队列(已上线生产)

一、Redis Stream 介绍 Redis Stream 是 Redis 5.0 版本新增加的数据结构&#xff0c;作为一种轻量级的消息队列&#xff0c;Redis Stream 作为一种轻量级的消息队列&#xff0c;适合资源有限或对性能要求较高的场景。 Redis Stream 主要用于消息队列&#xff08;MQ&#xff…...

时频转换 | Matlab基于递归图Reccurence Plots一维数据转二维图像方法

目录 基本介绍程序设计参考资料获取方式 基本介绍 时频转换 | Matlab基于递归图Reccurence Plots一维数据转二维图像方法 程序设计 clear clc close allfs 6400 ; % 数据采样频率 N 5120; % 信号的点数% 生成时间向量 t (0:N-1) / fs; % 生成正弦信号 x sin(2 * pi * 15…...

《手写Spring渐进式源码实践》实践笔记 (第二十一章 将ORM框架整合到Spring容器中)

文章目录 第二十一章 ORM框架整合Spring背景目标设计实现代码结构类图实现步骤 测试事先准备属性配置文件测试用例测试结果&#xff1a; 总结 第二十一章 ORM框架整合Spring 背景 MyBatis-Spring 能够实现 MyBatis 与 Spring 框架的无缝集成。它使得 MyBatis 能够参与 Spring…...