使用React复刻ThreeJS官网示例——keyframes动画

最近在看three.js相关的东西，想着学习一下threejs给的examples。源码是用html结合js写的，恰好最近也在学习react，就用react框架学习一下。

本文参考的是threeJs给的第一个示例

 three.js examples (threejs.org)

 一、下载threeJS源码

通常我们只用通过npm引入threejs的包就可以使用threejs了。为什么这里需要下载源码呢？因为我们要复刻源码给的示例，相关的模型我们是没有的，需要使用源码里用到的模型及解析工具

GitHub - mrdoob/three.js: JavaScript 3D Library.

 从git上拉取代码后可以找到示例一的源码

 阅读源码可以发现，完成示例需要引入jsm/libs/draco/gltf/路径以及models/gltf/LittlestTokyo.glb模型。

拷贝threeJS的必要的模型和方法

为了方便后续学习，我们直接将这两个文件夹jsm和models拷贝到react项目中；注意路径最好是public下，public是默认的静态资源加载入口

 

 二、功能解析与改写

react搭建及threejs引入可以参考我的之前的博客，这里不多赘述

Three.js机器人与星系动态场景：实现3D渲染与交互式控制-CSDN博客

 引入必要信息

import { useEffect, useRef } from "react";
import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

初始化Render渲染器/Scene场景/ camer相机/controls轨道控制器


// 初始化渲染器的函数
/*** 初始化 WebGL 渲染器* @returns {THREE.WebGLRenderer} 创建并配置好的渲染器实例*/
// 初始化渲染
function initRender(): THREE.WebGLRenderer {// 创建一个WebGL渲染器const renderer = new THREE.WebGLRenderer({ antialias: true });// 根据设备像素比设置渲染器像素比renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器大小renderer.setSize(window.innerWidth, window.innerHeight);return renderer;
}// 初始化场景的函数
/*** 初始化场景* @param {THREE.WebGLRenderer} renderer - 渲染器实例* @returns {THREE.Scene} 创建并配置好的场景实例*/
function initScene(renderer: THREE.WebGLRenderer) {// 创建 PMREM 生成器const pmremGenerator = new THREE.PMREMGenerator(renderer);// 创建场景const scene = new THREE.Scene();// 设置场景背景scene.background = new THREE.Color(0xbfe3dd);// 设置场景环境scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture;return scene;
}// 初始化相机的函数
/*** 初始化相机* @param {number} x - 相机在 x 轴的位置* @param {number} y - 相机在 y 轴的位置* @param {number} z - 相机在 z 轴的位置* @returns {THREE.PerspectiveCamera} 创建并配置好位置的相机实例*/
function initCamera(x: number, y: number, z: number) {const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);camera.position.set(x, y, z);return camera;
}// 初始化控制器的函数
/*** 初始化轨道控制器* @param {THREE.PerspectiveCamera} camera - 相机实例* @param {THREE.WebGLRenderer} renderer - 渲染器实例* @returns {OrbitControls} 创建并配置好的轨道控制器实例*/
function initControls(camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer) {const controls = new OrbitControls(camera, renderer.domElement);controls.update();controls.enablePan = false;controls.enableDamping = true;return controls;
}

 组件核心方法Keyframes

采用react的函数式组件写法，首字母大写作为组件名，并导出

整个流程是初始化渲染器、scene场景、camera相机、controls轨道控制器；在场景中引入模型，并使用dracoLoader解压GLTFLoader引入的模型，开启模型上的动画，设置场景动画。

/*** Keyframes 组件函数*/
function Keyframes() {const containerRef = useRef<HTMLDivElement>(null); // 创建用于引用 HTML 元素的 refconst clock = new THREE.Clock(); // 创建时钟实例const statsRef = useRef<Stats>(); // 创建用于引用统计信息的 refconst mixerRef = useRef<THREE.AnimationMixer>(); // 创建用于引用动画混合器的 refconst renderer = initRender(); // 初始化渲染器const scene = initScene(renderer); // 初始化场景const camera = initCamera(5, 2, 10); // 初始化相机const controls = initControls(camera, renderer); // 初始化控制器controls.target.set(0, 0.5, 0); // 设置控制器的目标const dracoLoader = new DRACOLoader(); // 创建 Draco 加载器dracoLoader.setDecoderPath("jsm/libs/draco/gltf/"); // 设置 Draco 解码器路径const loader = new GLTFLoader(); // 创建 GLTF 加载器loader.setDRACOLoader(dracoLoader); // 为 GLTF 加载器设置 Draco 加载器// 加载 GLTF 模型loader.load("models/gltf/LittlestTokyo.glb",(gltf: GLTF) => {const model = gltf.scene; // 获取模型的场景model.position.set(1, 1, 0); // 设置模型的位置model.scale.set(0.01, 0.01, 0.01); // 设置模型的缩放scene.add(model); // 将模型添加到场景mixerRef.current = new THREE.AnimationMixer(model); // 创建动画混合器mixerRef.current.clipAction(gltf.animations[0]).play(); // 播放动画renderer.setAnimationLoop(animate); // 设置渲染循环},undefined,(e) => {console.error(e); // 处理加载错误},);// 渲染循环函数/*** 每一帧的更新和渲染逻辑*/function animate() {const delta = clock.getDelta(); // 获取时间间隔mixerRef.current && mixerRef.current.update(delta); // 更新动画混合器controls.update(); // 更新控制器statsRef.current && statsRef.current.update(); // 更新统计信息renderer.render(scene, camera); // 渲染场景和相机}// 处理窗口大小改变的函数/*** 处理窗口大小改变时的相机和渲染器更新*/function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机的宽高比camera.updateProjectionMatrix(); // 更新相机的投影矩阵controls.update(); // 更新控制器renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器的大小}// 使用 useEffect 钩子useEffect(() => {if (!containerRef.current) return;containerRef.current.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到引用的元素中statsRef.current = new Stats(); // 创建统计信息实例containerRef.current.appendChild(statsRef.current.dom); // 将统计信息的 DOM 元素添加到引用的元素中window.addEventListener("resize", onWindowResize); // 添加窗口大小改变的监听事件return () => {window.removeEventListener("resize", onWindowResize); // 清除窗口大小改变的监听事件renderer.setAnimationLoop(null); // 清除渲染循环};}, []);return <div ref={containerRef}></div>; // 返回一个带有 ref 的 div 元素
}
export default Keyframes; // 导出 Keyframes 组件

通过<div ref={containerRef}></div> 创建一个dom元素，用于3D场景挂载

 模型加载与Draco解码

示例模型提供的是压缩后的模型，在页面加载时需要进行解压，必须使用dracoLoader方法，设置解码方法所在路径。在通过GLTFLoader导入。示例如下：

const dracoLoader = new DRACOLoader(); // 创建 Draco 加载器dracoLoader.setDecoderPath("jsm/libs/draco/gltf/"); // 设置 Draco 解码器路径const loader = new GLTFLoader(); // 创建 GLTF 加载器loader.setDRACOLoader(dracoLoader); // 为 GLTF 加载器设置 Draco 加载器// 加载 GLTF 模型loader.load("models/gltf/LittlestTokyo.glb",(gltf: GLTF) => {//处理模型},undefined,(e) => {console.error(e); // 处理加载错误},);

AnimationMixer 动画混合器 

AnimationMixer动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。

  • 参数：rootObject 混合器播放的动画所属的对象。就是包含动画模型的场景对象。
  • 常用参数和属性：
  1. .time 全局的混合器时间。
  2. .clipAction(AnimationClip) 返回所传入的剪辑参数的AnimationAction对象。AnimationAction用来调度存储在AnimationClip中的动画。
  • AnimationClip 动画剪辑，是一个可重用的关键帧轨道集，它代表动画。
  1. .getRoot() 返回混合器的根对象。
  2. .update() 推进混合器时间并更新动画。在渲染函数中调用更新动画。

 在我们的示例中模型加载到场景时默认时没有动画的，也就是模型自身的动画比如小火车和风扇小人都是不动的。

 在模型加载的时候通过AnimationMixer开启模型动画

  // 加载 GLTF 模型loader.load("models/gltf/LittlestTokyo.glb",(gltf: GLTF) => {const model = gltf.scene; // 获取模型的场景model.position.set(1, 1, 0); // 设置模型的位置model.scale.set(0.01, 0.01, 0.01); // 设置模型的缩放scene.add(model); // 将模型添加到场景mixerRef.current = new THREE.AnimationMixer(model); // 创建动画混合器mixerRef.current.clipAction(gltf.animations[0]).play(); // 播放动画renderer.setAnimationLoop(animate); // 设置渲染循环},undefined,(e) => {console.error(e); // 处理加载错误},);
setAnimationLoop动画循环  

在Three.js中，setAnimationLoop 方法是用来设置一个函数，这个函数会在每一帧被调用来进行渲染。这是必须的，因为在Three.js中，渲染循环不是自动开始的，你需要告诉渲染器何时以及如何进行渲染。

以下是为什么加载模型时必须使用 setAnimationLoop 的一些原因：

  1. 渲染控制：通过 setAnimationLoop，你可以控制渲染循环的开始和结束。如果你不设置它，即使模型加载完成，也不会自动开始渲染过程。

  2. 动画播放：在你的代码中，你使用了 AnimationMixer 来播放模型中的动画。这个动画需要在每一帧更新，以确保动画的连贯性和流畅性。setAnimationLoop 允许你在每一帧更新动画状态。

  3. 性能优化：使用 setAnimationLoop 可以让你在不需要渲染的时候停止渲染，比如在浏览器标签页不可见时，这样可以节省资源并提高性能。

  4. 逻辑更新：在 animate 函数中，你可以执行除了渲染之外的其他逻辑，比如更新动画、控制器和统计信息等。这些更新是渲染过程的一部分，需要在每一帧进行。

如果你不使用 setAnimationLoop，你需要自己手动创建一个循环来不断调用 renderer.render(scene, camera)，并且确保在合适的时机更新动画和其他逻辑。这通常是通过 requestAnimationFrame 函数来实现的，但Three.js提供了 setAnimationLoop 来简化这一过程。

总之，setAnimationLoop 是Three.js中用来启动和维持渲染循环的关键方法，特别是在涉及到动画的情况下，它是必须的。

 可以看到模型自身的多个动画都动起来了

Stats.js帧检测工具 

不管是做游戏还是做普通网页，在这个时代基本都离不开动画。说到动画，第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。

示例程序的左上角有个工具窗口持续监测FPS数值 

FPS是“Frames Per Second”的缩写，意为“每秒帧数”。在视频游戏和计算机图形学中，FPS用来衡量显示设备每秒钟能够显示的静止图像（帧）的数量。这个数值越高，表示图像更新得越快，视觉效果就越流畅。

在游戏领域，高FPS通常意味着更平滑的游戏体验，尤其是在快速移动或复杂场景中。然而，FPS并不是唯一影响游戏体验的因素，图像质量、响应时间和系统稳定性也同样重要。

一般来说，人眼能够感知到的流畅动画大约需要30FPS以上，而60FPS或更高则被认为是高质量游戏体验的标准。不过，这也取决于个人的视觉感知能力和对流畅度的要求。

用法 

在使用 npm install three 下载的依赖包中已经包含了 Stats.js 了

可以这样引入到项目中

import Stats from "three/examples/jsm/libs/stats.module.js";

通过new Stats()方法创建一个stats实例 。默认showPanel是0，显示FPS面板。

 通过showPanel方法切换显示方式；可以根据dom改变stats面板的位置，使用示例如下

    const statsRef = useRef<Stats>(); // 创建用于引用统计信息的 refstatsRef.current = new Stats(); // 创建统计信息实例statsRef.current.showPanel(1);statsRef.current.dom.style.position = "absolute"; // 设置统计信息的 DOM 元素的位置statsRef.current.dom.style.top = "0px"; // 设置统计信息的 DOM 元素的位置statsRef.current.dom.style.left = "0px"; // 设置统计信息的 DOM 元素的位置

通过操作dom的方式将stats节点追加到3D场景中

    containerRef.current.appendChild(statsRef.current.dom); // 将统计信息的 DOM 元素添加到引用的元素中

 默认就显示在屏幕的左上角

当点击该面板时还可以切换监听的类型

 响应式窗口

页面加载时给了初始的renderer的宽高，但是如果用户使用过程中可视区域发生了变化renderer无法自动使用屏幕

 可以在useEffect里通过事件监听浏览器的resize事件，当浏览器尺寸变化时重新以最新的宽高设为renderer的尺寸信息

  // 处理窗口大小改变的函数/*** 处理窗口大小改变时的相机和渲染器更新*/function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机的宽高比camera.updateProjectionMatrix(); // 更新相机的投影矩阵controls.update(); // 更新控制器renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器的大小}// 使用 useEffect 钩子useEffect(() => {if (!containerRef.current) return;containerRef.current.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到引用的元素中statsRef.current = new Stats(); // 创建统计信息实例containerRef.current.appendChild(statsRef.current.dom); // 将统计信息的 DOM 元素添加到引用的元素中window.addEventListener("resize", onWindowResize); // 添加窗口大小改变的监听事件return () => {window.removeEventListener("resize", onWindowResize); // 清除窗口大小改变的监听事件renderer.setAnimationLoop(null); // 清除渲染循环};}, []);

完整代码 

import { useEffect, useRef } from "react";
import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";// 初始化渲染器的函数
/*** 初始化 WebGL 渲染器* @returns {THREE.WebGLRenderer} 创建并配置好的渲染器实例*/
// 初始化渲染
function initRender(): THREE.WebGLRenderer {// 创建一个WebGL渲染器const renderer = new THREE.WebGLRenderer({ antialias: true });// 根据设备像素比设置渲染器像素比renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器大小renderer.setSize(window.innerWidth, window.innerHeight);return renderer;
}// 初始化场景的函数
/*** 初始化场景* @param {THREE.WebGLRenderer} renderer - 渲染器实例* @returns {THREE.Scene} 创建并配置好的场景实例*/
function initScene(renderer: THREE.WebGLRenderer) {// 创建 PMREM 生成器const pmremGenerator = new THREE.PMREMGenerator(renderer);// 创建场景const scene = new THREE.Scene();// 设置场景背景scene.background = new THREE.Color(0xbfe3dd);// 设置场景环境scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture;return scene;
}// 初始化相机的函数
/*** 初始化相机* @param {number} x - 相机在 x 轴的位置* @param {number} y - 相机在 y 轴的位置* @param {number} z - 相机在 z 轴的位置* @returns {THREE.PerspectiveCamera} 创建并配置好位置的相机实例*/
function initCamera(x: number, y: number, z: number) {const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);camera.position.set(x, y, z);return camera;
}// 初始化控制器的函数
/*** 初始化轨道控制器* @param {THREE.PerspectiveCamera} camera - 相机实例* @param {THREE.WebGLRenderer} renderer - 渲染器实例* @returns {OrbitControls} 创建并配置好的轨道控制器实例*/
function initControls(camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer) {const controls = new OrbitControls(camera, renderer.domElement);controls.update();controls.enablePan = false;controls.enableDamping = true;return controls;
}/*** Keyframes 组件函数*/
function Keyframes() {const containerRef = useRef<HTMLDivElement>(null); // 创建用于引用 HTML 元素的 refconst clock = new THREE.Clock(); // 创建时钟实例const statsRef = useRef<Stats>(); // 创建用于引用统计信息的 refconst mixerRef = useRef<THREE.AnimationMixer>(); // 创建用于引用动画混合器的 refconst renderer = initRender(); // 初始化渲染器const scene = initScene(renderer); // 初始化场景const camera = initCamera(5, 2, 10); // 初始化相机const controls = initControls(camera, renderer); // 初始化控制器controls.target.set(0, 0.5, 0); // 设置控制器的目标const dracoLoader = new DRACOLoader(); // 创建 Draco 加载器dracoLoader.setDecoderPath("jsm/libs/draco/gltf/"); // 设置 Draco 解码器路径const loader = new GLTFLoader(); // 创建 GLTF 加载器loader.setDRACOLoader(dracoLoader); // 为 GLTF 加载器设置 Draco 加载器// 加载 GLTF 模型loader.load("models/gltf/LittlestTokyo.glb",(gltf: GLTF) => {const model = gltf.scene; // 获取模型的场景model.position.set(1, 1, 0); // 设置模型的位置model.scale.set(0.01, 0.01, 0.01); // 设置模型的缩放scene.add(model); // 将模型添加到场景mixerRef.current = new THREE.AnimationMixer(model); // 创建动画混合器mixerRef.current.clipAction(gltf.animations[0]).play(); // 播放动画renderer.setAnimationLoop(animate); // 设置渲染循环},undefined,(e) => {console.error(e); // 处理加载错误},);// 渲染循环函数/*** 每一帧的更新和渲染逻辑*/function animate() {const delta = clock.getDelta(); // 获取时间间隔mixerRef.current && mixerRef.current.update(delta); // 更新动画混合器controls.update(); // 更新控制器statsRef.current && statsRef.current.update(); // 更新统计信息renderer.render(scene, camera); // 渲染场景和相机}// 处理窗口大小改变的函数/*** 处理窗口大小改变时的相机和渲染器更新*/function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机的宽高比camera.updateProjectionMatrix(); // 更新相机的投影矩阵controls.update(); // 更新控制器renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器的大小}// 使用 useEffect 钩子useEffect(() => {if (!containerRef.current) return;containerRef.current.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到引用的元素中statsRef.current = new Stats(); // 创建统计信息实例containerRef.current.appendChild(statsRef.current.dom); // 将统计信息的 DOM 元素添加到引用的元素中window.addEventListener("resize", onWindowResize); // 添加窗口大小改变的监听事件return () => {window.removeEventListener("resize", onWindowResize); // 清除窗口大小改变的监听事件renderer.setAnimationLoop(null); // 清除渲染循环};}, []);return <div ref={containerRef}></div>; // 返回一个带有 ref 的 div 元素
}export default Keyframes; // 导出 Keyframes 组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/40572.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【接口自动化测试】第四节.实现项目核心业务的单接口自动化测试

【接口自动化测试】第四节.实现项目核心业务的单接口自动化测试

文章目录 前言一、登录单接口自动化测试 1.1 登录单接口文档信息 1.2 登录成功 1.3 登录失败&#xff08;用户名为空&#xff09;二、数据驱动的实现 2.1 json文件实现数据驱动三、课程添加单接口自动化测试 3.1 课程添加单接口文档信息 3.2 课程…
阅读更多...
Promethuse-监控 Etcd

Promethuse-监控 Etcd

一、思路 Prometheus监控Etcd集群&#xff0c;是没有对应的exporter&#xff0c;而 由CoreOS公司开发的Operator&#xff0c;用来扩展 Kubernetes API&#xff0c;特定的应用程序控制器&#xff0c;它用来创建、配置和管理复杂的有状态应用&#xff0c;如数据库、缓存和监控系…
阅读更多...
软件性能测试有哪几种测试方法?专业性能测试报告出具

软件性能测试有哪几种测试方法?专业性能测试报告出具

软件性能测试是指对软件系统在特定负载条件下的性能进行评估和验证的过程&#xff0c;目的是确保软件在正常使用的情况下能够满足用户的要求&#xff0c;并在稳定的性能水平下运行&#xff0c;在软件开发过程中起到了至关重要的作用&#xff0c;可以确保软件产品的质量和可靠性…
阅读更多...
【Android面试八股文】你是怎么保证Android设备的时间与服务器时间同步的？（使用NTP和TrueTime方案）

【Android面试八股文】你是怎么保证Android设备的时间与服务器时间同步的？（使用NTP和TrueTime方案）

文章目录 一、网络时间协议（NTP）二、使用网络时间协议（NTP）2.1 使用系统提供的 NTP 服务器2.2 使用TrueTime2.2.1 引入TrueTime库2.2.2 初始化 TrueTime2.2.3 用法2.2.4 使用 TrueTime 获取时间2.2.4 自动更新时间2.2.5 注意事项二. 使用 HTTP 请求获取服务器时间2.1. 发送…
阅读更多...
【unity实战】使用Unity实现动作游戏的攻击 连击 轻重攻击和打击感

【unity实战】使用Unity实现动作游戏的攻击 连击 轻重攻击和打击感

最终效果 文章目录 最终效果前言素材下载&#xff1a;玩家移动跳跃控制攻击动画配置轻攻击重攻击 攻击时禁止移动和攻击移动补偿敌人击退和播放受击动画受击特效攻击停顿和屏幕震动局部顿帧&#xff08;补充&#xff09;参考源码完结 前言 注意本文为自己的学习记录笔记&#…
阅读更多...
Android平台崩溃和 ANR 问题进行符号化解析、解析崩溃日志的内存地址

Android平台崩溃和 ANR 问题进行符号化解析、解析崩溃日志的内存地址

使用Android Logcat Stacktrace Utility | Android Logcat | 1.2.3 1.设置so库路径 2.打开Stacktrace Utility工具 3.在Original粘贴报错内存地址 4.点击Resolve Stacktraces，就会解析出内存地址 如果是红色，解析失败了，缺少原生so库，可以在第一步添加so库文件再次尝试…
阅读更多...
c语言回顾-内存操作函数

c语言回顾-内存操作函数

目录 前言 1.memcpy 函数 1.1函数介绍 1.2与strcpy的区别 1.3memcpy的模拟 2.memmove 函数 2.1函数介绍和使用 2.2函数的模拟 3.memset函数 3.1函数介绍 3.2函数的模拟 4.memcmp函数 4.1函数的使用 4.2函数的模拟 结束语 前言 在动态内存的章节中小编详细讲解了动…
阅读更多...
代码随想录算法训练营第69天：图论7[1]

代码随想录算法训练营第69天：图论7[1]

代码随想录算法训练营第69天&#xff1a;图论7 109. 冗余连接II 卡码网题目链接&#xff08;ACM模式&#xff09;(opens new window) 题目描述 有向树指满足以下条件的有向图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节…
阅读更多...
【Arduino】ESP8266开发环境配置（图文）

【Arduino】ESP8266开发环境配置（图文）

ESP8266与ESP32开发很类似&#xff0c;相当于是低配版本的ESP32&#xff0c;其同样具有无线网络连接能力&#xff0c;功能强大&#xff0c;而且价格比ESP32更具有优势。接下来我们就来设置一下ESP8266的开发环境。 使用Arduino开发平台软件&#xff0c;选择首选项进行设置。 h…
阅读更多...
ASP.NET Core 6.0 使用 Action过滤器

ASP.NET Core 6.0 使用 Action过滤器

Action过滤器 在ASP.NET Core中&#xff0c;Action过滤器用于在执行Action方法之前或之后执行逻辑。你可以创建自定义的Action过滤器来实现这一点。 继承 ActionFilterAttribute 类&#xff1a; [TypeFilter(typeof(CustomAllActionResultFilterAttribute))]public IActionRe…
阅读更多...
67.WEB渗透测试-信息收集- WAF、框架组件识别（7）

67.WEB渗透测试-信息收集- WAF、框架组件识别（7）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;66.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;6&#xff09;-CSDN博客 关于w…
阅读更多...
第四届数字安全大会：AI时代数据安全策略与天空卫士创新实践

第四届数字安全大会：AI时代数据安全策略与天空卫士创新实践

2024年6月22日&#xff0c;以 “新质•真能力”为主题的第四届数字安全大会在北京隆重召开。这场由数世咨询和CIO时代联合主办的行业盛会&#xff0c;集中探讨了大模型、数据治理与流通、以及安全运营等当前最前沿的议题。大会吸引了来自不同行业的首席信息官&#xff08;CIO&a…
阅读更多...
2024Datawhale-AI夏令营——机器学习挑战赛——学习笔记

2024Datawhale-AI夏令营——机器学习挑战赛——学习笔记

#ai夏令营#datawhale#夏令营 Day1:入门级demo运行 这个其实比较简单&#xff0c;按照操作来做就行了&#xff0c;特征工程和调参暂时都没有做&#xff0c;后续的才是重头戏。 Day2:正式比赛开始 赛题&#xff1a;数据挖掘赛道——利用机器学习方法根据给定的特征判断PROTACs…
阅读更多...
【EFK】efk 8收集docker容器日志测试

【EFK】efk 8收集docker容器日志测试

前言 目前&#xff0c;efk 全家桶已经更新到版本8 了&#xff0c;本章节我们使用8版本的elk搭建日志收集系统&#xff0c;了解它的配置运行过程&#xff0c;方便以后在更复杂的环境中更好的使用。 版本默认就是8最新的&#xff0c;也可以自己指定其他8的版本 elasticsearch: …
阅读更多...
vs 远程链接ssh 开发 简单实验

vs 远程链接ssh 开发 简单实验

1.概要 动态编译语言&#xff0c;跨平台必须做分别的编译&#xff0c;比如linux和windows。如何再windows环境下开发编译出linux平台的程序呢&#xff0c;vs支持远程链接编辑&#xff0c;就是再vs中写代码&#xff0c;但是编译确是链接远程的环境编译的。 2.环境准备 2.1 vs…
阅读更多...
R语言学习，入门

R语言学习，入门

我是一名6年开发经验的程序员&#xff0c;后端&#xff0c;大数据&#xff0c;前端都会。 现在加入了医疗行业&#xff0c;要做数据分析&#xff0c;前同事的实验室生信专业的&#xff0c;用的是R语言&#xff0c;为了跑通他的程序。就来学一下吧&#xff0c;看了一下好像挺简…
阅读更多...
关于软件本地化，您应该了解什么？

关于软件本地化，您应该了解什么？

软件本地化是调整软件应用程序以满足目标市场的语言、文化和技术要求的过程。它不仅仅涉及翻译用户界面&#xff1b;它包含一系列活动&#xff0c;以确保软件在目标语言环境中可用且相关。以下是您应该了解的有关软件本地化的一些关键方面&#xff1a; 了解范围 软件本地化是…
阅读更多...
水利水电安全员C证考试题库资料，2024年全国考试通用！

水利水电安全员C证考试题库资料，2024年全国考试通用！

1.安全生产民事责任&#xff0c;是指责任主体违反安全生产法律规定造成&#xff08;&#xff09;&#xff0c;由人民法院依照民事法律强制其行使民事赔偿的一种法律责任。民事责任追究的目的是为了最大限度的维护当事人受到民事损害时享有获得民事赔偿的权利。 A.民事损伤 B.…
阅读更多...
针对SVN、GIT版本管理工具进行源代码加密保护

针对SVN、GIT版本管理工具进行源代码加密保护

针对SVN、GIT版本管理工具进行源代码加密保护 在软件开发过程中&#xff0c;版本管理工具如SVN和GIT是不可或缺的组成部分&#xff0c;它们帮助团队管理源代码的变更和版本。然而&#xff0c;这些工具也面临着源代码泄露的安全风险。如果不针对数据进行加密保护&#xff0c;很…
阅读更多...
如何从腾讯云迁移到AWS

如何从腾讯云迁移到AWS

随着跨境出海潮不断扩大&#xff0c;企业越来越意识到将工作负载迁移到海外节点的必要性&#xff0c;以获取更多功能、灵活性和性能。然而&#xff0c;顺利迁移业务主机并确保业务稳定访问是一项具有挑战性的任务。在此挑战中&#xff0c;借助AWS迁移工具和迁移流程的强大支持&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023