Three.js 点模型、线模型、精灵模型拾取实现

最新推荐文章于 2025-12-18 10:02:55 发布
原创 最新推荐文章于 2025-12-18 10:02:55 发布 · 855 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #webgl

一、点模型（Points）拾取实现

实现步骤：

  1. 创建点模型：使用 THREE.Points 和点材质
  2. 设置点大小：在材质中设置 size 属性
  3. Raycaster配置：设置 Points 的拾取阈值
  4. 拾取检测：使用 intersectObjects 检测相交

完整案例：

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const containerRef = ref(null);

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);

// 创建相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建点模型
function createPointCloud() {
  // 创建100个随机点
  const vertices = [];
  for (let i = 0; i < 100; i++) {
    const x = (Math.random() - 0.5) * 10;
    const y = (Math.random() - 0.5) * 10;
    const z = (Math.random() - 0.5) * 10;
    vertices.push(x, y, z);
  }
  
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  
  // 创建点材质 - 关键：设置点大小
  const material = new THREE.PointsMaterial({
    color: 0xff0000,
    size: 0.2,          // 点的大小
    sizeAttenuation: true // 点大小是否随距离衰减
  });
  
  // 创建点云对象
  const points = new THREE.Points(geometry, material);
  points.name = 'pointCloud';
  scene.add(points);
  
  return points;
}

// 创建点模型
const pointCloud = createPointCloud();

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);

// 添加坐标轴辅助
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  
  // 让点云缓慢旋转
  pointCloud.rotation.y += 0.005;
  
  renderer.render(scene, camera);
}
animate();

// 点模型拾取函数
function pickPoints(event) {
  // 1. 获取鼠标归一化设备坐标
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // 2. 创建Raycaster
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  
  // 3. 关键：设置点模型的拾取阈值
  // 这个值决定点击距离点多近才算选中，值越大越容易选中
  raycaster.params.Points = { threshold: 0.2 };
  
  // 4. 检测相交
  const intersects = raycaster.intersectObjects([pointCloud]);
  
  // 5. 处理结果
  if (intersects.length > 0) {
    const intersect = intersects[0];
    console.log('选中了点:', intersect);
    
    // 获取选中的点的索引
    const pointIndex = intersect.index;
    
    // 创建高亮点（在该位置添加一个更大的点）
    const highlightGeometry = new THREE.BufferGeometry();
    const position = intersect.object.geometry.attributes.position;
    const pointPosition = [
      position.getX(pointIndex),
      position.getY(pointIndex),
      position.getZ(pointIndex)
    ];
    
    highlightGeometry.setAttribute('position', 
      new THREE.Float32BufferAttribute(pointPosition, 3));
    
    const highlightMaterial = new THREE.PointsMaterial({
      color: 0xffff00,
      size: 0.5,
      sizeAttenuation: true
    });
    
    const highlight = new THREE.Points(highlightGeometry, highlightMaterial);
    highlight.name = 'highlightPoint';
    
    // 移除之前的高亮点
    const oldHighlight = scene.getObjectByName('highlightPoint');
    if (oldHighlight) scene.remove(oldHighlight);
    
    scene.add(highlight);
    
    // 显示信息
    console.log('点位置:', pointPosition);
    console.log('点索引:', pointIndex);
  }
}

// 添加点击事件
window.addEventListener('click', pickPoints);

// 挂载到DOM
onMounted(() => {
  const controls = new OrbitControls(camera, containerRef.value);
  controls.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  
  // 窗口大小变化处理
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

关键点说明：

  1. PointsMaterial.size：控制点的大小
  2. raycaster.params.Points.threshold：设置点拾取的敏感度
  3. intersect.index：获取选中点的索引
  4. intersect.point：获取选中点的具体位置

二、线模型（Line）拾取实现

实现步骤：

  1. 创建线模型：使用 THREE.Line 或 THREE.LineSegments
  2. Raycaster配置：设置 Line 的拾取阈值
  3. 提高拾取精度：通过辅助方法增加拾取成功率
  4. 处理拾取结果：获取线段信息

完整案例：

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const containerRef = ref(null);

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);

// 创建相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建复杂的线模型
function createComplexLine() {
  // 创建曲线路径
  const curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-4, 0, 0),
    new THREE.Vector3(-2, 3, 1),
    new THREE.Vector3(0, 0, 2),
    new THREE.Vector3(2, 3, 1),
    new THREE.Vector3(4, 0, 0)
  ]);
  
  // 获取曲线上的点
  const points = curve.getPoints(50);
  
  // 创建线几何体
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  
  // 创建线材质
  const material = new THREE.LineBasicMaterial({
    color: 0x00aaff,
    linewidth: 3  // 注意：大多数浏览器不支持大于1的线宽
  });
  
  // 创建线对象
  const line = new THREE.Line(geometry, material);
  line.name = 'complexLine';
  scene.add(line);
  
  return line;
}

// 创建网格线（更容易拾取）
function createGridLines() {
  const group = new THREE.Group();
  
  // 创建水平线
  for (let i = -5; i <= 5; i++) {
    const geometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(-5, i, 0),
      new THREE.Vector3(5, i, 0)
    ]);
    
    const material = new THREE.LineBasicMaterial({ 
      color: 0x666666,
      linewidth: 2
    });
    
    const line = new THREE.Line(geometry, material);
    line.userData.type = 'gridLine';
    line.userData.index = i;
    group.add(line);
  }
  
  // 创建垂直线
  for (let i = -5; i <= 5; i++) {
    const geometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(i, -5, 0),
      new THREE.Vector3(i, 5, 0)
    ]);
    
    const material = new THREE.LineBasicMaterial({ 
      color: 0x666666,
      linewidth: 2
    });
    
    const line = new THREE.Line(geometry, material);
    line.userData.type = 'gridLine';
    line.userData.index = i;
    group.add(line);
  }
  
  scene.add(group);
  return group;
}

// 创建线模型
const complexLine = createComplexLine();
const gridLines = createGridLines();

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);

// 添加坐标轴辅助
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// 线模型拾取函数
function pickLines(event) {
  // 获取鼠标位置
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // 创建Raycaster
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  
  // 关键：设置线模型的拾取阈值（增大以提高拾取成功率）
  // 这个值表示距离线多远的点击算选中（单位：世界单位）
  raycaster.params.Line = { threshold: 0.3 };
  
  // 收集所有线对象
  const lineObjects = [];
  scene.traverse((object) => {
    if (object.type === 'Line' || object.type === 'LineSegments') {
      lineObjects.push(object);
    }
  });
  
  // 检测相交
  const intersects = raycaster.intersectObjects(lineObjects);
  
  if (intersects.length > 0) {
    const intersect = intersects[0];
    const line = intersect.object;
    
    console.log('选中了线:', line);
    console.log('相交点:', intersect.point);
    console.log('距离:', intersect.distance);
    console.log('线段索引:', intersect.faceIndex);
    
    // 改变线的颜色
    line.material.color.set(Math.random() * 0xffffff);
    
    // 在相交点添加标记
    addIntersectionMarker(intersect.point);
    
    // 如果是网格线，显示信息
    if (line.userData.type === 'gridLine') {
      console.log(`网格线类型: ${line.userData.type}, 索引: ${line.userData.index}`);
    }
  }
}

// 添加相交点标记
function addIntersectionMarker(position) {
  // 移除旧的标记
  const oldMarker = scene.getObjectByName('intersectionMarker');
  if (oldMarker) scene.remove(oldMarker);
  
  // 创建标记几何体
  const markerGeometry = new THREE.SphereGeometry(0.1, 16, 16);
  const markerMaterial = new THREE.MeshBasicMaterial({ 
    color: 0xff0000 
  });
  const marker = new THREE.Mesh(markerGeometry, markerMaterial);
  
  marker.position.copy(position);
  marker.name = 'intersectionMarker';
  scene.add(marker);
  
  // 3秒后移除标记
  setTimeout(() => {
    if (marker.parent) scene.remove(marker);
  }, 3000);
}

// 添加点击事件
window.addEventListener('click', pickLines);

// 挂载到DOM
onMounted(() => {
  const controls = new OrbitControls(camera, containerRef.value);
  controls.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  
  // 窗口大小变化处理
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

关键点说明：

  1. raycaster.params.Line.threshold：控制线拾取的敏感度
  2. 线宽限制：WebGL中大多不支持大于1的linewidth
  3. intersect.faceIndex：获取选中线段的索引
  4. 使用辅助标记：通过添加标记点显示拾取位置

三、精灵模型（Sprite）拾取实现

实现步骤：

  1. 创建精灵模型：使用 THREE.Sprite 和精灵材质
  2. 设置精灵大小：通过 scale 属性控制
  3. Raycaster配置：Sprite会自动被检测，无需特殊配置
  4. 处理拾取结果：获取精灵信息

完整案例：

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const containerRef = ref(null);

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111122);

// 创建相机
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 15);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建精灵材质（使用Canvas绘制纹理）
function createSpriteMaterial(text, color = '#ff0000') {
  // 创建Canvas
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 256;
  const context = canvas.getContext('2d');
  
  // 绘制圆形背景
  context.beginPath();
  context.arc(128, 128, 120, 0, 2 * Math.PI);
  context.fillStyle = color;
  context.fill();
  
  // 添加描边
  context.lineWidth = 8;
  context.strokeStyle = '#ffffff';
  context.stroke();
  
  // 添加文字
  context.font = 'bold 60px Arial';
  context.fillStyle = '#ffffff';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText(text, 128, 128);
  
  // 创建纹理
  const texture = new THREE.CanvasTexture(canvas);
  
  // 创建精灵材质
  const material = new THREE.SpriteMaterial({ 
    map: texture,
    transparent: true
  });
  
  return material;
}

// 创建多个精灵
const sprites = [];
const spriteGroup = new THREE.Group();

function createSprites() {
  const positions = [
    { x: -5, y: 0, z: 0, text: 'A', color: '#ff0000' },
    { x: -2.5, y: 3, z: -2, text: 'B', color: '#00ff00' },
    { x: 0, y: -2, z: 2, text: 'C', color: '#0000ff' },
    { x: 2.5, y: 3, z: -2, text: 'D', color: '#ffff00' },
    { x: 5, y: 0, z: 0, text: 'E', color: '#ff00ff' },
    { x: 0, y: 5, z: 0, text: 'F', color: '#00ffff' }
  ];
  
  positions.forEach((pos, index) => {
    const material = createSpriteMaterial(pos.text, pos.color);
    const sprite = new THREE.Sprite(material);
    
    // 设置位置
    sprite.position.set(pos.x, pos.y, pos.z);
    
    // 设置大小 - 精灵的大小通过scale控制
    sprite.scale.set(2, 2, 1);
    
    // 添加自定义数据
    sprite.userData = {
      type: 'interactiveSprite',
      id: index,
      text: pos.text,
      originalColor: pos.color,
      originalScale: { x: 2, y: 2, z: 1 }
    };
    
    sprite.name = `sprite_${pos.text}`;
    sprites.push(sprite);
    spriteGroup.add(sprite);
  });
  
  scene.add(spriteGroup);
}

// 创建精灵
createSprites();

// 添加一个立方体作为参考
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x888888, wireframe: true });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);

// 添加坐标轴辅助
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  
  // 让精灵组缓慢旋转
  spriteGroup.rotation.y += 0.005;
  
  renderer.render(scene, camera);
}
animate();

// 精灵模型拾取函数
function pickSprites(event) {
  // 获取鼠标位置
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // 创建Raycaster
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  
  // 注意：精灵模型会自动被Raycaster检测，无需特殊配置
  
  // 检测相交
  const intersects = raycaster.intersectObjects(sprites);
  
  if (intersects.length > 0) {
    const intersect = intersects[0];
    const sprite = intersect.object;
    
    console.log('选中了精灵:', sprite.name);
    console.log('精灵数据:', sprite.userData);
    console.log('相交点:', intersect.point);
    console.log('距离:', intersect.distance);
    
    // 高亮效果：放大精灵
    const originalScale = sprite.userData.originalScale;
    sprite.scale.set(
      originalScale.x * 1.5,
      originalScale.y * 1.5,
      originalScale.z
    );
    
    // 3秒后恢复原大小
    setTimeout(() => {
      sprite.scale.set(
        originalScale.x,
        originalScale.y,
        originalScale.z
      );
    }, 300);
    
    // 显示选中信息
    showSelectionInfo(sprite.userData);
  }
}

// 显示选中信息
function showSelectionInfo(spriteData) {
  // 移除旧的信息显示
  const oldInfo = scene.getObjectByName('selectionInfo');
  if (oldInfo) scene.remove(oldInfo);
  
  // 创建信息精灵
  const canvas = document.createElement('canvas');
  canvas.width = 512;
  canvas.height = 128;
  const context = canvas.getContext('2d');
  
  // 绘制背景
  context.fillStyle = 'rgba(0, 0, 0, 0.8)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制文字
  context.font = 'bold 40px Arial';
  context.fillStyle = '#ffffff';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText(`选中: 精灵${spriteData.text} (ID: ${spriteData.id})`, 
    canvas.width / 2, canvas.height / 2);
  
  // 创建纹理和精灵
  const texture = new THREE.CanvasTexture(canvas);
  const material = new THREE.SpriteMaterial({ map: texture });
  const infoSprite = new THREE.Sprite(material);
  
  // 设置位置（相机上方）
  infoSprite.position.set(0, 8, 0);
  infoSprite.scale.set(8, 2, 1);
  infoSprite.name = 'selectionInfo';
  
  scene.add(infoSprite);
  
  // 5秒后移除信息
  setTimeout(() => {
    if (infoSprite.parent) scene.remove(infoSprite);
  }, 5000);
}

// 添加点击事件
window.addEventListener('click', pickSprites);

// 挂载到DOM
onMounted(() => {
  const controls = new OrbitControls(camera, containerRef.value);
  controls.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  
  // 窗口大小变化处理
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

关键点说明：

  1. 精灵创建：使用 THREE.Sprite 和 SpriteMaterial
  2. 大小控制：通过 sprite.scale.set() 控制精灵大小
  3. 朝向：精灵始终面向相机（这是Sprite的特性）
  4. 拾取：Sprite会自动被Raycaster检测，无需特殊配置
  5. 纹理创建：通常使用Canvas创建动态纹理

总结对比

模型类型关键配置特点拾取难度
点模型raycaster.params.Points.threshold需要设置阈值，可获取点索引中等
线模型raycaster.params.Line.threshold需要增大阈值，线宽有限制较高
精灵模型无需特殊配置始终面向相机，自动检测容易
网格模型无需特殊配置最常见的3D物体最容易

每个模型类型都有其特定的应用场景和拾取配置，根据实际需求选择合适的模型类型和拾取策略。

丫丫723734
关注
Three.js开发必备：射线拾取模型包含拾取gltf模型案例
前端开发工程师
07-03 1137
本文详细介绍了Three.js中射线拾取模型的应用。首先讲解了射线Ray的基本概念，包括起点.origin和方向.direction的设置方法，以及如何使用.intersectTriangle()方法检测射线与三角形的交叉点。接着介绍了射线投射器Raycaster，它通过.intersectObjects()方法实现模型拾取，返回交叉点坐标、距离和对象信息。
three.js中射线拾取模型
weixin_46002223的博客
03-08 510
【代码】three.js中射线拾取模型。
three.js 物体3D模型——尺寸测量标注
u014291990的博客
01-29 5039
在开发一些物联网、数字孪生Web3D可视化项目的时候，比如一个工厂、化工厂、变电站、园区等场景，有时候，需要进行一些尺寸测量，比如属于鼠标点击选择模型表面上两点，然后计算两点之间尺寸距离，然后使用箭头和数字进行标注。( 先用鼠标点击按钮进入测量状态，在通过鼠标点击拾取模型任意两点，然后会自动标注 )
three.js 射线拾取精灵图Sprite控制场景
yinge0508的博客
01-05 1004
效果：这里只是 鼠标点击时，改变了精灵图的材质颜色。
threejs射线拾取模型（vue3+ts）
m0_73495473的博客
01-15 703
threejs拾取物体
Three.js开发必备：场景标注标签信息最全详解包含案例
前端开发工程师
07-07 1601
通过CSS2DRenderer将HTML元素作为标签添加到3D场景中，引入扩展库、创建HTML标签、转换为CSS2模型对象及配置CSS2DRenderer等基础步骤详解，分析了利用CSS3DRenderer渲染HTML标签的方法，以及如何解决背面显示和标签偏移等问题。此外，还介绍了使用CSS3DSprite进行精灵模型标签标注的技术，包括设置精灵模型、缩放定位和批量创建标签，使用Sprite作为标签时，如何从canvas画布创建纹理对象并应用于场景标注，提供了处理外部图片资源的方案...
Three.js——粒子效果、粒子水波、粒子组成立方体
HuoZhiyan 的博客
06-08 3384
本篇文章介绍粒子相关内容，包括粒子效果、粒子水波和粒子组成立方体...
three.js 射线拾取
小城小永
06-07 426
three.js 射线拾取
Three.js CSS3D、CSS2D及精灵的区别
阿星小栈
01-10 999
Three.js CSS3D、CSS2D及精灵的区别
如何使用three.js集成令人羡慕的局部坐标系
敖丙007的博客
01-23 692
如何使用three.js集成令人羡慕的局部坐标系
three.js中常用方法
stonerao
04-14 1032
生成文字标签Sprite 生成文字标签Sprite // 显示文字 贴图canvas配置 精灵图配置 function addSprite(text, canvaOpts, sprtieOpts) { const { width, height, fontSize } = canvaOpts; // 生成map const canvas = document.create...
three.js中的事件
01-16 1118
以上一篇入门篇为例来简单的设置下3d模型当中的交互事件，上一篇我们已经完成了在3d页面中添加了一个红色球，下面我们给这个球一个点击事件让它Y轴位置上升，再设置一个鼠标移入到球上时让其变色。 1.其实three.js当中没有事件可以直接选中物体的，我们需要监听window对象来完成与3d页面的交互，通过使用到three.js当中RayCaster对象，用于在三维空间中进行鼠标拾取，原理是：相机与鼠...
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 315
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
zhangyao940330的博客
12-15 221
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
目前流行的前端框架
zwh1zwh的博客
12-11 1313
当前前端领域的技术选型非常丰富，不同的框架和工具各有侧重。为了让你快速建立一个整体印象，下面这个表格梳理了目前最主流的几个核心框架及其关键特性。框架名称核心特点学习曲线适用场景最新动态 (2025年)​- 基于组件和虚拟DOM- 灵活的JSX语法- 丰富的生态系统中等- 大型、复杂的单页应用(SPA)- 需要高度自定义和灵活性的项目- React 19 优化并发特性和服务器组件(RSC)- 与 Next.js 深度集成​- 渐进式框架，易于集成。
vue2/vue3前端创建脚手架并引入RBAC权限模型
最新发布
demotang的博客
12-18 178
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
FontAwesome图标使用全攻略
2301_80012054的博客
12-18 224
通过 CSS 可以调整图标的大小、颜色和其他样式属性。.icon {
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 241
【代码】商城后台管理系统 03 规格参数配置。
多应用统一身份认证方案-接口设计篇
专注于计算机研发知识和资讯分享
12-15 47
本文介绍了登录认证接口的改造方案，主要包括：1）统一登录流程设计，通过授权码实现多应用认证；2）新增设备登录限制功能，包括用户表添加设备限制字段和创建登录设备记录表；3）引入浏览器指纹技术加强安全验证。方案实现了集中认证与分散管理的结合，支持多应用独立鉴权，并通过设备指纹和登录次数统计增强账户安全性，同时保持各应用接口的自主性。系统架构上采用授权码与应用token并存机制，确保认证流程的灵活性与安全性。
掌握Three.js实现3D模型全景交互
- 此外，three.js还支持动画效果的添加，可以实现模型的运动和各种视觉特效，极大地丰富了Web页面的交互体验。通过使用关键帧动画、骨骼动画等技术，three.js能够制作出流畅且吸引人的动画内容。 - three.js社区...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值