Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
300 views
in Technique[技术] by (71.8m points)

javascript - Rotate object around world axis

I am trying to rotate an object around the world axis. I've found this question: How to rotate a object on axis world three.js?

But it didn't solve the problem by using this function:

var rotWorldMatrix;

// Rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
    rotWorldMatrix.multiplySelf(object.matrix);        // pre-multiply
    object.matrix = rotWorldMatrix;
    object.rotation.getRotationFromMatrix(object.matrix, object.scale);
}

multiplySelf and getRotationFromMatrix are not defined (I'm getting a console error). How to fix the problem?

Update

I tried to use Quaternion, but it doesn't seem to behave correctly. I'm trying to rotate an object according to the user click, this is the function that I've written:

function mouseUp(event) {
    var x= event.clientX;
    var y= event.clientY;
    var dx= (x - xBegin);
    var dy= (y - yBegin);

    var quaternion= new THREE.Quaternion();
    quaternion.setFromAxisAngle(new THREE.Quaternion(dy,dx,0).normalize(),Math.sqrt(dx*dx+dy*dy)/250.0);
    object.quaternion.multiplyQuaternions(quaternion,object.quaternion);
}

It rotates correctly as long as the object is in vertical or horizontal position, but if it's for example at 45 degrees from the x axis, it rotates very slowly and in the opposite direction of the click.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As long as the object does not have a rotated parent, you can rotate the object around a world axis like so:

object.rotateOnWorldAxis( axis, angle );

axis must be normalized (have unit length); angle is in radians.

three.js r.92


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...