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 {
            scaleCoeficientXYZ,
            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()

        disk.rotateX(diskRotationX)
        disk.rotateY(diskRotationY)
        disk.rotateZ(diskRotationZ)

        disk.scale.setX(diskScaleX)
        disk.scale.setY(diskScaleY)
        disk.scale.setZ(diskScaleZ)

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

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

        planetSystem.add(planet)
        planetSystem.add(disk)

        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:
https://threejs.org/examples/jsm/animation/AnimationClipCreator.js

1 Like