Three.js使用TransformControls实现球体等比缩放获取缩放系数

核心问题原因 #

TransformControls 原生逻辑写死了判断规则：只要缩放模式下任意一个轴向手柄的显隐开关（showX/showY/showZ）设为false，中心的等比缩放手柄就会自动禁用，直接修改这几个开关无法保留等比缩放能力。
我们不需要修改控件源码，通过公开API做两层处理即可实现需求，全程复用原生交互体验，维护成本极低。
#

具体实现步骤 #

• 保留三个轴向的开关为开启状态，保证中心等比缩放手柄正常渲染
  不要修改showX/showY/showZ的默认true值，只需要在控件初始化完成后，从gizmo对象里把三个单轴缩放手柄视觉隐藏，同时屏蔽射线检测，避免用户误触单轴缩放即可。
  注意：transformControls.showX = false 这类修改轴向开关的代码绝对不要加，会直接导致中心等比手柄失效

  import { TransformControls } from 'three/addons/controls/TransformControls.js';
  
  // 初始化控件
  const transformControls = new TransformControls(camera, renderer.domElement);
  transformControls.setMode('scale'); // 切到缩放模式
  
  // 隐藏单轴缩放手柄，屏蔽交互
  const scaleGizmo = transformControls.getHelper().gizmo.scale;
  ['X', 'Y', 'Z'].forEach(axis => {
    scaleGizmo[axis].visible = false; // 视觉隐藏
    scaleGizmo[axis].raycast = () => {}; // 屏蔽射线检测，彻底防误触
  });
  
  // 把控件绑定到半径初始为1的球体上
  transformControls.attach(sphereMesh);
  scene.add(transformControls.getHelper());
  

• 监听缩放变化事件，强制三轴缩放同步，直接输出半径值
  初始球体半径为1时，初始缩放值就是1，每次拖拽触发变化时，统一三轴缩放值，取任意一轴的缩放值即为当前球体的实际半径。

  let currentRadius = 1; // 对应初始球体半径1
  transformControls.addEventListener('objectChange', () => {
    const target = transformControls.object;
    // 取单轴缩放值为基准，原生等比拖拽时三轴值本身一致，做统一赋值兜底
    currentRadius = target.scale.x;
    target.scale.set(currentRadius, currentRadius, currentRadius);
  
    // 这里拿到的currentRadius就是当前球体实际半径，可直接用于业务逻辑
    console.log('当前球体半径:', currentRadius);
  });
  
  // 可选：拖拽结束时做精度修正，避免浮点数累积误差
  transformControls.addEventListener('dragging-changed', (e) => {
    if (!e.value) { // 拖拽结束
      currentRadius = Number(currentRadius.toFixed(4));
      transformControls.object.scale.setScalar(currentRadius);
    }
  });
  

方案优势 #

• 完全复用TransformControls原生的等比缩放交互，包括拖拽灵敏度、相机自适应、手柄高亮等原生体验，不需要自己重写拖拽、射线检测、坐标转换逻辑
• 没有侵入式修改控件源码，Three.js版本升级时兼容性极强，不需要跟着迭代调整内部逻辑
• 代码量极小，逻辑清晰，后续要调整手柄样式、交互阈值都可以直接在公开的gizmo对象上修改

内容的提问来源于stack exchange，提问作者sariug