How to make animation with a glb file in Threejs?

Questions
, ,
1

Hi , I’m new to ThreeJs and I made my first object .
but I’ve problem that when I searched about , It makes me confused.
Here is my code below and sorry that Its too messy .
and my question! How can I animate my object ? i can just make it round and round …

I want to scroll the page then animation happen.
Should I add animation with Blender or any external app then export from there to threejs?
or I can make my animation in threejs easily?

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
var cameraPosition = camera;

cameraPosition.position.set(100,0, 120);

// TweenMax.from(cameraPosition.position.set(0,0,150), 10,{ease: Power1.ease})

camera.lookAt(new THREE.Vector3(0,-10,-20));
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setClearColor(0xffffff);
// renderer.setSize(window.screen.height,window.screen.width);
var canvas = renderer.domElement
document.body.appendChild(canvas);
render();

function render() {
    if (resize(renderer)) {
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

function resize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
        renderer.setSize(width, height, false);
    }
    return needResize;
}

window.addEventListener( 'resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight )
})

var controls = new THREE.OrbitControls(camera, renderer.domElement);
// to disable zoom
controls.enableZoom = false;

// to disable rotation
// controls.enableRotate = false;

// to disable pan
controls.enablePan = false;


var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );

var loader = new THREE.GLTFLoader();

loader.load( 'out.glb', function ( gltf ) {
    // console.log(gltf);
    //gltf.scene.position.z = -10;

    var object = gltf.scene;
    object.position.set(0,0, 0);


    scene.add( gltf.scene );

    // var xAxis = new THREE.Vector3(1,0,0);
    // rotateAroundWorldAxis(object, xAxis, Math.PI / 180);
    animation();

    function animation() {
        // object.rotation.y+= 0.008;
        renderer.render(scene,camera);
        requestAnimationFrame(function () {
            animation();
        })
    }
    // controls.noRotate = true;
    // controls.noZoom = true;
    // window.addEventListener('scroll', onscroll
    // , false);
    // window.addEventListener('wheel', onscroll, false);    var animate = function () {
    //     requestAnimationFrame(animate);
    //     renderer.render(scene, camera);
    // }

}, undefined, function ( error ) {

    console.error( error );

} );
// function wheel(event) {
//     event.preventDefault();
//
//     object.rotation.y += event.deltaY * 0.05;
// }


// mesh.rotation.x = Math.PI / 2;

// var canvas = new THREE.Object3D();



// TweenMax.from("canvas",8,{rotationY: "360", repeat: -1})
2

Hi, welcome on board :ship:

  1. Please take some time to format the code correctly: 1. Paste all your code 2. Select it 3. Click on [Preformatted text] icon 4. Click on [Blockquote] icon.
  2. Please post only the code relevant to the question.

With the code as it is, it’s hard to guess whats going on.

As for your question - it depends on what type of animation you need. Moving a cube from point A to point B can be easily achieved in code, but creating a running skeletal animation is something I would definitely recommend exporting from another software.
If you go that path, then make sure Blender can export the type of animation you want. glTF 2.0 — Blender Manual is very useful in that case.

3

Well sorry about the code,
I don’t need very complex animation.

I need an animation rotate from point A to Point B then zoom in and zoom out.
I didn’t find an example near too this situation coz of that I made this topic.

4

For this animation, I think both options are okay, as long as you can fire the event at the correct moment.

  1. Tween.js is something that definitely can help you, and looking through it’s many examples, I’m sure you’ll find lots of help.
  2. In Blender you could also very easily use Keyframe (translation, rotation, scale) animations and export as .glb. Then you can load your animation with GLTFLoader and play it as presented in Animation System docs. Just instead of calling action.play() immediately, put it into the function that runs when your user scrolls the page.

So feel free to use either option :slight_smile:

1 Like