You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Three.js中禁用3D对象的X/Y/Z轴平移功能?

Disable Panning (Translation) in Three.js, Keep Rotation & Zoom

Got it, let's fix this for you—disabling panning is straightforward with Three.js's standard controls, and it'll resolve both the rotation point drift and accidental model displacement issues you mentioned.

Core Solution: Adjust OrbitControls Settings

OrbitControls is the most widely used controller for interactive 3D scenes, and it has a built-in flag to turn off panning entirely. Here's how to implement it step by step:

  1. Initialize OrbitControls (if you haven’t already)
  2. Set enablePan to false—this disables all panning interactions, including mouse right-click drag and touch two-finger pan

Here’s a complete code snippet to illustrate:

// Import OrbitControls (adjust the path to match your project setup)
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Assume you already have your scene, camera, and renderer configured
const controls = new OrbitControls(camera, renderer.domElement);

// Critical line: Disable all panning functionality
controls.enablePan = false;

// Optional: Confirm rotation and zoom are enabled (they’re on by default, so this is just for clarity)
controls.enableRotate = true;
controls.enableZoom = true;

// Optional: Tweak sensitivity to match your user experience needs
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;

How This Fixes Your Specific Issues

  • Eliminates rotation point drift: With panning disabled, the controls.target (the fixed point the camera orbits around) never shifts. Rotations will behave predictably without altering the pivot point.
  • Prevents accidental model displacement: Users can’t drag the model out of view anymore—since panning is fully disabled, there’s no way to move the camera laterally or vertically beyond the orbit constraints.

For TrackballUsers (If Applicable)

If you’re using TrackballControls instead, the equivalent setting to disable panning is:

controls.noPan = true;

That’s all! This setup will give you the exact interaction behavior you’re aiming for.

内容的提问来源于stack exchange,提问作者Teije

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.29 08:03:19