Orbit object around changing axis

Questions
1

I have a simple 3D object and I am able to rotate i.e., move with my left mouse button, around the centre of axis - works fine. When I pan using the right mouse button the axis also shifts, as such it no longer moves around it’s present axis.

How can I move the object around it’s current axis, no matter where I drag the object? Below is the complete code of script.js

var scene = new THREE.Scene();

var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper);

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.y = -200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);

var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);

var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('180319_object01.mtl', function (materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('assets/');
    objLoader.load('180319_object01.obj', function (object) {
    object.scale.set( 200, 200, 200 );
    scene.add(object);


    object.position.x = -100;
    object.position.y = -100;
    object.position.z = 0;
    });
});

var animate = function () {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render(scene, camera);
};

animate();
1 Like
2

OrbitControls does not transform the object itself just the camera.

I don’t understand this sentence. OrbitControls allows the camera to orbit around a target (the location of focus). Panning transforms the target to a new position. The target itself is a property of OrbitControls not a 3D object.

3

Ok, let me put it this way - the word pan i.e., You can drag the object with your right mouse button.
So, now drag the object to a different position and now try to rotate with your left mouse button, yu will see, how the axis of rotation has changed.

Note: It is all the default three.js mouse functions i.e., Left Mouse will rotate/ orbit, middle scroll button will Zoom-in and out, Right Mouse button Pans the camera (i.e., object gets dragged). Since these are the default three.js functions, so there is no need for me to add any mouse functions.

4

Do you try to achieve a result like this? The 3D object is now always at the same position like the target property of OrbitControls.

https://jsfiddle.net/s3rjfcc3/119/

5

Thanks for the prompt reply. Please look at this demo, it uses the same code http://dev.restadviser.com/devv/prog6/pyramid/

(i) If you simply rotate with your left mouse button, it rotates about it’s centre.
(ii) Now, drag object with your right mouse button, to some other position. Now rotate with your left mouse button, it rotates about it’s previous axis. I want it to rotate around it’s new (current) axis, no matter where the object is dragged.

1 Like
6

Have you resolved this issue?
I want to do like your purpose.
However, I’m still stuck at this.

1 Like