如何在React Three Fiber中以立方体边缘为轴旋转？

你的思路方向是对的，但缩放group会导致物体变形，且没有准确把旋转轴定位到底前边缘。解决这个问题的核心是通过平移调整物体与group原点的相对位置，让group的原点刚好落在立方体的底前边缘上，这样旋转group就能实现绕目标边缘旋转，完全不需要缩放操作。

具体步骤：

• 不要缩放group，保持group的scale为默认的[1,1,1]
• 调整立方体在group内的位置，让立方体的底前边缘对齐到group的原点（也就是旋转轴的位置）
• 直接对group进行X轴旋转即可

对于自定义深度的立方体（比如你代码里的cubeDepth=0.1），需要对应调整Z轴的平移量为cubeDepth/2，确保前边缘对齐group原点；Y轴平移0.5是因为默认立方体高度为1，底部位于Y=-0.5，平移后底部对齐group的Y=0位置。

修改后的完整代码：

import { OrbitControls, useHelper } from '@react-three/drei'
import { Canvas, useFrame } from '@react-three/fiber'
import { BoxHelper } from 'three'
import { useRef } from 'react'

const Cube = ({ rotation = 0 }) => {
  const cubeDepth = 0.1
  const groupRef = useRef(null)

  useHelper(groupRef, BoxHelper, 'blue')

  useFrame(() => {
    if (groupRef.current) {
      groupRef.current.rotation.x = rotation * (Math.PI / 180)
    }
  })

  return (
    <group ref={groupRef}>
      {/* 调整立方体位置，让底前边缘对齐group原点 */}
      <mesh position={[0, 0.5, cubeDepth / 2]}>
        {/* 明确设置立方体的深度为cubeDepth */}
        <boxGeometry args={[1, 1, cubeDepth]} />
        <meshStandardMaterial color={'red'} />
      </mesh>
    </group>
  )
}

const Scene = () => {
  return (
    <Canvas className="w-screen h-screen bg-gray-400">
      <axesHelper args={[2]} />
      <gridHelper args={[10, 10]} />
      <OrbitControls maxDistance={15} minDistance={1} />
      <directionalLight position={[0, 3, 7]} />
      <Cube rotation={45} />
    </Canvas>
  )
}

export default Scene

代码说明：

1. 移除了group的scale和position属性，保持group原点在世界坐标系初始位置
2. 给boxGeometry传入args，明确设置立方体的深度为cubeDepth，避免默认尺寸不符
3. 立方体的position设置为[0, 0.5, cubeDepth/2]：
   • Y轴+0.5：把立方体底部移到group的Y=0位置
   • Z轴+cubeDepth/2：把立方体前边缘移到group的Z=0位置
4. 此时group的X轴旋转中心就是立方体的底前边缘，旋转group就能得到预期效果

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