简体   繁体   中英

Rotate around edge instead of center

Note I'm using ThreeJS Library with the possibility to use Tween as well

Currently I have a pole which is rotation around it's center. I want it to rotate around the center of the world(In this case 0, 0, 0), but I'm currently completely stuck on how to do this properly. Imagine it as a pool stick rotating around the white ball. If someone can help me that would be appreciated.

I suppose I have to change it's position based on the angle it is currently at, but have no clue how exactly that would be done. Maybe there's an overall easier way to get the same result, but I couldn't find any.

I'm animating my rotation currently using the following in my render loop:

//Animation
pole.rotateOnAxis(getAxis(angle), -Math.PI/2 - 0.1);
angle += 0.025;
pole.rotateOnAxis(getAxis(angle), Math.PI/2 + 0.1);

function getAxis(angle) {
 return new THREE. Vector3(-Math.sin(angle), 0, Math.cos(angle));
}

Since it's quite a bit of code I put it on JSFiddle https://jsfiddle.net/1swsh0v5/1/

var render = function () {
    requestAnimationFrame( render );

    angle += 0.025;
    pole.position.x = 4 * Math.sin(angle);
    pole.position.z = 4 * Math.cos(angle);
    pole.rotation.y = angle - Math.PI/2;

    renderer.render(scene, camera);
};

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM