课程链接的观点是，www.bilibili.com/cheese/play…老实说，

代码链接的观点是。github.com/buglas/robo…

课程目标

• 实现机器人关节的拖拽旋转交互。话说回来，

拖拽变换的原理与痛点

在实现拖拽旋转前。先回顾一下机器人模型的结构与常见困扰：

• URDF 模型是树状结构，无闭环。
• 在 URDF 树中，根节点是 link。其子节点是按照一个 joint、一个 link 的方式延伸的。
• joint 本身无实物，link 才有可视化对象。
• 痛点一：很多人因为 joint 没有可视化导致无法直接操作。
• 痛点二：找不到正确的父级 link 或 joint，导致变换失效。
• 痛点三：需要同时处理旋转和平移两种关节类型。

由于 joint 是没有实物的，所以只能通过其子对象–link 来监听鼠标事件；在鼠标拖拽 link 对象时对其父对象 joint 进行变换。不过，

选择 Link 图形的方法

Link 图形通常被解析为 mesh 对象。选择 mesh 的过程虽然老生常谈，但不容忽视：

主要原理

1. M1: 将鼠标点击的像素坐标转换为 WebGL 的标准化设备坐标。
2. M2: 将 NDC 转入相机所在坐标系。即用相机视图投影矩阵的逆矩阵乘以 NDC，得到鼠标在世界坐标系中的位置。
3. M3: 用相机世界坐标为起点、鼠标世界坐标为方向创建射线。
4. M4: 判断射线是否与 mesh 对象中的任意三角面相交；若相交，则该 mesh 被选中。其实，注：相机视图矩阵本质上是相机世界模型矩阵的逆矩阵。按理说，视图投影矩阵 = 相机投影矩阵 * 相机视图矩阵 相机视图矩阵 = 相机世界模型矩阵的逆矩阵

Three.js 中的代码示例

假设 canvas 填满整个窗口。需要选择 scene 场景中的所有物体：

// 创建场景
const scene = new THREE.Scene;// 创建相机
const camera = new THREE.PerspectiveCamera;camera.position.z = 5;说起来，// 定义射线检测器和鼠标坐标变量
const raycaster = new THREE.Raycaster;const mouse = new THREE.Vector2;// 鼠标点击事件处理
function onMouseClick {
// 将鼠标像素坐标转换为标准化设备坐标
mouse.x = * 2 - 1;mouse.y = - * 2 + 1;// 更新射线在世界坐标系里的起点和方向
raycaster.setFromCamera;按理说，// 检测射线与场景中物体的相交情况
const intersects = raycaster.intersectObjects;// 处理相交结果
if {
const target = intersects.object;//，…}
}
window.addEventListener;

根据选中的物体定位其所在 Link 和 Joint

ID 为每个 Mesh 的 parent 属性追踪其父级，接下来结合解析时封装好的 URDFLink（) 与 URDFJoint（) 判断父级到底是 Link 或 Joint。

// 向上层寻找可变换的 URDFJoint
function findNearestJoint {
return findParent=>isURDFJoint && type!='fixed')，}
// 向上层寻找 URDFLink
function findNearestLink {
return findParent=>isURDFLink);}
// 通用向上查找函数
function findParent{
let obj=child;while{
if) return obj;老实说，obj=obj.parent;}
}

Joint 的拖拽旋转算法

• 痛点四： 如何从二维点击到三维空间计算旋转角度？对许多人来说这一步骤最难以把握。

Pseudocode Summary:

• A. 已知：
  • A 点：鼠标点击时模型上的点。-->
  • B 点：鼠标拖拽后的点。-->
  • C 点：模型基点 O。-->
  • D 向量 u：模型旋转轴。-->
  • E 点：相机位置。.
  .

A. P 值计算—投影到旋转轴上的点 P：

P=O+*u 

B. P 与 B 所在平面 Plane 的交点 C。

C. |θ|=∠：无符号角度。

# PA·PC=|PA|*|PC|*cosθ
cosθ=/
unsignθ=acos
# 

D. s 为行列式正负符号，用于确定旋转方向：

# determinant=·u # ^ 表示叉乘
s=determinant/abs
θ=s*unsignθ # 最终角度 signed
# 

E. S 后将 θ 加到对应 joint 的当前值就可以完成更新。

注意事项： • 需保证取到正确 Plane 与 Ray 的交点，否则会出现“零增量”或误判 • 对推拉关节需改用 dot • 保持摄像头更新才能保证 NDC 与 World 坐标同步

整体代码实现示例——URDFDragControls 类

"以下仅摘录关键逻辑片段。完整实现请查看 github 仓库"

• /src/robot/URDFDragControls.ts – 拖拽控制主要类，实现事件监听、碰撞检测、参数更新等功能；话说回来，
• /src/robot/utils.ts – 工具函数。包括 `findNearestLink`、`findNearestJoint` 等；
• /src/robot/ResourceTracker.ts – 简易资源管理器，用于统一释放 Three.js 对象；

import { Color,EventDispatcher,Intersection,Material,Mesh。MeshStandardMaterial,Object3D,OrthographicCamera,PerspectiveCamera,Plane,Raycaster,Vector3 } from 'three';import { URDFJoint,URDFLink。URDFRobot } from './URDFClasses';import { findLinkVisual,findNearestJoint。findNearestLink } from './utils';import { screenToNDC } from './utils';import { ResourceTracker } from './ResourceTracker';

type CameraType = OrthographicCamera | PerspectiveCamera;type HoverType = Intersection;="" {link，:="">

class URDFDragControls extends EventDispatcher{ camera : CameraType;domElement : HTMLElement;robots : URDFRobot;curHover : HoverType | undefined; curJointValue:number=0;dragStart : Vector3=new Vector3;不过，dragEnd : Vector3=new Vector3;不过，dragging:boolean=false;enabled:boolean=true;说起来，resourceTracker=new ResourceTracker;

constructor{ super;this.camera=camera;this.domElement=domElement;this.robots=)];按理说，this.pointerdown=this.pointerdown.bind;this.pointermove=this.pointermove.bind;this.pointerup=this.pointerup.bind;this.listen，}

listen{ const el=this.domElement;el.addEventListener; 其实，el.addEventListener; el.addEventListener;}

// 鼠標移動時執行邏輯： pointermove{ ifreturn;

 const rect=this.domElement.getBoundingClientRect;const =，const ndcPos=screenToNDC;const raycaster=new Raycaster;raycaster.setFromCamera;if{ /* 對應關節正在拖動 */ ... }
else{ /* 未選擇關節時進行選取 */ ... }

}

// 選擇並高亮鏈接: if{ const hoverData=intersections;const link=findNearestLink;ifreturn，const joint=findNearestJoint;/* 高亮 */ this.highlightMaterial;/* 儲存 */ this.curHover={...hoverData。link,joint}，}

// 開始拖動: pointerdown{ ifreturn;

 const {point,joint}=this.curHover;this.curJointValue=joint.value||0;/* 紀錄起點 */
this.dragStart.copy;/* 確定 pivot */
let pivot=joint.axis.clone.transformDirection;/* 建立變換平面 tfPlane */
let tfPlane=new Plane;if{
// 推拉平面設置為與 pivot 垂直且通過 point
let v1=new Vector3.subVectors.normalize
.cross.normalize;tfPlane.setFromNormalAndCoplanarPoint;}else{
tfPlane.setFromNormalAndCoplanarPoint;}
/* 保存參數 */
Object.assign(this.curHover。{
pivot,pivotOffset:pivot.clone,tfPlane
});/* 標記正在 drag */
this.dragging=true;/* 開始事件觸發 */
this.dispatchEvent;老实说，

// 結束拖動： pointerup{ ifreturn;this.dragging=false;this.dispatchEvent;}

// 高亮 material 并记录原始 material： highlightMaterial{ link.traverse=>{ if)return;怎么说呢，let mat=obj.material as Material;obj.userData.originalMaterial=obj.material;let clone= as MeshStandardMaterial);clone.emissive=new Color;clone.emissiveIntensity=.6;obj.material=clone;})}

restoreCurHoverMat{ ifreturn;this.traverseMeshInLink=>{ mesh.material=;delete mesh.userData.originalMaterial;}) }

完整源碼請參見 GitHub 上對應文件。其实，

在 RobotVisual 中實例化與綁定事件處理器

ts

import { Renderer …} from 'three';// ... class RobotVisual extends EventDispatcher{ ... urdfDragControls=new URDFDragControls;

constructor{ ... }

loadURDF=>void){ ... }

initModel{ robot.rotation.set;scene.add，urdfDragControls.add;// 加入拖拽控制 }

listen{ urdfDragControls.addEventListener=>{ orbitControls.enabled=false});urdfDragControls.addEventListener=>{ orbitControls.enabled=true});

 orbitControls.addEventListener=>{
urdfDragControls.curHover &&

});orbitControls.addEventListener=>{ urdfDragControls.enabled=true});} }

export{ RobotVisual };

同步更新 UI 面板示例

vue