feat(OrbitControls): add mouseButtons prop to customize mouse interactions (#603)

* feat(OrbitControls): add mouseButtons prop to customize mouse interactions

- Updated OrbitControls component to support custom mouse button configurations
- Added `mouseButtons` prop to documentation and component
- Imported MOUSE enum from three.js
- Updated demo and documentation to showcase new prop

* chore(CI): update corepack installation in GitHub workflow

- Force install corepack globally using npm to ensure compatibility
- Modify workflow to use global corepack installation before enabling

Author: alvarosabu

.github/workflows/pkg.pr.new.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}

docs/guide/controls/orbit-controls.md

@@ -46,6 +46,7 @@ Is really important that the Perspective camera is set first in the canvas. Othe
 | **minZoom**         | The minimum field of view angle, in radians. Default is 0.                                                                                                                       | `0`                                                                              |
 | **maxZoom**         | The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.                                                                                   | `Infinity`                                                                       |
 | **touches**         | This object contains references to the touch actions used by the controls.                                                                                                       | `{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }`                                    |
+| **mouseButtons**    | This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.                       | `{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }`                  |
 | -                   | -                                                                                                                                                                                |
 | **enableZoom**      | Whether to enable zooming.                                                                                                                                                       | `true`                                                                           |
 | **zoomSpeed**       | How fast to zoom in and out. Default is 1.                                                                                                                                       | `1`                                                                              |

playground/vue/src/pages/controls/OrbitControlsDemo.vue

@@ -3,7 +3,7 @@
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { BasicShadowMap, MOUSE, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive } from 'vue'
 import { useState } from '../../composables/state'
 import '@tresjs/leches/styles'
@@ -36,6 +36,11 @@ const controlsState = reactive({
   zoomSpeed: 1,
   enableRotate: true,
   rotateSpeed: 1,
+  mouseButtons: {
+    LEFT: MOUSE.ROTATE,
+    MIDDLE: MOUSE.DOLLY,
+    RIGHT: MOUSE.PAN,
+  },
 })
 
 const {

src/core/controls/OrbitControls.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
-import { TOUCH } from 'three'
+import { MOUSE, TOUCH } from 'three'
 import { OrbitControls } from 'three-stdlib'
 import { onUnmounted, shallowRef, toRefs, watch } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
@@ -228,6 +228,22 @@ export interface OrbitControlsProps {
    * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
    */
   rotateSpeed?: number
+  /**
+   * This object contains references to the mouse actions used by the controls.
+   * LEFT: Rotate around the target
+   * MIDDLE: Zoom the camera
+   * RIGHT: Pan the camera
+   *
+   * @default { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }
+   * @type {{ LEFT?: number, MIDDLE?: number, RIGHT?: number }}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.mouseButtons
+   */
+  mouseButtons?: {
+    LEFT?: number
+    MIDDLE?: number
+    RIGHT?: number
+  }
 }
 
 const props = withDefaults(defineProps<OrbitControlsProps>(), {
@@ -252,6 +268,7 @@ const props = withDefaults(defineProps<OrbitControlsProps>(), {
   touches: () => ({ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }),
   rotateSpeed: 1,
   target: () => [0, 0, 0],
+  mouseButtons: () => ({ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }),
 })
 
 const emit = defineEmits(['change', 'start', 'end'])
@@ -278,6 +295,7 @@ const {
   touches,
   rotateSpeed,
   target,
+  mouseButtons,
 } = toRefs(props)
 
 const { camera: activeCamera, renderer, extend, controls, invalidate } = useTresContext()
@@ -351,6 +369,7 @@ defineExpose({ instance: controlsRef })
     :zoom-speed="zoomSpeed"
     :enable-rotate="enableRotate"
     :rotate-speed="rotateSpeed"
+    :mouse-buttons="mouseButtons"
     :args="[camera || activeCamera, domElement || renderer.domElement]"
   />
 </template>