threejs(7)-精通粒子特效

一、初识Points与点材质

在这里插入图片描述

// 设置点材质
const pointsMaterial = new THREE.PointsMaterial(); 
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";// 目标:认识pointesconst gui = new dat.GUI();
// 1、创建场景
const scene = new THREE.Scene();// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);// 创建球几何体
const sphereGeometry = new THREE.SphereBufferGeometry(3, 30, 30);
delete sphereGeometry.attributes.uv;
// const material = new THREE.MeshBasicMaterial({
//   color: 0xff0000,
//   wireframe: true,
// });
// const mesh = new THREE.Mesh(sphereGeometry, material);
// scene.add(mesh);// 设置点材质
const pointsMaterial = new THREE.PointsMaterial(); 
pointsMaterial.size = 0.1;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;// 载入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/2.png");
// 设置点材质纹理
pointsMaterial.map = texture;
pointsMaterial.alphaMap = texture;
pointsMaterial.transparent = true;
pointsMaterial.depthWrite = false;
pointsMaterial.blending = THREE.AdditiveBlending;const points = new THREE.Points(sphereGeometry, pointsMaterial);scene.add(points);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();function render() {let time = clock.getElapsedTime();controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();// 监听画面变化,更新渲染画面
window.addEventListener("resize", () => {//   console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});

二、深度解析点材质属性

在这里插入图片描述

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";// 目标:认识pointesconst gui = new dat.GUI();
// 1、创建场景
const scene = new THREE.Scene();// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);// 创建球几何体
const sphereGeometry = new THREE.SphereBufferGeometry(3, 30, 30);
// const material = new THREE.MeshBasicMaterial({
//   color: 0xff0000,
//   wireframe: true,
// });
// const mesh = new THREE.Mesh(sphereGeometry, material);
// scene.add(mesh);// 设置点材质
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.1;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;// 载入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/2.png");
// 设置点材质纹理
pointsMaterial.map = texture;
pointsMaterial.alphaMap = texture;
pointsMaterial.transparent = true; // 允许透明
pointsMaterial.depthWrite = false; // 叠加时使用
pointsMaterial.blending = THREE.AdditiveBlending; // 例子重合之后颜色叠加const points = new THREE.Points(sphereGeometry, pointsMaterial);scene.add(points);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();function render() {let time = clock.getElapsedTime();controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();// 监听画面变化,更新渲染画面
window.addEventListener("resize", () => {//   console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});

三、应用顶点着色打造绚丽多彩的星空

在这里插入图片描述

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";// 目标:使用pointes设置随机顶点打造星河const gui = new dat.GUI();
// 1、创建场景
const scene = new THREE.Scene();// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);const particlesGeometry = new THREE.BufferGeometry();
const count = 5000;// 设置缓冲区数组
const positions = new Float32Array(count * 3);
// 设置粒子顶点颜色
const colors = new Float32Array(count * 3);
// 设置顶点
for (let i = 0; i < count * 3; i++) {positions[i] = (Math.random() - 0.5) * 100;colors[i] = Math.random();
}
particlesGeometry.setAttribute("position",new THREE.BufferAttribute(positions, 3)
);
particlesGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));// 设置点材质
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.5;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;// 载入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/zs2.png");
// 设置点材质纹理
pointsMaterial.map = texture;
pointsMaterial.alphaMap = texture;
pointsMaterial.transparent = true;
pointsMaterial.depthWrite = false;
pointsMaterial.blending = THREE.AdditiveBlending;
// 设置启动顶点颜色
pointsMaterial.vertexColors = true;const points = new THREE.Points(particlesGeometry, pointsMaterial);scene.add(points);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();function render() {let time = clock.getElapsedTime();controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();// 监听画面变化,更新渲染画面
window.addEventListener("resize", () => {//   console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});import * as THREE from "three";
import { texture, equirectUV } from "three/nodes";import WebGPU from "three/addons/capabilities/WebGPU.js";
import WebGPURenderer from "three/addons/renderers/webgpu/WebGPURenderer.js";import { OrbitControls } from "three/addons/controls/OrbitControls.js";if (WebGPU.isAvailable() === false) {document.body.appendChild(WebGPU.getErrorMessage());throw new Error("No WebGPU support");
}const container = document.createElement("div");
document.body.appendChild(container);camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.25,20
);
camera.position.set(1, 0, 0);const equirectTexture = new THREE.TextureLoader().load("textures/2294472375_24a3b8ef46_o.jpg"
);
equirectTexture.flipY = false;scene = new THREE.Scene();
scene.backgroundNode = texture(equirectTexture, equirectUV(), 0);function render() {controls.update();renderer.render(scene, camera);
}renderer = new WebGPURenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(render);
container.appendChild(renderer.domElement);controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.rotateSpeed = -0.125; // negative, to track mouse pointer
controls.autoRotateSpeed = 1.0;window.addEventListener("resize", onWindowResize);function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
}

四、通过封装与相机裁剪实现漫天飞舞的雪花

在这里插入图片描述
雪花纷飞的效果可以使用旋转模拟

function render() {let time = clock.getElapsedTime();points.rotation.x = time * 0.3;points2.rotation.x = time * 0.5;points2.rotation.y = time * 0.4;points3.rotation.x = time * 0.2;points3.rotation.y = time * 0.2;controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";// 目标:设置漫天的雪花const gui = new dat.GUI();
// 1、创建场景
const scene = new THREE.Scene();// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,30
);// 设置相机位置
camera.position.set(0, 0, 40);
scene.add(camera);function createPoints(url, size = 0.5) {const particlesGeometry = new THREE.BufferGeometry();const count = 10000;// 设置缓冲区数组const positions = new Float32Array(count * 3);// 设置粒子顶点颜色const colors = new Float32Array(count * 3);// 设置顶点for (let i = 0; i < count * 3; i++) {positions[i] = (Math.random() - 0.5) * 100;colors[i] = Math.random();}particlesGeometry.setAttribute("position",new THREE.BufferAttribute(positions, 3));particlesGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));// 设置点材质const pointsMaterial = new THREE.PointsMaterial();pointsMaterial.size = 0.5;pointsMaterial.color.set(0xfff000);// 相机深度而衰减pointsMaterial.sizeAttenuation = true;// 载入纹理const textureLoader = new THREE.TextureLoader();const texture = textureLoader.load(`./textures/particles/${url}.png`);// 设置点材质纹理pointsMaterial.map = texture;pointsMaterial.alphaMap = texture;pointsMaterial.transparent = true;pointsMaterial.depthWrite = false;pointsMaterial.blending = THREE.AdditiveBlending;// 设置启动顶点颜色pointsMaterial.vertexColors = true;const points = new THREE.Points(particlesGeometry, pointsMaterial);scene.add(points);return points;
}const points = createPoints("1", 1.5);
const points2 = createPoints("xh", 1);
const points3 = createPoints("xh", 2);// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();function render() {let time = clock.getElapsedTime();points.rotation.x = time * 0.3;points2.rotation.x = time * 0.5;points2.rotation.y = time * 0.4;points3.rotation.x = time * 0.2;points3.rotation.y = time * 0.2;controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();// 监听画面变化,更新渲染画面
window.addEventListener("resize", () => {//   console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});

五、运用数学知识打造复杂形状臂旋星系

在这里插入图片描述

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";// 目标:运用数学知识设计特定形状的星系const gui = new dat.GUI();
// 1、创建场景
const scene = new THREE.Scene();// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,30
);const textureLoader = new THREE.TextureLoader();
const particlesTexture = textureLoader.load("./textures/particles/1.png");
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);const params = {count: 10000,size: 0.1,radius: 5,branch: 3,color: "#ff6030",rotateScale: 0.3,endColor: "#1b3984",
};let geometry = null;
let material = null;
let points = null;
const centerColor = new THREE.Color(params.color);
const endColor = new THREE.Color(params.endColor);
const generateGalaxy = () => {// 生成顶点geometry = new THREE.BufferGeometry();//   随机生成位置和const positions = new Float32Array(params.count * 3);// 设置顶点颜色const colors = new Float32Array(params.count * 3);//   循环生成点for (let i = 0; i < params.count; i++) {//   当前的点应该在哪一条分支的角度上const branchAngel = (i % params.branch) * ((2 * Math.PI) / params.branch);// 当前点距离圆心的距离const distance = Math.random() * params.radius * Math.pow(Math.random(), 3);const current = i * 3;const randomX =(Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance)) / 5;const randomY =(Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance)) / 5;const randomZ =(Math.pow(Math.random() * 2 - 1, 3) * (params.radius - distance)) / 5;// const randomX = (Math.pow(Math.random() * 2 - 1, 3) * distance) / 5;// const randomY = (Math.pow(Math.random() * 2 - 1, 3) * distance) / 5;// const randomZ = (Math.pow(Math.random() * 2 - 1, 3) * distance) / 5;positions[current] =Math.cos(branchAngel + distance * params.rotateScale) * distance +randomX;positions[current + 1] = 0 + randomY;positions[current + 2] =Math.sin(branchAngel + distance * params.rotateScale) * distance +randomZ;// 混合颜色,形成渐变色const mixColor = centerColor.clone();mixColor.lerp(endColor, distance / params.radius);colors[current] = mixColor.r;colors[current + 1] = mixColor.g;colors[current + 2] = mixColor.b;}geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));//   设置点材质material = new THREE.PointsMaterial({// color: new THREE.Color(params.color),size: params.size,sizeAttenuation: true,depthWrite: false,blending: THREE.AdditiveBlending,map: particlesTexture,alphaMap: particlesTexture,transparent: true,vertexColors: true,});points = new THREE.Points(geometry, material);scene.add(points);
};
generateGalaxy();// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera);// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();function render() {let time = clock.getElapsedTime();controls.update();renderer.render(scene, camera);//   渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}render();// 监听画面变化,更新渲染画面
window.addEventListener("resize", () => {//   console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});

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

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

相关文章

Linux云服务器限制ip进行ssh远程连接

对Linux云服务器限制IP进行SSH远程连接的原因主要有以下几点&#xff1a; 增加安全性&#xff1a;SSH是一种加密的网络传输协议&#xff0c;可以保护数据的机密性和完整性。通过限制SSH连接的IP地址&#xff0c;可以防止未经授权的访问和数据泄露。只有拥有访问权限的IP地址才…

Makefile三个版本的编写

1.Makefile Makefile是一个工程管理文件&#xff0c;简化编译的流程&#xff0c;完成自动化编译的过程 在Makefile中&#xff0c;会把编译的过程分为两步&#xff0c;先生成.o文件&#xff0c;再对.o文件链接&#xff0c;生成可执行文件 Makefile由变量、函数、和规则构成 2.引…

分治算法解决归并排序问题

分治算法定义&#xff1a;分治算法是一种问题解决方法&#xff0c;它将一个大问题划分为多个相同或相似的子问题&#xff0c;然后递归地解决这些子问题&#xff0c;最后将子问题的解合并得到原问题的解 作用&#xff1a; 排序算法分治算法在排序算法中得到广泛应用。例如&…

辅助驾驶功能开发-执行器篇(03)-Mobileye Control Requirements

1. 目的 本文描述了产品开发不同阶段(研发、验证和产品化)车辆集成的控制要求。 2. 控制接口要求 2.1 接口类型 控制模块与车辆之间的接口应基于CAN协议或Flexray协议。 2.2 通讯频率 控制模块与车辆之间的通讯频率应高于36Hz。通信频率优先选择为 50 Hz。 2.3 延迟 所有…

STM32 APP跳转到Bootloader

stm32 app跳转到bootloade 【STM32】串口IAP功能的实现&#xff0c;BootLoader与App相互跳转 STM32 从APP跳入BootLoader问题

一、基础算法精讲:双指针

目录 1、相向双指针 11.1 两数之和 II - 输入有序数组1.2 三数之和1.3 最接近的三数之和1.4 四数之和1.5 统计和小于目标的下标对数目1.6 有效三角形的个数 2、相向双指针 22.1 盛最多水的容器2.2 接雨水 3、同向双指针&#xff1a;滑动窗口&#xff08;区间大小可变&#xff0…

docker docker-compose安装(centos7)

docker安装 1.卸载旧版 卸载旧版 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2.安装一个yum工具 yum install -y yum-utils3.配置docker的yum源 yum-config-manager -…

vulnhub_DeRPnStiNK靶机渗透测试

VulnHub2018_DeRPnStiNK靶机 https://www.vulnhub.com/entry/derpnstink-1,221/ flag1(52E37291AEDF6A46D7D0BB8A6312F4F9F1AA4975C248C3F0E008CBA09D6E9166) flag2(a7d355b26bda6bf1196ccffead0b2cf2b81f0a9de5b4876b44407f1dc07e51e6) flag4(49dca65f362fee401292ed7ada96f9…

ResNet简单解释

什么是Resnet&#xff1f; resnet是一种残差网络&#xff0c;简单看一下resnet的结构 上面是ResNet&#xff0c;下面是传统的 ResNet里的一小块就是这样的 为什么要引入ResNet&#xff1f; 理论上讲&#xff0c;随着网络加深&#xff0c;我们获取的信息越来越多多&#xff0…

WordPress主题模板 大前端D8 5.1版本完整开源版源码简洁大气多功能配置

源码测评&#xff1a;该模板官方已更新至5.2&#xff0c;但是这个5.1也是非常好用的&#xff0c;经测试所有页面均完好&#xff0c;推荐下载使用。 模板简介&#xff1a; 大前端D8 主题是一款非常牛逼的WordPress博客主题,响应式,功能齐全,支持手机,电脑,平板,非常适合做博客站…

​iOS安全加固方法及实现

目录 iOS安全加固方法及实现 摘要 引言 iOS安全加固方法及实现 一、字符串加密 二、类名方法名混淆 三、程序代码混淆 四、加入安全SDK 总结 参考资料 摘要 本文介绍了iOS平台下的应用安全保护方法&#xff0c;包括字符串加密、类名方法名混淆、程序代码混淆和加入安全…

User CSS 在性能优化方面的实践

目录 前言 1. 减少重绘和回流 1.1 用法 1.2 代码示例 1.3 理解 2. 使用CSS精灵 2.1 用法 2.2 代码示例 2.3 理解 3. 压缩CSS文件 3.1 用法 3.2 代码示例 3.3 理解 4. 使用媒体查询进行响应式设计 4.1 用法 4.2 代码示例 4.3 理解 5. 使用CSS预处理器和构建工…

2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 A题 海上丝绸之路发展战略的影响 原题再现 一带一路不是实体或机制&#xff0c;而是合作与发展的理念和主张。凭借现有有效的区域合作平台&#xff0c;依托中国与有关国家现有的双边和多边机制&#xff0c;利用古丝绸之路的历史象征&#xff0…

深度学习标注工具(包括自动标注)总结——持续更新

首次记录日期2023年10月24日 名称 导出格式支持形状地址1 anylabeling 支持yolov5和v8&#xff0c;自动标注的软件 沿物体轮廓分割 https://github.com/vietanhdev/anylabeling 2 RectLabel 使用Core ML模型自动标记图像 对象、属性、热键和快速标签的设置。 以PASCAL VOC …

【跟小嘉学 Rust 编程】三十三、Rust的Web开发框架之一: Actix-Web的基础

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…

定义USB接口,鼠标类和键盘类都可以作为实现类去实现USB接口

目录 程序设计 程序分析 系列文章 ​ 如图所示,我们电脑上都有USB接口,当我们的鼠标和键盘插上去之后才可以使用,拔出来就关闭使用。其实具体是什么USB设备,笔记本并不关心,只要符合USB规格的设备都可以。鼠标和键盘要想能在电脑上使用,那么鼠标和键盘也必须遵守USB规范…

专家级数据恢复:UFS Explorer Professional Recovery Crack

UFS Explorer Professional Recovery - 一款功能强大且方便的数据恢复程序&#xff0c;支持检测大量文件系统、操作系统和各种类型的驱动器&#xff1a;从简单的闪存驱动器到复杂的复合存储&#xff08;各种级别的 RAID 阵列&#xff09;。 该程序由执业专家开发&#xff0c;并…

可以用商城源码做什么?

商城源码是一个基于电子商务流程的现代化的商城网站程序。它提供了一个完整的电子商务解决方案&#xff0c;包括产品目录、购物车、结账、订单和付款等功能。商城源码可以用于创建各种类型的电子商务网站&#xff0c; 在这篇文章中&#xff0c;我将介绍商城源码可能带来的各种…

【VUE】ArcoDesign之自定义主题样式和命名空间

前言 Arco Design是什么&#xff1f; Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址&#xff1a;https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案&#xff1a;Arco Design Pro(https://pro.arco.design/) Arco De…

怎么从休学证明中取出休学原因(python自动化办公,涉及word和excel)

怎么从休学证明中取出休学原因&#xff08;python自动化办公&#xff0c;涉及word和excel&#xff09; 本代码偏向处理高校教务处的工作 休学或请假模板如下&#xff1a; 休学证明&#xff08;此联存教务办&#xff09;编号&#xff1a;休202323 计算机系23级计算机科学与技术…