MORPH TARGET INFLUENCES continuously keeps giving me UNDEFINED

Questions
, ,
1

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 literary tried everything to fix this but i got no where. I will really appreciate the help

2

/cc