Question

所以输入是以弧度为单位的三个欧拉角 x,y,z 我想将其转换为以中心为原点的向量位置 X、Y、Z。

因此，如果可以使用 https://threejs.org/docs/#api/en/math/Euler.toVector3 来获取 Vector，我想知道如何。也很欣赏替代的数学（正弦/余弦）解决方案。

所以在这个片段中，axesHelper 代表角度，立方体应该位于基于欧拉的位置。使用 Dat gui 实时编辑旋转。

//add Axis to represent Euler
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

//add cube to represent Vector
const geometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );

scene.add( cube );

render()

const gui = new GUI();
const angles={
    degX:0,
    degY:0,
    degZ:0,
}


gui.add( angles, 'degX',0,360,1 ).onChange(function(){
    axesHelper.rotation.x=THREE.MathUtils.degToRad(angles.degX)
    render()
    updateEULtoAngle()

});
gui.add( angles, 'degY',0,360,1 ).onChange(function(){
    axesHelper.rotation.y=THREE.MathUtils.degToRad(angles.degY)
    render()
    updateEULtoAngle()

});
gui.add( angles, 'degZ',0,360,1 ).onChange(function(){
    axesHelper.rotation.z=THREE.MathUtils.degToRad(angles.degZ)
    render()
    updateEULtoAngle()
});

console.log(THREE.MathUtils.radToDeg( axesHelper.rotation.x))
console.log(THREE.MathUtils.radToDeg( axesHelper.rotation.y))
console.log(THREE.MathUtils.radToDeg( axesHelper.rotation.z))



function updateEULtoAngle(){
    let eul= new THREE.Euler(
        THREE.MathUtils.degToRad(angles.degX),
        THREE.MathUtils.degToRad(angles.degY),
        THREE.MathUtils.degToRad(angles.degZ)
        )
    let vec= new THREE.Vector3()
    eul.toVector3(vec)
    console.log(eul,vec)
    cube.position.copy(vec)
}

虚假的视觉表现 cube following the axes Y axis

相关：但轴匹配有问题 How to convert Euler angles to directional vector?

Answer 1

Euler.toVector3() 不符合您的要求。它只是将 x、y 和 z 角度复制到相应的向量分量中。

我认为您应该看看 THREE.Spherical，它是使用球坐标的实现。您可以用两个角度（phi 和 theta）和一个半径在 3D 空间中表达一个点。然后可以使用这些数据通过 Vector3.setFromSpherical() 或 Vector3.setFromSphericalCoords() 设置 Vector3 的实例。

使用 .Euler 的“setFromVector3”将欧拉角转换为向量

1 个答案: