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

Questions
1

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
    }
2

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
3

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?

4

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
5

This might help:
https://threejs.org/examples/jsm/animation/AnimationClipCreator.js

1 Like
6

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…