Three.js实战--修改OrbitControls的按键

最新推荐文章于 2024-08-30 19:45:00 发布

北冥木鱼

最新推荐文章于 2024-08-30 19:45:00 发布

阅读量6.9k

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript Three.js OrbitControls 修改按键 Web前端

本文链接：https://blog.csdn.net/beimingmuyu/article/details/77484517

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Three.js实战--修改OrbitControls的按键

在Three场景中我们经常会用到OrbitControls的控制方式，但这种控制方式下，鼠标左键为旋转视角，鼠标中键为拉伸视角，鼠标右键为平移视角（如图-1）。

（图-1 OrbitControls默认控制方式）

如果这种按键排布不符合自己的想法时则需要修改OrbitControls.js的源码来达到自己想要的效果。

比如，我们希望鼠标左键为平移视角，鼠标中键为旋转视角，鼠标右键为拉伸视角（如图-2）

找到onMouseDown函数

	function onMouseDown( event ) {

		if ( scope.enabled === false ) return;

		event.preventDefault();

		switch ( event.button ) {

			case scope.mouseButtons.ORBIT:

				if ( scope.enableRotate === false ) return;

				handleMouseDownRotate( event );

				state = STATE.ROTATE;

				break;

			case scope.mouseButtons.ZOOM:

				if ( scope.enableZoom === false ) return;

				handleMouseDownDolly( event );

				state = STATE.DOLLY;

				break;

			case scope.mouseButtons.PAN:

				if ( scope.enablePan === false ) return;

				handleMouseDownPan( event );

				state = STATE.PAN;

				break;

		}

		if ( state !== STATE.NONE ) {

			document.addEventListener( 'mousemove', onMouseMove, false );
			document.addEventListener( 'mouseup', onMouseUp, false );

			scope.dispatchEvent( startEvent );

		}

	}

标红的三行分别为旋转（handleMouseDownRotate）、拉伸（handleMouseDownDolly）、平移（handleMouseDownPan）

修改这三行的顺序后再找到onMouseMove函数：

function onMouseMove( event ) {

		if ( scope.enabled === false ) return;

		event.preventDefault();

		switch ( state ) {

			case STATE.ROTATE:

				if ( scope.enableRotate === false ) return;

				handleMouseMoveRotate( event );

				break;

			case STATE.DOLLY:

				if ( scope.enableZoom === false ) return;

				handleMouseMoveDolly( event );

				break;

			case STATE.PAN:

				if ( scope.enablePan === false ) return;

				handleMouseMovePan( event );

				break;

		}

	}

修改方法同上，修改三者的次序，即可完成对OrbitControls的按键控制进行修改。

感谢阅读！