第十二节：粒子系统：海量点渲染

第十二节：粒子系统：海量点渲染

引言

粒子系统是创造动态视觉效果的神器，从漫天繁星到熊熊火焰，从魔法特效到数据可视化，都离不开粒子技术。Three.js提供了强大的粒子渲染能力，可轻松处理百万级粒子。本文将深入解析粒子系统核心原理，并通过Vue3实现交互式粒子编辑器，带你掌握微观世界的创造艺术。

在这里插入图片描述

1. 粒子系统基础
1.1 核心组件
粒子系统
Points
PointsMaterial
BufferGeometry
粒子容器
粒子外观
粒子数据
1.2 创建流程
// 1. 创建几何体（存储粒子位置）
const geometry = new THREE.BufferGeometry();// 2. 设置顶点数据
const positions = new Float32Array(1000 * 3); // 1000个粒子
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));// 3. 创建材质
const material = new THREE.PointsMaterial({color: 0xffffff,size: 0.1,
});// 4. 创建粒子系统
const particles = new THREE.Points(geometry, material);
scene.add(particles);
2. 基础粒子效果
2.1 静态星空
<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three';function createStars() {const starCount = 10000;const geometry = new THREE.BufferGeometry();// 生成随机位置const positions = new Float32Array(starCount * 3);for (let i = 0; i < starCount * 3; i += 3) {positions[i] = (Math.random() - 0.5) * 2000; // xpositions[i+1] = (Math.random() - 0.5) * 2000; // ypositions[i+2] = (Math.random() - 0.5) * 2000; // z}geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));// 创建材质const material = new THREE.PointsMaterial({color: 0xffffff,size: 0.7,sizeAttenuation: true, // 透视衰减});return new THREE.Points(geometry, material);
}onMounted(() => {const stars = createStars();scene.add(stars);
});
</script>
2.2 动态雨雪
<script setup>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';const rainGeometry = ref(null);
const rainMaterial = ref(null);
const rainSystem = ref(null);// 初始化雨滴
onMounted(() => {const rainCount = 5000;rainGeometry.value = new THREE.BufferGeometry();// 初始位置（顶部随机分布）const positions = new Float32Array(rainCount * 3);for (let i = 0; i < rainCount * 3; i += 3) {positions[i] = Math.random() * 100 - 50; // xpositions[i+1] = Math.random() * 50 + 50; // ypositions[i+2] = Math.random() * 100 - 50; // z}rainGeometry.value.setAttribute('position', new THREE.BufferAttribute(positions, 3));// 创建雨滴材质rainMaterial.value = new THREE.PointsMaterial({color: 0xaaaaaa,size: 0.1,transparent: true,opacity: 0.8,});rainSystem.value = new THREE.Points(rainGeometry.value, rainMaterial.value);scene.add(rainSystem.value);
});// 更新动画
function animateRain() {const positions = rainGeometry.value.attributes.position.array;for (let i = 1; i < positions.length; i += 3) {positions[i] -= 0.5; // Y轴下落// 重置位置（到达地面后回到顶部）if (positions[i] < -50) {positions[i] = Math.random() * 50 + 50;positions[i-2] = Math.random() * 100 - 50; // 重置Xpositions[i+1] = Math.random() * 100 - 50; // 重置Z}}// 标记更新rainGeometry.value.attributes.position.needsUpdate = true;
}
</script>
3. 高级粒子技术
3.1 粒子纹理
// 加载粒子贴图
const textureLoader = new THREE.TextureLoader();
const particleTexture = textureLoader.load('textures/particle.png');const material = new THREE.PointsMaterial({map: particleTexture,alphaTest: 0.5, // 透明度阈值blending: THREE.AdditiveBlending, // 叠加混合depthWrite: false, // 禁用深度写入
});// 圆形粒子
const discTexture = new THREE.CanvasTexture(createDiscCanvas(64));
function createDiscCanvas(size) {const canvas = document.createElement('canvas');canvas.width = canvas.height = size;const ctx = canvas.getContext('2d');const center = size / 2;const gradient = ctx.createRadialGradient(center, center, 0,center, center, center);gradient.addColorStop(0, 'rgba(255,255,255,1)');gradient.addColorStop(1, 'rgba(255,255,255,0)');ctx.fillStyle = gradient;ctx.beginPath();ctx.arc(center, center, center, 0, Math.PI * 2);ctx.fill();return canvas;
}
3.2 粒子物理
// 添加重力
const gravity = -0.01;
const velocities = new Float32Array(particleCount * 3);function initPhysics() {for (let i = 0; i < particleCount; i++) {velocities[i * 3] = (Math.random() - 0.5) * 0.1; // vxvelocities[i * 3 + 1] = Math.random() * 0.5 + 0.1; // vyvelocities[i * 3 + 2] = (Math.random() - 0.5) * 0.1; // vz}
}function updatePhysics() {const positions = geometry.attributes.position.array;for (let i = 0; i < particleCount; i++) {const idx = i * 3;// 更新速度velocities[idx + 1] += gravity;// 更新位置positions[idx] += velocities[idx];positions[idx + 1] += velocities[idx + 1];positions[idx + 2] += velocities[idx + 2];// 地面碰撞检测if (positions[idx + 1] < 0) {positions[idx + 1] = 0;velocities[idx + 1] = -velocities[idx + 1] * 0.8; // 反弹}}geometry.attributes.position.needsUpdate = true;
}
3.3 粒子交互
// 鼠标交互影响粒子
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();function onMouseMove(event) {// 计算鼠标位置mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;// 更新射线raycaster.setFromCamera(mouse, camera);// 计算鼠标在空间中的位置const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);const intersectPoint = new THREE.Vector3();raycaster.ray.intersectPlane(plane, intersectPoint);// 影响粒子const positions = geometry.attributes.position.array;const center = new THREE.Vector3(intersectPoint.x,intersectPoint.y,intersectPoint.z);for (let i = 0; i < particleCount; i++) {const idx = i * 3;const particlePos = new THREE.Vector3(positions[idx],positions[idx+1],positions[idx+2]);const distance = particlePos.distanceTo(center);if (distance < 5) {const direction = particlePos.clone().sub(center).normalize();const force = (5 - distance) * 0.01;positions[idx] += direction.x * force;positions[idx+1] += direction.y * force;positions[idx+2] += direction.z * force;}}geometry.attributes.position.needsUpdate = true;
}
4. GPU加速粒子
4.1 ShaderMaterial定制
<script setup>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';// 顶点着色器
const vertexShader = `attribute float size;attribute vec3 customColor;varying vec3 vColor;void main() {vColor = customColor;vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_PointSize = size * (300.0 / -mvPosition.z); // 透视缩放gl_Position = projectionMatrix * mvPosition;}
`;// 片元着色器
const fragmentShader = `varying vec3 vColor;uniform sampler2D pointTexture;void main() {gl_FragColor = vec4(vColor, 1.0);gl_FragColor = gl_FragColor * texture2D(pointTexture, gl_PointCoord);// 圆形粒子if (length(gl_PointCoord - vec2(0.5)) > 0.5) {discard;}}
`;// 创建自定义粒子材质
const particleMaterial = ref(null);onMounted(() => {particleMaterial.value = new THREE.ShaderMaterial({uniforms: {pointTexture: { value: new THREE.TextureLoader().load('particle.png') }},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true});
});
</script>
4.2 计算着色器（WebGPU）
// 使用WebGPU计算着色器
import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';const gpuCompute = new GPUComputationRenderer(1024, 1024, renderer);// 创建位置纹理
const positionTexture = gpuCompute.createTexture();
initPositionTexture(positionTexture);// 创建速度纹理
const velocityTexture = gpuCompute.createTexture();
initVelocityTexture(velocityTexture);// 创建计算着色器
const positionShader = `uniform float time;uniform sampler2D velocityTexture;void main() {vec2 uv = gl_FragCoord.xy / resolution.xy;vec4 velocity = texture2D(velocityTexture, uv);// 更新位置vec4 position = texture2D(positionTexture, uv);position.xyz += velocity.xyz * 0.05;// 边界约束if (position.x > 50.0) position.x = -50.0;// 其他边界...gl_FragColor = position;}
`;const positionVariable = gpuCompute.addVariable('positionTexture', positionShader, positionTexture
);// 类似创建速度着色器...// 初始化计算
gpuCompute.setVariableDependencies(positionVariable, [positionVariable, velocityVariable]);
gpuCompute.init();
4.3 Instanced Particles
// 使用实例化粒子
const particleGeometry = new THREE.InstancedBufferGeometry();
particleGeometry.instanceCount = 100000;// 基础几何（一个点）
particleGeometry.setAttribute('position',new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3)
);// 实例化属性
const offsets = new Float32Array(100000 * 3);
const colors = new Float32Array(100000 * 3);
const sizes = new Float32Array(100000);// 填充数据
for (let i = 0; i < 100000; i++) {offsets[i * 3] = Math.random() * 100 - 50;offsets[i * 3 + 1] = Math.random() * 100 - 50;offsets[i * 3 + 2] = Math.random() * 100 - 50;colors[i * 3] = Math.random();colors[i * 3 + 1] = Math.random();colors[i * 3 + 2] = Math.random();sizes[i] = Math.random() * 2 + 0.5;
}// 设置属性
particleGeometry.setAttribute('offset',new THREE.InstancedBufferAttribute(offsets, 3)
);
particleGeometry.setAttribute('color',new THREE.InstancedBufferAttribute(colors, 3)
);
particleGeometry.setAttribute('size',new THREE.InstancedBufferAttribute(sizes, 1)
);// 创建材质
const material = new THREE.ShaderMaterial({vertexShader: `...`,fragmentShader: `...`,uniforms: { /* ... */ }
});const particleSystem = new THREE.Points(particleGeometry, material);
scene.add(particleSystem);
5. Vue3粒子编辑器
5.1 项目结构
src/├── components/│    ├── ParticleEditor.vue  // 主编辑器│    ├── ParticlePreview.vue // 3D预览│    ├── EffectLibrary.vue   // 效果库│    └── ParticleParams.vue  // 参数控制└── App.vue
5.2 主编辑器
<!-- ParticleEditor.vue -->
<template><div class="particle-editor"><div class="sidebar"><EffectLibrary @select-effect="setActiveEffect" /><ParticleParams :effect="activeEffect" @update="updateEffect" /></div><div class="preview-container"><ParticlePreview ref="previewRef" :effect-config="activeEffect" /></div></div>
</template><script setup>
import { ref, reactive } from 'vue';
import { particleEffects } from './particle-presets';const activeEffect = ref(null);
const previewRef = ref(null);// 设置活动效果
function setActiveEffect(effect) {activeEffect.value = { ...effect };previewRef.value.applyEffect(activeEffect.value);
}// 更新效果
function updateEffect(newParams) {Object.assign(activeEffect.value, newParams);previewRef.value.updateEffect(activeEffect.value);
}
</script>
5.3 粒子预览组件
<!-- ParticlePreview.vue -->
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const props = defineProps(['effectConfig']);
const canvasRef = ref(null);// 场景初始化
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a2a); // 深蓝色背景
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 15;
const renderer = ref(null);
const controls = ref(null);
const particleSystem = ref(null);onMounted(() => {renderer.value = new THREE.WebGLRenderer({canvas: canvasRef.value,antialias: true});renderer.value.setSize(800, 600);controls.value = new OrbitControls(camera, renderer.value.domElement);// 添加基础灯光const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(5, 10, 7);scene.add(directionalLight);// 启动动画循环animate();
});// 应用效果配置
function applyEffect(config) {// 清除旧系统if (particleSystem.value) {scene.remove(particleSystem.value);particleSystem.value.geometry.dispose();particleSystem.value.material.dispose();}// 创建新系统particleSystem.value = createParticleSystem(config);scene.add(particleSystem.value);
}// 更新效果
function updateEffect(config) {if (!particleSystem.value) return;// 更新材质particleSystem.value.material.size = config.particleSize;particleSystem.value.material.color = new THREE.Color(config.color);// 更新几何体if (config.particleCount !== currentCount) {applyEffect(config);}
}// 动画循环
function animate() {requestAnimationFrame(animate);// 更新粒子if (particleSystem.value) {updateParticles(particleSystem.value, props.effectConfig);}controls.value.update();renderer.value.render(scene, camera);
}
</script>
5.4 效果预设库
<!-- EffectLibrary.vue -->
<template><div class="effect-library"><div v-for="effect in effects" :key="effect.id"class="effect-card":class="{ active: effect.id === activeId }"@click="selectEffect(effect)"><div class="thumbnail" :style="{background: `radial-gradient(circle, ${effect.color} 0%, #000 100%)`}"></div><h4>{{ effect.name }}</h4></div></div>
</template><script setup>
import { ref } from 'vue';const effects = ref([{id: 'fire',name: '火焰效果',color: '#ff5722',particleCount: 5000,particleSize: 0.5,// 其他参数...},{id: 'snow',name: '飘雪效果',color: '#ffffff',particleCount: 10000,particleSize: 0.2,// 其他参数...},{id: 'magic',name: '魔法粒子',color: '#9c27b0',particleCount: 8000,particleSize: 0.3,// 其他参数...},{id: 'stars',name: '宇宙星空',color: '#4fc3f7',particleCount: 20000,particleSize: 0.7,// 其他参数...}
]);const activeId = ref(null);
const emit = defineEmits(['select-effect']);function selectEffect(effect) {activeId.value = effect.id;emit('select-effect', effect);
}
</script>
5.5 参数控制面板
<!-- ParticleParams.vue -->
<template><div class="particle-params" v-if="effect"><h3>{{ effect.name }} 参数</h3><div class="control-group"><label>粒子数量: {{ effect.particleCount }}</label><input type="range" v-model.number="localEffect.particleCount" min="100" max="100000" step="100"@input="updateParams"></div><div class="control-group"><label>粒子大小: {{ effect.particleSize.toFixed(2) }}</label><input type="range" v-model.number="localEffect.particleSize" min="0.01" max="2" step="0.01"@input="updateParams"></div><div class="control-group"><label>粒子颜色</label><input type="color" v-model="localEffect.color"@change="updateParams"></div><div class="control-group" v-if="effect.type === 'fire'"><label>火焰强度: {{ effect.intensity.toFixed(2) }}</label><input type="range" v-model.number="localEffect.intensity" min="0.1" max="5" step="0.1"@input="updateParams"></div><!-- 其他效果特定参数 --></div>
</template><script setup>
import { ref, watch } from 'vue';const props = defineProps(['effect']);
const emit = defineEmits(['update']);const localEffect = ref({ ...props.effect });// 监听外部变化
watch(() => props.effect, (newVal) => {localEffect.value = { ...newVal };
});// 更新参数
function updateParams() {emit('update', { ...localEffect.value });
}
</script>
6. 百万级粒子优化
6.1 性能优化策略
>10,000
每帧更新
低频更新
性能瓶颈
粒子数量
使用Instancing
更新频率
使用Shader
使用CPU
移动端
降低数量+大小
6.2 渲染优化技术

  1. Frustum Culling：

    // 自定义视锥剔除
const frustum = new THREE.Frustum();
const viewProjectionMatrix = new THREE.Matrix4();function updateCulling() {viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix,camera.matrixWorldInverse);frustum.setFromProjectionMatrix(viewProjectionMatrix);particleSystem.visible = frustum.intersectsSphere(particleSystem.geometry.boundingSphere);
}

  2. Level of Detail：

    // 根据距离调整细节
function updateLOD() {const distance = camera.position.distanceTo(particleSystem.position);if (distance > 100) {particleSystem.material.size = 0.1;particleSystem.geometry.setDrawRange(0, 1000); // 只渲染部分粒子} else if (distance > 50) {particleSystem.material.size = 0.3;particleSystem.geometry.setDrawRange(0, 5000);} else {particleSystem.material.size = 0.5;particleSystem.geometry.setDrawRange(0, 10000);}
}

  3. Batch Rendering：

    // 合并粒子系统
const mergedGeometry = new THREE.BufferGeometry();
const particleSystems = [system1, system2, system3];particleSystems.forEach(system => {const geometry = system.geometry.clone();geometry.applyMatrix4(system.matrixWorld);mergedGeometry.merge(geometry);
});const mergedParticles = new THREE.Points(mergedGeometry,baseMaterial
);
6.3 内存优化
// 重用几何体
const particlePool = [];
const POOL_SIZE = 10;function createParticlePool() {for (let i = 0; i < POOL_SIZE; i++) {const geometry = new THREE.BufferGeometry();const material = new THREE.PointsMaterial();const system = new THREE.Points(geometry, material);system.visible = false;scene.add(system);particlePool.push(system);}
}function getParticleSystem() {for (const system of particlePool) {if (!system.visible) {system.visible = true;return system;}}// 如果池已满，创建新系统return createNewSystem();
}
7. 粒子效果案例
7.1 火焰效果
function createFireEffect() {const count = 5000;const geometry = new THREE.BufferGeometry();// 位置、颜色、大小属性const positions = new Float32Array(count * 3);const colors = new Float32Array(count * 3);const sizes = new Float32Array(count);for (let i = 0; i < count; i++) {const i3 = i * 3;// 初始位置（火源中心）positions[i3] = (Math.random() - 0.5) * 2;positions[i3+1] = 0;positions[i3+2] = (Math.random() - 0.5) * 2;// 颜色（从黄到红）const hue = 0.1 + Math.random() * 0.1;colors[i3] = 1.0; // Rcolors[i3+1] = hue; // Gcolors[i3+2] = 0.0; // B// 初始大小sizes[i] = Math.random() * 0.5 + 0.1;}geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));// 材质const material = new THREE.PointsMaterial({vertexColors: true,size: 0.5,blending: THREE.AdditiveBlending,depthWrite: false,transparent: true});return new THREE.Points(geometry, material);
}function updateFire(particles) {const positions = particles.geometry.attributes.position.array;const colors = particles.geometry.attributes.color.array;const sizes = particles.geometry.attributes.size.array;for (let i = 0; i < positions.length / 3; i++) {const i3 = i * 3;// 粒子上升positions[i3+1] += Math.random() * 0.1;// 随机左右摆动positions[i3] += (Math.random() - 0.5) * 0.05;positions[i3+2] += (Math.random() - 0.5) * 0.05;// 颜色变暗（模拟冷却）colors[i3+1] = Math.max(0, colors[i3+1] - 0.005);// 粒子缩小sizes[i] = Math.max(0.05, sizes[i] - 0.001);// 重置粒子if (positions[i3+1] > 10 || sizes[i] <= 0.05) {positions[i3+1] = 0;positions[i3] = (Math.random() - 0.5) * 2;positions[i3+2] = (Math.random() - 0.5) * 2;colors[i3+1] = 0.1 + Math.random() * 0.1;sizes[i] = Math.random() * 0.5 + 0.1;}}particles.geometry.attributes.position.needsUpdate = true;particles.geometry.attributes.color.needsUpdate = true;particles.geometry.attributes.size.needsUpdate = true;
}
7.2 数据可视化
function createDataVisualization(points) {const geometry = new THREE.BufferGeometry();// 位置和颜色const positions = new Float32Array(points.length * 3);const colors = new Float32Array(points.length * 3);points.forEach((point, i) => {const i3 = i * 3;// 位置positions[i3] = point.x;positions[i3+1] = point.y;positions[i3+2] = point.z;// 颜色（基于值）const color = new THREE.Color();color.setHSL(0.6 * point.value, 1.0, 0.5);colors[i3] = color.r;colors[i3+1] = color.g;colors[i3+2] = color.b;});geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));// 材质const material = new THREE.PointsMaterial({vertexColors: true,size: 2.0,sizeAttenuation: false});return new THREE.Points(geometry, material);
}
8. 常见问题解答

Q1：粒子显示为方块而不是圆形？

// 解决方案1：使用圆形纹理
material.map = createCircleTexture();// 解决方案2：在着色器中处理
void main() {float distance = length(gl_PointCoord - vec2(0.5));if (distance > 0.5) discard;// ...
}// 解决方案3：开启抗锯齿
renderer = new THREE.WebGLRenderer({ antialias: true });

Q2：移动端粒子性能差怎么办？

  1. 减少粒子数量（<5000）
  2. 禁用大小衰减 sizeAttenuation: false
  3. 使用简单着色器
  4. 降低更新频率（每秒30帧）

Q3：如何实现粒子拖尾效果？

// 使用GPU粒子实现拖尾
const trailShader = `uniform sampler2D positionTexture;uniform sampler2D prevPositionTexture;void main() {vec2 uv = gl_FragCoord.xy / resolution.xy;vec4 position = texture2D(positionTexture, uv);vec4 prevPosition = texture2D(prevPositionTexture, uv);// 混合当前和之前位置vec4 newPosition = mix(position, prevPosition, 0.8);gl_FragColor = newPosition;}
`;// 渲染时绘制多条轨迹
for (let i = 0; i < TRAIL_LENGTH; i++) {const trailMaterial = new THREE.PointsMaterial({color: baseColor,size: baseSize * (1 - i/TRAIL_LENGTH),opacity: 1 - i/TRAIL_LENGTH,transparent: true});const trail = new THREE.Points(geometry, trailMaterial);scene.add(trail);
}
9. 总结

通过本文，你已掌握：

  1. 粒子系统核心组件（Points/PointsMaterial）
  2. 基础粒子效果实现（星空/雨雪）
  3. 高级粒子技术（纹理/物理/交互）
  4. GPU加速与计算着色器
  5. Vue3粒子编辑器开发
  6. 百万级粒子优化策略
  7. 实战效果案例（火焰/数据可视化）

核心价值：Three.js粒子系统通过GPU加速渲染，结合着色器编程，实现了百万级粒子的实时交互，为Web应用带来影院级视觉效果。

下一篇预告

第十三篇：后期处理：效果增强
你将学习：

  • 后期处理管线原理
  • 内置效果链（Bloom/SSAO/Glitch）
  • 自定义ShaderPass开发
  • 性能优化：多采样与降级
  • 高级特效：景深、运动模糊
  • Vue3实现后期处理编辑器

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

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

相关文章

LeetCode Day5 -- 二叉树

LeetCode Day5 -- 二叉树

目录 1. 啥时候用二叉树&#xff1f; &#xff08;1&#xff09;典型问题 &#xff08;2&#xff09;核心思路 2. BFS、DFS、BST 2.1 广度优先搜索BFS &#xff08;1&#xff09;适用任务 &#xff08;2&#xff09;解决思路​​&#xff1a;使用队列逐层遍历 2.2 深度…
阅读更多...
＜c1:C1DateTimePicker的日期时间控件，控制日期可以修改，时间不能修改，另外控制开始时间的最大值比结束时间小一天

＜c1:C1DateTimePicker的日期时间控件，控制日期可以修改，时间不能修改，另外控制开始时间的最大值比结束时间小一天

两个时间控件 <c1:C1DateTimePicker Width"170" EditMode"DateTime" CustomDateFormat"yyyy-MM-dd" CustomTimeFormat"HH:mm:ss" Style"{StaticResource ListSearch-DateTimePicker}" x:Name"dateTimePicker"…
阅读更多...
文件完整性监控工具：架构和实现

文件完整性监控工具：架构和实现

文件完整性监控(FIM)作为一道关键的防御层&#xff0c;确保系统和网络中文件及文件夹的完整性与安全性。文件完整性监控工具通过监控关键文件的变更并检测未经授权的修改&#xff0c;提供关于潜在安全漏洞、恶意软件感染和内部威胁的早期警报。为了使文件完整性监控工具发挥实效…
阅读更多...
Linux信号量和信号

Linux信号量和信号

1.温故知新上一篇博客&#xff0c;我们又知道了一种进程间通信的方案&#xff1a;共享内存。它是在物理内存中用系统调用给我们在物理内存开辟一个共享内存&#xff0c;可以由多个进程的页表进行映射&#xff0c;共享内存不和管道一样&#xff0c;它的生命周期是随内核的&#…
阅读更多...
腾讯测试岗位面试真题分析

腾讯测试岗位面试真题分析

以下是对腾讯测试工程师面试问题的分类整理、领域占比分析及高频问题精选&#xff08;基于​​92道问题&#xff0c;总出现次数118次​​&#xff09;。问题按​​7大技术领域​​划分&#xff0c;高频问题标注优先级&#xff08;1-5&#x1f31f;&#xff09;&#xff1a; 不…
阅读更多...
全面解析远程桌面：功能实现、性能优化与安全防护全攻略

全面解析远程桌面：功能实现、性能优化与安全防护全攻略

远程桌面技术已成为工作与生活中不可或缺的协作工具&#xff0c;但在实际应用中&#xff0c;用户常遇到连接失败、卡顿延迟、安全隐患等问题。本文从远程桌面功能原理、网络与性能优化、安全防护策略、跨平台兼容性等角度&#xff0c;详细解析常见问题的解决方案&#xff0c;并…
阅读更多...
【问题】Mybatis-plus框架使用@Select注解编写查询SQL，json字段查询转换失败

【问题】Mybatis-plus框架使用@Select注解编写查询SQL，json字段查询转换失败

问题描述在使用mybaits-plus的时候定义的Mapper接口实现了BaseMapper&#xff0c;没有编写Mapper对应的xml&#xff0c;大部分查询使用框架的接口进行查询基本属性返回都是正常&#xff0c;复杂对象在sql中会进行查询&#xff0c;但是返回对象中却未包含相关属性。问题原因 没有…
阅读更多...
Python多线程实现大文件下载

Python多线程实现大文件下载

Python多线程实现大文件下载 在互联网时代&#xff0c;文件下载是日常操作之一&#xff0c;尤其是大文件&#xff0c;如软件安装包、高清视频等。然而&#xff0c;网络条件不稳定或带宽有限时&#xff0c;下载速度会变得很慢&#xff0c;令人抓狂。幸运的是&#xff0c;通过多线…
阅读更多...
【R语言】RStudio 中的 Source on Save、Run、Source 辨析

【R语言】RStudio 中的 Source on Save、Run、Source 辨析

RStudio 中的 Source on Save、Run、Source 辨析 在使用 RStudio 进行 R 语言开发时&#xff0c;我们会在主界面左上角看见三个按钮&#xff1a;Source on Save、Run、Source 。 本文将带你从概念、使用方法、快捷键、使用场景以及注意事项等方面详细解析这三个功能。 文章目录…
阅读更多...
蓝桥杯算法之搜索章 - 4

蓝桥杯算法之搜索章 - 4

目录 文章目录 前言 一、记忆化搜索 二、题目概略 三、斐波拉契数 四、Function 五、天下第一 六、滑雪 总结 亲爱的读者朋友们&#xff0c;大家好啊&#xff01;不同的时间&#xff0c;相同的地点&#xff0c;今天又带来了关于搜索部分的讲解。接下来我将接着我前面文章的内容…
阅读更多...
抗量子加密技术前瞻：后量子时代的密码学革命

抗量子加密技术前瞻：后量子时代的密码学革命

目录抗量子加密技术前瞻&#xff1a;后量子时代的密码学革命1. 量子计算威胁现状1.1 量子霸权里程碑1.2 受威胁算法1.3 时间紧迫性2. 抗量子密码学体系2.1 技术路线对比2.2 数学基础革新3. 标准化进程3.1 NIST PQC标准化时间线3.2 当前推荐算法4. 技术实现方案4.1 Kyber密钥交换…
阅读更多...
基于STM32设计的矿山环境监测系统(NBIOT)_262

基于STM32设计的矿山环境监测系统(NBIOT)_262

文章目录 一、前言 1.1 项目介绍 【1】开发背景 【2】研究的意义 【3】最终实现需求 【4】项目硬件模块组成 1.2 设计思路 【1】整体设计思路 【2】上位机开发思路 1.3 项目开发背景 【1】选题的意义 【2】摘要 【3】国内外相关研究现状 【5】参考文献 1.4 开发工具的选择 【1】…
阅读更多...
电脑如何安装win10专业版_电脑用u盘安装win10专业版教程

电脑如何安装win10专业版_电脑用u盘安装win10专业版教程

电脑如何安装win10专业版&#xff1f;电脑还是建议安装win10专业版。Win分为多个版本&#xff0c;其中家庭版&#xff08;Home&#xff09;和专业版&#xff08;Pro&#xff09;是用户选择最多的两个版本。win10专业版在功能以及安全性方面有着明显的优势&#xff0c;所以电脑还…
阅读更多...
多语言文本 AI 情感分析 API 数据接口

多语言文本 AI 情感分析 API 数据接口

多语言文本 AI 情感分析 API 数据接口 AI / 文本处理 AI 模型快速分析文本情感倾向 多语言文本 / 情感分析。 1. 产品功能 支持多语言文本情感分析&#xff1b;基于特定 AI 模型&#xff0c;快速识别文本情感倾向&#xff1b;适用于评论分析、舆情监控等场景&#xff1b;全接…
阅读更多...
【R语言】R语言的工作空间映像（workspace image，通常是.RData）详解

【R语言】R语言的工作空间映像（workspace image，通常是.RData）详解

R语言的工作空间映像&#xff08;.RData&#xff09;详解 在使用 R 语言时&#xff0c;你可能会注意到&#xff0c;每次退出 R 会弹出一个提示&#xff1a; Save workspace image? [y/n/c] 如果你使用的是 Rstudio 这个 IDE 来进行R语言的开发&#xff0c;那么可能弹出的提示…
阅读更多...
在线 A2C实践

在线 A2C实践

在线 A2C&#xff08;Actor-Critic&#xff09;算法在推荐系统中的实践&#xff0c;核心是将推荐过程建模为实时交互的强化学习问题&#xff0c;通过 Actor 生成推荐策略、Critic 评估策略价值&#xff0c;实现 “决策 - 反馈 - 更新” 的闭环。从样本设计到最终上线&#xff0…
阅读更多...
Eclipse RCP产品动态模块设计

Eclipse RCP产品动态模块设计

文章目录 遇到问题具体实践效果演示应用下载 遇到问题 如果你是一个To C产品的设计者&#xff0c;势必会遇到用户需求高度分化的场景&#xff0c;随之而来的是繁杂的功能列表&#xff0c;如何让用户只接触与其任务直接相关的功能&#xff0c;隐藏无关元素&#xff1f; 具体实…
阅读更多...
NLP自然语言处理: FastText工具与迁移学习基础详解

NLP自然语言处理: FastText工具与迁移学习基础详解

FastText工具与迁移学习基础详解 一、知识框架总览 FastText工具核心功能与应用场景FastText模型架构与工作原理层次Softmax加速机制哈夫曼树概念与构建方法 二、FastText工具核心解析 2.1 功能定位 双重核心功能 文本分类&#xff1a;可直接用于文本分类任务&#xff0c;快速生…
阅读更多...
uni-app 生命周期详解

uni-app 生命周期详解

概述 uni-app 基于 Vue.js 框架开发&#xff0c;其生命周期包含了三个层面&#xff1a; 应用生命周期&#xff1a;App.vue 的生命周期页面生命周期&#xff1a;各个页面的生命周期Vue 组件生命周期&#xff1a;Vue.js 原生的组件生命周期 这三种生命周期在不同场景下会按特定顺…
阅读更多...
MCU外设初始化：为什么参数配置必须优先于使能

MCU外设初始化：为什么参数配置必须优先于使能

在微控制器领域&#xff0c;初始化参数配置阶段至关重要。此时&#xff0c;虽无电源驱动&#xff0c;但微控制器在使能信号到来前&#xff0c;借初始化参数配置这一精细步骤&#xff0c;开启关键准备进程。初始化参数配置如同物理坐标锚定、逻辑指令部署、内在秩序预设&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023