CODEWITHSUNDEEP
javascriptthree.js
user2118784
user2118784

Reputation: 452

Rotation about model's center after moving (pan) the model

I am using Three.js to load the JSON model using JSONLoader. I am also using TrackballControls.js for basic interaction. The rotation works differently if I move (PAN) the object. How to change the rotation to the model's center after moving(PAN)?

Thanks in advance.

Upvotes: 1

Views: 318

Answers (1)

Aasha joney
Aasha joney

Reputation: 546

Since the trackball controls rotates the camera not the mesh.The rotation seems to be weird after panning.So instead of using trackballcontrols rotate mesh based on quaternion. In mousemove event include this code

trackBallControls.noRotate = true;
            if (isDragging === true) {
                var deltaMove = {
                    x: event.offsetX -previousMousePosition.x,
                    y: event.offsetY -previousMousePosition.y
                };
                var deltaRotationQuaternion = new THREE.Quaternion()
                        .setFromEuler(new THREE.Euler(toRadians(deltaMove.y * 0.3),
                                toRadians(deltaMove.x * 0.3),
                                0,
                                'XYZ'
                                ));
                if (event.which === 1) {
                    mesh.quaternion.multiplyQuaternions(deltaRotationQuaternion, mesh.quaternion);
                }
            }
            previousMousePosition = {
                x: event.offsetX,
                y: event.offsetY
            };

In mouse up event set isDragging to false. In mousedown set isDragging to true.

function toRadians(angle) {
            return angle * (Math.PI / 180);
        }

Upvotes: 1

Related Questions