CODEWITHSUNDEEP
javascriptgltfanimate-on-scrollanimejs
mosf
mosf

Reputation: 63

threejs, animejs, can't "animate on scroll" imported gltf files. only primitives working

I was experimenting with threejs, animations (animejs) and scroll event. here's a working codepen: https://codepen.io/cristigoia/pen/JjPMQMP

On line 30 i add the cube to the scene:

function addCube () {
    cube = new THREE.Mesh( new THREE.BoxGeometry( 50, 50, 50 ), new THREE.MeshNormalMaterial() );
    cube.position.y = 5
    cube.position.z = -100
    scene.add(cube);
}

on line 37 I init and set the timeline

function initTimeline() {
  timeline = anime.timeline({
    autoplay: false,
    duration: 4500,
    easing: 'easeOutSine'
  });
  timeline.add({
    targets: cube.position,
    x: 100,
    y: 25,
    z: -50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  timeline.add({
    targets: cube.position,
    x: 0,
    y: 0,
    z: 50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  var value = new THREE.Color(0xFFFCFC)
  var initial = new THREE.Color(0x161216)
  timeline.add({
    targets: initial,
    r: [initial.r, value.r],
    g: [initial.g, value.g],
    b: [initial.b, value.b],
    duration: 4500,
    update: () => {
      renderer.setClearColor(initial);
    }
  }, 0);
}

Ok so this is perfect, the only problem is that this is working with primitives only (box, cylinder, spherere, whatever) Whenever I try to load a custom GLTF through GLTFLoader the thing get broken and I really can't solve it even if I think I'm near to debug the problem.

I'm trying to load another model like this:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();

var something;
function addSomething() {

  loader.load("./assets/something.gltf", function(gltf) {
    something = gltf.scene;
    scene.add(something);

  });
}

and everything looks good (if I stay inside this function) but as long as I go outside the function, no matter what I do, errors happen.. (I tried different things and got different errors: from errors like "something is null", "something is not declared", to errors like "no error shown but at the same time nothing happens")

If I try to initialize the timeline and animate the model like I did above with the cube, nothing is working, and I'm stuck here. I tried different thing to solve this, but now I have to "give up" and ask for help, but I'm pretty confident it's an easy task to fix and I'm just braindead right now..

If you can show me how this can be solved I would be very grateful. Thank you

Upvotes: 0

Views: 261

Answers (1)

mosf
mosf

Reputation: 63

i solved by using this:

const gltf = await loader.loadAsync("./assets/mymodel.gltf")

and then

var mymodel = gltf.scene
scene.add(mymodel)

doing so I'm able to call "mymodel" on the timeline

Upvotes: 0

Related Questions