Tween.js rotation not working when using Three.js loader

1.5k Views Asked by At

I am working on a simulation project that was started a few years ago. They were using older versions of three.js and tween.js libs and I had to upgrade them for other reasons. I have a problem that piece of code that used to work, now doesn't and I can't figure out why...

Now, let me explain what is the problem. At the start of the app, meshes are loaded by calling this function for each mesh:

function loadMesh(objPath, objName, worldScene, initPosition) {
    if (initPosition == undefined) {
        initPosition = new THREE.Vector3();
    }
    var loader = new THREE.JSONLoader();
    loader.load(objPath, function (geometry, materials) {
        for (var material in materials) {
            materials[material].shading = THREE.FlatShading;
        }
        var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.set(1, 1, 1);
        mesh.name = objName;
        mesh.position = initPosition;
        mesh.positionO = initPosition.clone();

        worldScene.add(mesh);
        objects.push(mesh);
        objDict[objName] = mesh;
        loadCounter--;
    });
}

NOTE: I will just show animation creation, I call "start" method on them later, of course Now, it works when I try to move that object by changing its position with something like this:

new TWEEN.Tween(objDict["Screws"].position)
    .to({y: 5}, 1000)
    .delay(500);

but if I try to rotate my object like this, it doesn't work:

new TWEEN.Tween(objDict["ms_LidUpper"].rotation)
    .to({x: -1.571}, 1000)
    .delay(500);

I tried to solve this, but couldn't find anything... Note that this code worked before! I think the problem is JSONLoader because when I run the code in debug mode, mesh object was missing matrixRotationWorld atribute and had matrixWorldNeedsUpdate attribute on false, and in the previos app version matrixWorldNeedsUpdate was true and there was matrixRotationWorld atribute.

Any help will be greatly appriciated!

1

There are 1 best solutions below

1
On

Use tween like this way

var coords = { x: 0, y: 0 };
new TWEEN.Tween(mesh.rotation).to({x: 10, y: 10}, 3000).onUpdate(function () {
    mesh.rotation.x = coords.x;
    mesh.rotation.y = coords.y;
}).start();