How can i animate mesh ? And how to add animation actions if i has mesh.animations.length = 0

I have a method that creates planet model with disk, and i want to animate disk (want to rotate it) i listen about three js animation system but i am beginner in three js, and has no idea how can i do that, after research i see about mesh.animations and property but in this case its length is 0 how can i do that with mesh.animations ?

createModel = (planetTexture, diskTexture, options) => {
        const {
            planetPositionX = 0,
            planetPositionY = 0,
            planetPositionZ = 0,
            diskPositionX = 0,
            diskPositionY = 0,
            diskPositionZ = 0,
            diskRotationX = 0,
            diskRotationY = 0,
            diskRotationZ = 0,
            diskScaleX = 1,
            diskScaleY = 1,
            diskScaleZ = 1,
        } = options

        const planetGeometry = new THREE.SphereGeometry(100, 500, 500)
        const planetMaterial = new THREE.MeshPhongMaterial({map: planetTexture})
        const diskGeometry = new THREE.TorusGeometry(160, 10, 30, 200)
        const diskMaterial = new THREE.MeshBasicMaterial({map: diskTexture})

        const planet = new THREE.Mesh(planetGeometry, planetMaterial)
        const disk = new THREE.Mesh(diskGeometry, diskMaterial)
        const planetSystem = new THREE.Object3D()



        planet.position.set(0, 0, 0)
        disk.position.set(diskPositionX, diskPositionY, diskPositionZ)

        planetSystem.position.set(planetPositionX, planetPositionY, planetPositionZ)
        planetSystem.scale.set(scaleCoeficientXYZ, scaleCoeficientXYZ, scaleCoeficientXYZ)


        return planetSystem

If the animations array if empty, it means no animation are defined for the given 3D object.

The animation system of three.js is mostly intended to playback pre-defined animations in 3D assets. Its API is low level and optimized for performance which makes it a bit hard for manually defining animations on app level.

If you just want to animate a mesh so it moves from point A to B you probably want to use a library like GSAP or Tween.js. I suggest you search the forum for related topics and you will find some code and live examples.

1 Like

Ok thanks for answer, Can you take me good resource where i can find about pre-defined animations and how to create such 3D object with animations?

I suggest you use a tool like Blender to animate 3D models and then export them to glTF. I do not know concrete learning resources but I assume if you google this topic you should find something useful.

1 Like

This might help:

1 Like

Hi, same problem here.

No matter how I export gltf from blender, it always stores animations in gltf.animations array, not under each Object3D.animations.

In Blender, several objects have the same action assigned “animRotate”.

var obj1 = cast scene.getObjectByName(“cube”);
var obj2 = cast scene.getObjectByName(“sphere”);
var obj3 = cast scene.getObjectByName(“cone”);
when I try:
log.debug(obj1.animations.length, obj2.animations.length, obj3.animations.length)
always returns
// 0, 0, 0

I would need to get what animations do each object have currently assigned.

Tracing gltf.animations, it shows [3], but I can’t see what objects are those animations applied to…