如何根据三角法在三维中以一定角度旋转后获得新的坐标，就像codesandbox中给出的例子一样

Question

我需要你的帮助。

我知道旋转矩阵，以及如何在旋转一定角度后使用它来获得新的坐标。但我不知道在下面的代码中，新的坐标是如何被捕获的，立方体是如何围绕假想的圆旋转的。

我正在使用react三纤维-react库来使用ThreeJS。如果你不知道这个图书馆，你仍然可以弄清楚你是否擅长它的计算机图形学和数学

现场示例-https://codesandbox.io/s/capra-christmas-forked-eukvyi

function Box() {
const [ref, api] = useBox(() => ({ mass: 1, args: [1, 1, 1], position: [1, 1, 1], isKinematic: true }))
useFrame((state) => {
const t = state.clock.getElapsedTime() // get elapsed time within frame. if you new to react three fiber you can think it will get new increasing time after every sec. 
api.position.set(Math.cos(2 * t ) * 10, Math.sin(20 ) * 5, Math.sin(20) + 1.5) // how this line of code specifying coordinates (x,y,z) in terms of trigonometry 
api.rotation.set(Math.sin(t * 6), Math.cos(t * 6), Math.sin(t * 6))
})
return (
<mesh ref={ref} castShadow receiveShadow position={[10, 0, 0]}>
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
<meshLambertMaterial attach="material" color="red" side={THREE.DoubleSide} />
</mesh>
)
}

Answer 1

在您引用的代码沙盒中，他们使用圆的参数方程来围绕给定的点旋转对象，这是一个很好的可视化。

https://www.mathopenref.com/coordparamcircle.html

这个想法是根据cos(θ(改变一个轴，根据sin(θ(*θ改变另一个轴——在这种情况下是时间

api.position.set(Math.cos(2 * t) * 10, Math.sin(20 * t) * 5, Math.sin(20) + 1.5)

在你的代码中，你似乎是在根据时间改变cos函数，而不是sin函数。请尝试使用上面的代码段。代码沙盒中的第三个轴只是用来使对象在旋转时上下移动一点。你可以查看上面链接中的数学，以更好地了解正在发生的事情。