MORPH TARGET INFLUENCES continuously keeps giving me UNDEFINED when animating object in three.js

So I exported this simple 2d animation (circle that morphs into a triangle) as a gltf file into my three.js project. But when i run it, I get this error: “Uncaught TypeError: Cannot set property ‘0’ of undefined at render“. This error come this line of code: “mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;

By looking at my code, i made sure my scene is my mesh. I also log the mesh geometry to see that is not undefined. I get no errors when i set my Morph Targets to TRUE either. But When i do console(console.log(mesh.morphTargetInfluences) i do get UNDEFINED which i don’t know why since all the mesh geometry is there.

<html> <head>     <title>threejs - models</title>     <style>         body{             margin: 0;             overflow: hidden;         }     </style> </head> <body> <canvas id="myCanvas"></canvas>  <script src="js/three.js"></script> <script src="js/GLTFLoader.js"></script>  <script>  var renderer,     scene,     camera,     myCanvas = document.getElementById('myCanvas'); var mesh;   //RENDERER renderer = new THREE.WebGLRenderer({   canvas: myCanvas,    antialias: true }); renderer.setClearColor(0xffffff); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);  //CAMERA camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000 );  //SCENE scene = new THREE.Scene();  //LIGHTS var light = new THREE.AmbientLight(0xffffff, 0.5); scene.add(light);  var light2 = new THREE.PointLight(0xffffff, 0.5); scene.add(light2);  var loader = new THREE.GLTFLoader();  loader.load('morphObj.gltf', function ( gltf ) {          gltf.scene.traverse( function ( node ) {              if ( node.isMesh ) {                 mesh = node;                 mesh.material.morphTargets = true;               console.log(mesh.geometry);         }          } );          //mesh.material.morphTargets = true;         console.log(mesh.morphTargetInfluences);          //console.log(mesh.material.morphTargets);      //mesh.material = new THREE.MeshLambertMaterial();     scene.add( mesh );     mesh.position.z = -10; });    //RENDER LOOP render();  var delta = 0; var prevTime = Date.now();  function render() {      delta += 0.1;      if ( mesh !== undefined ) {         console.log("mesh is not undefined!");           mesh.rotation.y += 0.01;          //animation mesh          mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;     }      renderer.render(scene, camera);      requestAnimationFrame(render); }      </script>> </body> </html> 

I’m very new to three.js so fusure I’m forgetting something in my program, but i don’t know what that is. I will really appreciate your help guys