mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.91k stars 35.32k forks source link

After rotating the x-axis 90 degrees and then rotating the y-axis 90 degrees, the result is an incorrect angle #29487

Closed scorpio921 closed 1 hour ago

scorpio921 commented 2 hours ago

Description

Rotate the x-axis 90 degrees, and then rotate the y-axis 90 degrees at the wrong angle

Reproduction steps

Rotate the x-axis 90 degrees, and then rotate the y-axis 90 degrees at the wrong angle

Code

// code goes here

function rollCamera(axisName, radians) { const axis = new THREE.Vector3();

if (axisName === "X") {
    axis.set(1, 0, 0);
} else if (axisName === "Y") {
    axis.set(0, 1, 0);
} else if (axisName === "Z") {
    axis.set(0, 0, 1);
}

if (controls instanceof ArcballControls) {

    const offset = new THREE.Vector3().subVectors(camera.position, controls.target);

    const quaternion = new THREE.Quaternion();
    quaternion.setFromAxisAngle(axis.normalize(), radians);

     offset.applyQuaternion(quaternion);
    camera.up.applyQuaternion(quaternion);
    camera.position.copy(controls.target).add(offset);

    camera.lookAt(controls.target);

    camera.updateMatrixWorld();
    console.log('之后:',camera.position);
    controls.update();
    viewHelper.update();
}

} let dataArray = []; const animateModel = (type, direction) => { console.log(type, direction); // Enable rendering enableRender();

if (type == 'reset') {
    controls.reset();
    dataArray = []
    return;
}
dataArray.push(type);
let angle = 90
console.log(type);
const radians = type !== 'Z' && direction === 'up' || type === 'Z' && direction !== 'up' ? -(Math.PI/180)*angle : (Math.PI/180)*angle;

rollCamera(type, radians);

}

Live example

Screenshots

No response

Version

0.163.0

Device

No response

Browser

Chrome

OS

Windows

mrdoob commented 1 hour ago

Please use one of the links below for help / support: