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

05.three官方示例+编辑器+AI快速学习three.js webgl - animation - skinning - ik

news 来源：原创 2025/7/23 14:45:26

本实例主要讲解内容

这个Three.js示例展示了**反向运动学(Inverse Kinematics, IK)**在3D角色动画中的应用。通过加载一个角色模型，演示了如何使用IK技术实现自然的肢体运动控制，如手部抓取物体的动作。

核心技术包括：

  • CCD反向运动学求解器
  • 实时IK计算与应用
  • 角色头部跟踪
  • 镜面反射效果
  • 交互式控制器

在这里插入图片描述

完整代码注释

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - animation - skinning - ik</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><meta name="author" content="Antoine BERNIER (abernier)" /><link type="text/css" rel="stylesheet" href="main.css"><style>body {color:white;}#info a {color:#4d6675;}</style></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - inverse kinematics<br />Character model by <a href="https://assetstore.unity.com/packages/3d/characters/humanoids/humans/kira-lowpoly-character-100303" target="_blank" rel="noopener">Aki</a>, furnitures from <a href="https://poly.pizza" target="_blank" rel="noopener">poly.pizza</a>, scene by <a href="https://abernier.name/three.js/examples/webgl_esher.html" target="_blank" rel="noopener">abernier</a>. CC0.</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { TransformControls } from 'three/addons/controls/TransformControls.js';import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';import { CCDIKSolver, CCDIKHelper } from 'three/addons/animation/CCDIKSolver.js';import Stats from 'three/addons/libs/stats.module.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';let scene, camera, renderer, orbitControls, transformControls;let mirrorSphereCamera;const OOI = {}; // 感兴趣的对象集合let IKSolver; // IK求解器let stats, gui, conf; // 统计面板、控制面板和配置对象const v0 = new THREE.Vector3(); // 临时向量，用于计算init();async function init() {conf = {followSphere: false, // 相机是否跟随球体turnHead: true, // 头部是否转向球体ik_solver: true, // 是否自动更新IKupdate: updateIK // 手动更新IK的函数};scene = new THREE.Scene();scene.fog = new THREE.FogExp2( 0xffffff, .17 ); // 设置指数雾scene.background = new THREE.Color( 0xffffff ); // 设置背景色为白色camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.001, 5000 );camera.position.set( 0.9728517749133652, 1.1044765132727201, 0.7316689528482836 );camera.lookAt( scene.position );// 添加环境光，照亮整个场景const ambientLight = new THREE.AmbientLight( 0xffffff, 8 ); // 柔和的白色光scene.add( ambientLight );// 初始化DRACO加载器，用于加载压缩的GLTF模型const dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath( 'jsm/libs/draco/' );const gltfLoader = new GLTFLoader();gltfLoader.setDRACOLoader( dracoLoader );// 加载GLTF模型const gltf = await gltfLoader.loadAsync( 'models/gltf/kira.glb' );gltf.scene.traverse( n => {// 收集感兴趣的对象，用于后续控制if ( n.name === 'head' ) OOI.head = n;if ( n.name === 'lowerarm_l' ) OOI.lowerarm_l = n;if ( n.name === 'Upperarm_l' ) OOI.Upperarm_l = n;if ( n.name === 'hand_l' ) OOI.hand_l = n;if ( n.name === 'target_hand_l' ) OOI.target_hand_l = n;if ( n.name === 'boule' ) OOI.sphere = n; // 球体对象if ( n.name === 'Kira_Shirt_left' ) OOI.kira = n; // 角色主体} );scene.add( gltf.scene );// 记录球体的初始位置，用于轨道控制器const targetPosition = OOI.sphere.position.clone();// 将球体附加到角色的左手上，使其跟随手部移动OOI.hand_l.attach( OOI.sphere );// 创建镜面球体的立方相机const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );scene.add( mirrorSphereCamera );// 使用立方相机的渲染结果作为球体的环境贴图，实现镜面效果const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );OOI.sphere.material = mirrorSphereMaterial;// 将角色的骨骼根节点添加到角色对象中OOI.kira.add( OOI.kira.skeleton.bones[ 0 ] );// 设置IK求解器配置const iks = [{target: 22, // "target_hand_l" 目标对象IDeffector: 6, // "hand_l" 效应器ID（手）links: [{index: 5, // "lowerarm_l" 下臂rotationMin: new THREE.Vector3( 1.2, - 1.8, - .4 ), // 最小旋转角度rotationMax: new THREE.Vector3( 1.7, - 1.1, .3 )  // 最大旋转角度},{index: 4, // "Upperarm_l" 上臂rotationMin: new THREE.Vector3( 0.1, - 0.7, - 1.8 ),rotationMax: new THREE.Vector3( 1.1, 0, - 1.4 )},],}];// 创建CCDIK求解器，用于计算反向运动学IKSolver = new CCDIKSolver( OOI.kira, iks );// 创建IK辅助工具，可视化IK链const ccdikhelper = new CCDIKHelper( OOI.kira, iks, 0.01 );scene.add( ccdikhelper );// 创建控制面板gui = new GUI();gui.add( conf, 'followSphere' ).name( 'follow sphere' ); // 相机是否跟随球体gui.add( conf, 'turnHead' ).name( 'turn head' ); // 头部是否转向球体gui.add( conf, 'ik_solver' ).name( 'IK auto update' ); // 是否自动更新IKgui.add( conf, 'update' ).name( 'IK manual update()' ); // 手动更新IK按钮gui.open();// 初始化渲染器renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate ); // 设置动画循环document.body.appendChild( renderer.domElement );// 初始化轨道控制器，允许用户旋转和缩放相机orbitControls = new OrbitControls( camera, renderer.domElement );orbitControls.minDistance = 0.2;orbitControls.maxDistance = 1.5;orbitControls.enableDamping = true; // 启用阻尼效果，使相机移动更平滑orbitControls.target.copy( targetPosition ); // 设置控制器目标位置// 初始化变换控制器，允许用户交互式移动、旋转和缩放对象transformControls = new TransformControls( camera, renderer.domElement );transformControls.size = 0.75;transformControls.showX = false; // 不显示X轴transformControls.space = 'world'; // 在世界坐标系下操作transformControls.attach( OOI.target_hand_l ); // 附加到左手目标对象scene.add( transformControls.getHelper() ); // 添加控制器辅助工具// 当使用变换控制器时，禁用轨道控制器transformControls.addEventListener( 'mouseDown', () => orbitControls.enabled = false );transformControls.addEventListener( 'mouseUp', () => orbitControls.enabled = true );// 添加性能统计面板stats = new Stats();document.body.appendChild( stats.dom );// 添加窗口大小变化事件监听window.addEventListener( 'resize', onWindowResize, false );}function animate( ) {if ( OOI.sphere && mirrorSphereCamera ) {// 更新镜面球体的反射效果OOI.sphere.visible = false; // 临时隐藏球体，避免反射自身OOI.sphere.getWorldPosition( mirrorSphereCamera.position ); // 将相机放置在球体位置mirrorSphereCamera.update( renderer, scene ); // 更新立方相机渲染OOI.sphere.visible = true; // 重新显示球体}if ( OOI.sphere && conf.followSphere ) {// 相机跟随球体OOI.sphere.getWorldPosition( v0 );orbitControls.target.lerp( v0, 0.1 ); // 平滑过渡到球体位置}if ( OOI.head && OOI.sphere && conf.turnHead ) {// 头部转向球体OOI.sphere.getWorldPosition( v0 );OOI.head.lookAt( v0 );// 调整头部旋转，使其看起来更自然OOI.head.rotation.set( OOI.head.rotation.x, OOI.head.rotation.y + Math.PI, OOI.head.rotation.z );}if ( conf.ik_solver ) {// 更新IK求解器updateIK();}orbitControls.update(); // 更新轨道控制器renderer.render( scene, camera ); // 渲染场景stats.update(); // 更新性能统计}function updateIK() {// 更新IK求解器if ( IKSolver ) IKSolver.update();// 重新计算所有蒙皮网格的边界球体scene.traverse( function ( object ) {if ( object.isSkinnedMesh ) object.computeBoundingSphere();} );}function onWindowResize() {// 窗口大小变化时调整相机和渲染器camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}</script></body>
</html>

反向运动学原理与应用

反向运动学(IK)是计算机动画中的重要技术，与正向运动学(FK)相对。

正向运动学与反向运动学的区别

  • 正向运动学(FK)：从父关节到子关节的运动传递方式。例如，当你移动肩膀时，上臂、下臂和手都会随之移动。这是传统骨骼动画的工作方式。

  • 反向运动学(IK)：根据末端效应器(如手或脚)的目标位置，计算出所有关节的旋转角度。例如，当你指定手要抓住某个物体时，IK系统会自动计算出肩膀、上臂和下臂的正确角度。

CCD IK求解器

本示例使用了Three.js提供的**CCDIK(Cyclic Coordinate Descent)**求解器：

  • 工作原理：从末端效应器开始，逐个调整关节角度，使效应器逐渐接近目标位置，直到达到收敛条件或最大迭代次数。

  • 参数配置：

    • target：目标位置对象ID
    • effector：末端效应器ID
    • links：关节链，每个关节有最小和最大旋转限制
    • 可以配置多个独立的IK链
IK在游戏和动画中的应用

IK技术在游戏和动画中有广泛应用：

  1. 角色交互：角色抓取物体、攀爬、游泳等动作
  2. 脚部放置：角色在不平整地面行走时自动调整脚部位置和姿态
  3. 面部表情：控制面部骨骼实现表情动画
  4. 物理模拟：与物理引擎结合实现更真实的动作

IK技术可以大大减少动画师的工作量，尤其是对于复杂的肢体运动。同时，它也能使角色行为更加自然，增强游戏和虚拟环境的沉浸感。

相关文章：

05.three官方示例+编辑器+AI快速学习three.js webgl - animation - skinning - ik

本实例主要讲解内容 这个Three.js示例展示了**反向运动学(Inverse Kinematics, IK)**在3D角色动画中的应用。通过加载一个角色模型&#xff0c;演示了如何使用IK技术实现自然的肢体运动控制&#xff0c;如手部抓取物体的动作。 核心技术包括&#xff1a; CCD反向运动学求解器…...

编程日记 2025/7/23 14:45:26

MYSQL数据库集群高可用和数据监控平台

项目环境 项目拓扑结构 软硬件环境清单 软硬件环境清单 软硬件环境清单 主机名IP硬件软件 master1 192.168.12.130 VIP&#xff1a;192.168.12.200 cpu:1颗2核 内 存&#xff1a;2GB HDD&#xff1a;20GB 网 络&#xff1a;NAT VmWare17 OpenEuler22.03 SP4 MySql8.0.3…...

编程日记 2025/7/19 11:53:07

《异常链机制详解：如何优雅地传递Java中的错误信息？》

大家好呀&#xff01;&#x1f44b; 作为一名Java开发者&#xff0c;相信你一定见过各种奇奇怪怪的异常报错。但有没有遇到过这样的情况&#xff1a;明明只调用了一个方法&#xff0c;却看到异常信息像俄罗斯套娃一样一层层展开&#xff1f;&#x1f914; 这就是我们今天要讲的…...

编程日记 2025/7/22 15:26:21

MySQL 数据库集群部署、性能优化及高可用架构设计

MySQL 数据库集群部署、性能优化及高可用架构设计 集群部署方案 1. 主从复制架构 传统主从复制&#xff1a;配置一个主库(Master)和多个从库(Slave)GTID复制&#xff1a;基于全局事务标识符的复制&#xff0c;简化故障转移半同步复制&#xff1a;确保至少一个从库接收到数据…...

编程日记 2025/7/23 14:39:53

什么是深度神经网络

深度神经网络（DNN）详细介绍 1. 定义与核心原理 深度神经网络（Deep Neural Network, DNN）是一种具有多个隐藏层的人工神经网络模型，其核心在于通过层次化的非线性变换逐步提取输入数据的高层次抽象特征。与浅层神经网络相比，DNN的隐藏层数量通常超过三层，例如VGGNet、R…...

编程日记 2025/7/23 14:30:10

深入解析PyTorch中MultiheadAttention的隐藏参数add_bias_kv与add_zero_attn

关键背景 最近在学习pytorch中的源码尤其是nn.modules下算子的实现&#xff0c;针对activation.py下MultiheadAttention下有两个不常见的参数的使用比较有趣&#xff0c;因为时序领域很少使用这两个参数&#xff08;add_bias_kv和add_zero_attn&#xff09;&#xff0c;但是其…...

编程日记 2025/7/23 14:26:36

最大化效率和性能：AKS 中节点池的强大功能

什么是节点池 在 Azure Kubernetes 服务 (AKS) 中&#xff0c;相同配置的节点会被分组到节点池中。这些节点池包含运行应用程序的底层虚拟机。创建 AKS 集群时&#xff0c;您需要定义初始节点数及其大小 (SKU)。随着应用程序需求的变化&#xff0c;您可能需要更改节点池的设置…...

编程日记 2025/7/23 14:29:12

用户态到内核态：Linux信号传递的九重门（一）

1. 信号的认识 1.1. 信号的特点 异步通知&#xff1a;信号是异步的&#xff0c;发送信号的进程无需等待接收进程的响应。预定义事件&#xff1a;每个信号对应一个预定义的事件&#xff08;如终止、中断、段错误等&#xff09;。 轻量级&#xff1a;信号不携带大量数据&#xf…...

编程日记 2025/7/20 4:31:21

c语言第一个小游戏：贪吃蛇小游戏01

hello啊大家好 今天我们用一个小游戏来增强我们的c语言&#xff01; 那就是贪吃蛇 为什么要做一个贪吃蛇小游戏呢&#xff1f; 因为这个小游戏所涉及到的知识有c语言的指针、数组、链表、函数等等可以让我们通过这个游戏来巩固c语言&#xff0c;进一步认识c语言。 一.我们先…...

编程日记 2025/7/23 1:26:40

JAVA EE_网络原理_网络层

晨雾散尽&#xff0c;花影清晰。 ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ----------陳長生. ❀主页&#xff1a;陳長生.-CSDN博客❀ &#x1f4d5;上一篇&#xff1a;数据库Mysql_联…...

编程日记 2025/7/20 19:57:08

前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读

按照加载阶段、渲染阶段和交互阶段三个维度进行系统性阐述&#xff1a; 在现代 Web 开发中&#xff0c;性能不再是锦上添花&#xff0c;而是决定用户体验与业务成败的关键因素。为了全面监控与优化网页性能&#xff0c;我们可以将性能指标划分为加载阶段、渲染阶段、和交互阶段…...

编程日记 2025/7/20 6:43:30

Flink 系列之十五 - 高级概念 - 窗口

之前做过数据平台&#xff0c;对于实时数据采集&#xff0c;使用了Flink。现在想想&#xff0c;在数据开发平台中&#xff0c;Flink的身影几乎无处不在&#xff0c;由于之前是边用边学&#xff0c;总体有点混乱&#xff0c;借此空隙&#xff0c;整理一下Flink的内容&#xff0c…...

编程日记 2025/7/20 5:26:40

控制台打印带格式内容

1. 场景 很多软件会在控制台打印带颜色和格式的文字&#xff0c;需要使用转义符实现这个功能。 2. 详细说明 2.1.转义符说明 样式开始&#xff1a;\033[参数1;参数2;参数3m 可以多个参数叠加&#xff0c;若同一类型的参数&#xff08;如字体颜色&#xff09;设置了多个&…...

编程日记 2025/7/21 8:34:39

Linux为啥会重新设置中断请求号与中断向量号之间的关系？

Linux内核重新设置中断请求号&#xff08;IRQ&#xff09;与中断向量号之间的关系&#xff0c;主要出于以下核心原因和设计考量&#xff1a; ​1. 硬件多样性与抽象需求​ ​硬件中断号&#xff08;HW Interrupt ID&#xff09;的差异​ 不同处理器架构的中断控制器&#xff08…...

编程日记 2025/7/19 22:22:37

自然语言处理NLP中的连续词袋（Continuous bag of words，CBOW）方法、优势、作用和程序举例

自然语言处理NLP中的连续词袋&#xff08;Continuous bag of words&#xff0c;CBOW&#xff09;方法、优势、作用和程序举例 目录 自然语言处理NLP中的连续词袋&#xff08;Continuous bag of words&#xff0c;CBOW&#xff09;方法、优势、作用和程序举例一、连续词袋( Cont…...

编程日记 2025/7/23 14:38:52

计算机网络笔记(二十二)——4.4网际控制报文协议ICMP

4.4.1ICMP报文的种类 ICMP&#xff08;Internet Control Message Protocol&#xff09;是IP协议的辅助协议&#xff0c;主要用于传递控制消息、错误报告和诊断信息。其报文分为两大类&#xff1a;查询报文和错误报告报文。 1. 错误报告报文&#xff08;Error Messages&#x…...

编程日记 2025/7/23 6:12:55

【AI论文】作为评判者的感知代理：评估大型语言模型中的高阶社会认知

摘要&#xff1a;评估大型语言模型&#xff08;LLM&#xff09;对人类的理解程度&#xff0c;而不仅仅是文本&#xff0c;仍然是一个开放的挑战。 为了弥合这一差距&#xff0c;我们引入了Sentient Agent作为评判者&#xff08;SAGE&#xff09;&#xff0c;这是一个自动评估框…...

编程日记 2025/7/19 7:28:07

Kubernetes生产实战(二十七)：精准追踪Pod数据存储位置

在生产环境中&#xff0c;快速定位Pod数据的物理存储位置是运维人员的基本功。本文将揭秘Kubernetes存储系统的核心原理&#xff0c;并提供一套经过实战检验的定位方法体系。 一、存储架构全景图 K8S存储架构 Pod --> Volume Mount --> PVC --> PV --> Storage P…...

编程日记 2025/7/23 10:48:36

极新携手火山引擎，共探AI时代生态共建的破局点与增长引擎

在生成式AI与行业大模型的双重驱动下&#xff0c;人工智能正以前所未有的速度重构互联网产业生态。从内容创作、用户交互到商业决策&#xff0c;AI技术渗透至产品研发、运营的全链条&#xff0c;推动效率跃升与创新模式变革。然而&#xff0c;面对AI技术迭代的爆发期&#xff0…...

编程日记 2025/7/20 19:59:32

[SIGPIPE 错误] 一个 Linux socket 程序，没有任何报错打印直接退出程序

1. 问题 在编写一个程序的时候&#xff0c;当然程序很复杂&#xff0c;遇到了一个 Linux socket 程序&#xff0c;没有任何报错打印直接退出程序&#xff0c;但是在程序里面我有很多 error log &#xff0c;在程序退出的时候完全没有打印。为了说明问题&#xff0c;我编写了一…...

编程日记 2025/7/23 14:45:26

Qt 界面优化（绘图）

目录 1. 绘图基本概念2. 绘制各种形状2.1 绘制线段2.2 绘制矩形2.3 绘制圆形2.4 绘制文本2.5 设置画笔2.6 设置画刷 3. 绘制图片3.1 绘制简单图片3.2 平移图片3.3 缩放图片3.4 旋转图片 4. 其他设置4.1 移动画家位置4.2 保存/加载画家的状态 5. 特殊的绘图设备5.1 QPixmap5.2 Q…...

编程日记 2025/7/23 14:29:12

AQS（AbstractQueuedSynchronizer）解析

文章目录 一、AQS简介二、核心设计思想2.1 核心设计思想回顾2.2 CLH锁队列简介2.3 AQS对CLH队列的改动及其原因 三、核心组件详解3.1 state 状态变量3.2 同步队列 (FIFO双向链表) 四、核心方法深度解析4.1 获取同步状态 (独占模式) - acquire(int arg)4.2 释放同步状态 (独占模…...

编程日记 2025/7/23 14:30:10

Java并发编程常见问题与陷阱解析

引言 随着计算机硬件技术的飞速发展&#xff0c;多核处理器已经变得普遍&#xff0c;Java并发编程的重要性也日益凸显。然而&#xff0c;多线程编程并非易事&#xff0c;其中充满了许多潜在的问题和陷阱。作为一名Java开发工程师&#xff0c;掌握并发编程的常见问题及其解决方案…...

编程日记 2025/7/23 10:46:46

DEEPPOLAR：通过深度学习发明非线性大核极坐标码（1）

原文&#xff1a;《DEEPPOLAR: Inventing Nonlinear Large-Kernel Polar Codes via Deep Learning》 摘要 信道编码设计的进步是由人类的创造力推动的&#xff0c;而且恰如其分地说&#xff0c;这种进步是零星的。极性码是在Arikan极化核的基础上开发的&#xff0c;代表了编码…...

编程日记 2025/7/21 20:39:29

Java多态详解

Java多态详解 什么是多态&#xff1f; 比如我们说&#xff1a;“驾驶一辆车”&#xff0c;有人开的是自行车&#xff0c;有人开的是摩托车&#xff0c;有人开的是汽车。虽然我们都说“开车”&#xff0c;但“怎么开”是由具体的车类型决定的&#xff1a;“开”是统一的动作&a…...

编程日记 2025/7/18 7:25:17

go程序编译成动态库，使用c进行调用

以下是使用 Go 语言打包成 .so 库并使用 C 语言调用的完整步骤&#xff1a; 1. Go 语言打包成 .so 库 &#xff08;1&#xff09;编写 Go 代码 创建一个 Go 文件&#xff08;如 calculator.go&#xff09;&#xff0c;并定义需要导出的函数。导出的函数名必须以大写字母开头…...

编程日记 2025/7/19 11:04:32

iVX：图形化编程与组件化的强强联合

在数字化浪潮中&#xff0c;软件开发范式正经历着从文本到图形的革命性转变。iVX 作为国产可视化编程领域的领军者&#xff0c;以 “图形化逻辑 组件化架构” 的双重创新&#xff0c;重新定义了软件开发的效率边界。其技术突破不仅体现在开发方式的革新&#xff0c;更通过一系…...

编程日记 2025/7/18 7:47:10

华为配置篇-RSTP/MSTP实验

MSTP 一、简介二、常用命令总结三、实验 一、简介 RSTP&#xff08;快速生成树协议&#xff09;​ RSTP&#xff08;Rapid Spanning Tree Protocol&#xff09;是 STP 的改进版本&#xff0c;基于 ​​IEEE 802.1w 标准​​&#xff0c;核心目标是解决传统 STP 收敛速度慢的问…...

编程日记 2025/7/14 5:42:18

端口号被占用怎么解决

windows环境下端口号被占用怎么解决 win r 快捷键打开cmd输入netstat -ano|findstr 端口号 通过这个命令找到pidtaskkill /pid pid端口号 /t /f 如下图所示 命令解读 netstat 是一个网络统计工具&#xff0c;它可以显示协议统计信息和当前的TCP/IP网络连接。 -a 参数告诉 nets…...

编程日记 2025/7/23 1:30:07

GO语言-导入自定义包

文章目录 1. 项目目录结构2. 创建自定义包3. 初始化模块4. 导入自定义包5. 相对路径导入 在Go语言中导入自定义包需要遵循一定的目录结构和导入规则。以下是详细指南&#xff08;包含两种方式&#xff09;&#xff1a; 1. 项目目录结构 方法1&#xff1a;适用于Go 1.11 &#…...

编程日记 2025/7/23 11:02:07

ES常识5：主分词器、子字段分词器

文章目录 一、主分词器&#xff1a;最基础的文本处理单元主分词器的作用典型主分词器示例 二、其他类型的分词器&#xff1a;解决主分词器的局限性1. 子字段分词器&#xff08;Multi-fields&#xff09;2. 搜索分词器&#xff08;Search Analyzer&#xff09;3. 自定义分词器&a…...

编程日记 2025/7/18 13:59:39

NoSQL数据库技术与应用复习总结【看到最后】

第1章 初识NoSQL 1.1 大数据时代对数据存储的挑战 1.高并发读写需求 2.高效率存储与访问需求 3.高扩展性 1.2 认识NoSQL NoSQL--非关系型、分布式、不提供ACID的数据库设计模式 NoSQL特点 1.易扩展 2.高性能 3.灵活的数据模型 4.高可用 NoSQL拥有一个共同的特点&am…...

编程日记 2025/7/13 6:17:31

单片机-STM32部分：12、I2C

飞书文档https://x509p6c8to.feishu.cn/wiki/MsB7wLebki07eUkAZ1ec12W3nsh 一、简介 IIC协议&#xff0c;又称I2C协议&#xff0c;是由PHILP公司在80年代开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备&#xff0c;IIC属于半双工同步通信方式。 IIC是一种同步…...

编程日记 2025/7/18 18:39:21

【英语笔记（四）】诠释所有16种英语时态，介绍每种时态下的动词变形！！含有所有时态的的动词变形汇总表格

1 时态的单词构成 1.1 现在 1.1.1 一般现在时态 动词原形动词原形s&#xff08;第三人称单数&#xff09; 1.1.1.1 表达事实 I eat carrots. 我吃胡萝卜&#xff1a;我是吃胡萝卜这种食物的.&#xff08;这个是事实陈述&#xff09; The rabbit eats carrots. 兔子吃胡萝卜…...

编程日记 2025/7/23 6:02:12

【质量管理】什么是过程？

在文章【质量管理】谁是顾客&#xff1f;什么是质量链&#xff1f;-CSDN博客 中我们了解了什么是顾客&#xff0c;顾客不仅仅是企业以外的人&#xff0c;在企业的内部我们也有大大小小的顾客。并且我们了解了什么是质量链&#xff0c;企业内部的各种供给方和客户形成了质量链。…...

编程日记 2025/7/22 9:04:59

效率办公新工具：PDF Reader Pro V5.0功能解析与使用体验

在日常文档处理与数字办公的场景中&#xff0c;PDF 文件依然是主流格式之一。从合同审批、项目文档、财务报表&#xff0c;到技术方案和用户手册&#xff0c;PDF 的编辑、转换、标注、归档需求始终存在。 面对这些需求&#xff0c;越来越多用户希望有一款功能完整、跨平台、智…...

编程日记 2025/7/19 11:06:54

Java对象内存布局和对象头

1、面试题 1&#xff09;说下JUC&#xff0c;AQS的大致流程 CAS自旋锁&#xff0c;是获取不到锁就一直自旋吗&#xff1f; 2&#xff09;CAS和synchronized区别在哪里&#xff0c;为什么CAS好&#xff0c;具体优势在哪里&#xff1f; 3&#xff09;sychro…...

编程日记 2025/7/20 16:20:44

Vue 跨域解决方案及其原理剖析

在现代 Web 开发中&#xff0c;跨域问题是前端开发者经常面临的挑战之一。当使用 Vue.js 构建应用时&#xff0c;跨域请求的处理尤为重要。本文将深入探讨 Vue 解决跨域的多种方法及其背后的原理&#xff0c;帮助开发者更好地理解和应对这一常见问题。 一、跨域问题概述 1. 同…...

编程日记 2025/7/19 4:53:38

TikTok 互动运营干货：AI 助力提升粘性

在 TikTok 运营的众多环节中&#xff0c;与用户的互动是建立紧密联系、提升账号粘性的关键所在。及时且真诚地回复评论和私信&#xff0c;能让用户切实感受到你的关注与尊重&#xff0c;从而极大地增强他们对你的好感与粘性。对于用户提出的问题&#xff0c;要以耐心、专业的态…...

编程日记 2025/7/20 18:43:52

Kids A-Z安卓版：儿童英语启蒙的优质选择

Kids A-Z安卓版 是一款由北美知名分级读物厂商 Learning A-Z 官方推出的英语分级学习应用&#xff0c;也被称为 Raz-Kids app。它专为 K-5 年级的学生设计&#xff0c;提供丰富的英语学习资源和互动学习体验&#xff0c;帮助孩子们在轻松愉快的环境中提升英语能力。通过动画、互…...

编程日记 2025/7/17 4:48:58

接口继承与扩展的使用技巧

在 TypeScript 中&#xff0c;接口继承和扩展是非常强大且灵活的功能&#xff0c;可以帮助我们更高效地管理类型和提高代码的可重用性。接口继承使得一个接口可以从另一个接口继承属性和方法&#xff0c;而接口扩展允许我们通过组合多个接口来构建更复杂的结构。这些特性使得 T…...

编程日记 2025/7/19 5:56:15

【React】Craco 简介

Craco 简介 Craco (Create React App Configuration Override) 是一个用于自定义 Create React App (CRA) 配置的工具&#xff0c;无需 eject&#xff08;弹出&#xff09;项目。 为什么需要 Craco Create React App 虽然提供了零配置的 React 开发体验&#xff0c;但其配置…...

编程日记 2025/7/23 1:39:19

HTML5中的Microdata与历史记录管理详解

Microdata 简介 Microdata 是 HTML5 引入的一种标记方式&#xff0c;用于在网页中嵌入机器可读的语义信息。通过使用 Microdata&#xff0c;开发者可以在 HTML 元素中添加特定的属性&#xff0c;以便搜索引擎和其他工具更好地理解网页内容。 Microdata 的核心属性包括 itemsc…...

编程日记 2025/7/22 19:35:24

UNet网络 图像分割模型学习

UNet 由Ronneberger等人于2015年提出&#xff0c;专门针对医学图像分割任务&#xff0c;解决了早期卷积网络在小样本数据下的效率问题和细节丢失难题。 一 核心创新 1.1对称编码器-解码器结构 实现上下文信息与高分辨率细节的双向融合 如图所示&#xff1a;编码器进行了4步&…...

编程日记 2025/7/20 21:19:51

Babel 深度解析：现代 JavaScript 开发的桥梁

1. 什么是 Babel&#xff1f; Babel 是一个 JavaScript 编译器&#xff08;又称转译器&#xff09;&#xff0c;核心使命是解决 JavaScript 的环境兼容性问题。它允许开发者使用最新的语言特性&#xff08;如 ES6、JSX、TypeScript&#xff09;&#xff0c;同时将代码转换为旧…...

编程日记 2025/7/19 22:29:20

MyBatis源码解读2（2.1、核心对象）

二、MyBatis的核心对象 2.1、核心对象 2.1、MappedStatement MyBatis其实是对JDBC的进一步封装&#xff0c;我们都知道JDBC有几个重要的对象&#xff1a; StatementPrepared StatementCallable StatementResultSet Statement、Prepared Statement、Callable Statement分别…...

编程日记 2025/7/22 2:27:32

03.three官方示例+编辑器+AI快速学习webgl_animation_multiple

本实例主要讲解内容 这个示例展示了Three.js中骨骼动画的高级应用技巧&#xff0c;重点演示了如何使用SkeletonUtils.clone()方法复制模型&#xff0c;并展示了两种不同的骨骼动画管理方式&#xff1a; 独立骨骼模式&#xff1a;每个模型拥有独立的骨骼结构&#xff0c;可播放…...

编程日记 2025/7/21 10:24:15

无锁秒杀系统设计：基于Java的高效实现

引言 在电商促销活动中&#xff0c;秒杀场景是非常常见的。为了确保高并发下的数据一致性、性能以及用户体验&#xff0c;本文将介绍几种不依赖 Redis 实现的无锁秒杀方案&#xff0c;并提供简化后的 Java 代码示例和架构图。 一、基于数据库乐观锁机制 ✅ 实现思路&#xf…...

编程日记 2025/7/22 2:28:03

MyBatis快速入门——实操

默认&#xff1a;电脑搭建好了Maven环境 本次入门实验使用的idea版本&#xff1a;ideaU2022.1 目录 一&#xff1a;前期准备工作 1. 创建一个springboot工程 2. Maven环境配置 3. 在mysql数据库中创建一个user表 4. 编写实体类User 二&#xff1a; 引入MyBatis的相关依赖…...

编程日记 2025/7/20 22:46:56

假如你的项目是springboot+vue怎么解决跨域问题

1. 前端代理&#xff08;开发环境推荐&#xff09; 适用场景&#xff1a;Vue 开发环境调试时&#xff0c;避免直接请求后端接口的跨域问题。 实现步骤&#xff1a; 在 Vue 项目的 vue.config.js 中配置代理&#xff1a; module.exports {devServer: {proxy: {/api: { // 代理…...

编程日记 2025/7/19 1:28:06