Morph Target Influence not working

Hi everyone,
I’m new to BabylonJs and I’ve been trying to use morph targets to make an imported character model’s mouth move using morph targets but every time I try to change it’s influence using mesh.morphTargetManager.getTarget(key).influence = 1; the position of my character models mouth doesn’t change. I even tried writing console.log(mesh.morphTargetManager.getTarget(key).influence = 1); to the console and the influence said 1 even though the mouth still didn’t move
If you need my source code I’ve pasted it here.

var canvas = document.getElementById(“renderCanvas”);
var currentGroup;
var scrambleUp = function(data) {
for (index = 0; index < data.length; index ++) {
data[index] += 0.4 * Math.random();
}
}
var createScene = function () {
var scene = new BABYLON.Scene(engine);
//var camera = new BABYLON.FreeCamera(“camera1”, new BABYLON.Vector3(0, 5, -10), scene);
var camera = new BABYLON.ArcRotateCamera(“camera1”, Math.PI / -2, 1, 3, new BABYLON.Vector3(0, 3, 0), scene);
camera.attachControl(canvas, true);
//camera.position = new BABYLON.Vector3(0, 50, -40);
var light = new BABYLON.HemisphericLight(“light1”, new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var ground = BABYLON.Mesh.CreateGround(“ground1”, 6, 6, 2, scene);
var assetsManager = new BABYLON.AssetsManager(scene);
var gui;

    var scales = [];
var url;
var fileName;
    
    url = 'https://raw.githubusercontent.com/chris45242/BabylonModel/main/';
    fileName = "project.blend1.glb";
    //fileName = "scene.babylon";  
    
    var manager = new BABYLON.MorphTargetManager(scene);

BABYLON.SceneLoader.ImportMesh("", url, fileName, scene, function (meshes, animationGroups, particleSystems, skeletons){
var casi = meshes[0];
casi.setParent(null);
scene.stopAllAnimations();

scene.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride();
scene.animationPropertiesOverride.enableBlending = true;
scene.animationPropertiesOverride.blendingSpeed = 0.02;
scene.animationPropertiesOverride.loopMode = 1;

            //UI
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
            advancedTexture.renderScale = 0.5;
            var UiPanel = new BABYLON.GUI.StackPanel();
            UiPanel.width = "220px";
            UiPanel.fontSize = "14px";
            UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
            advancedTexture.addControl(UiPanel);

scene.animationGroups[0].start(true);
scene.animationGroups[1].start(true);

var casiLips = scene.getMeshByName(“Casi’s Body.001_primitive0”);
var clonedCasiLips = casiLips.clone(“Casi’s Body.001_primitive0_clone”);
clonedCasiLips.setEnabled(false);

var casiInnerMouth = scene.getMeshByName(“Casi’s Body.001_primitive2”);
casiInnerMouth.setEnabled(false);
var clonedCasiInnerMouth = casiInnerMouth.clone(“Casi’s Body.001_primitive2_clone”);
clonedCasiInnerMouth.setEnabled(false);

var primitive = scene.getMeshByName(“Primitives.001”);
var casiEyes = scene.getMeshByName(“Casi’s Body.001_primitive1”);
var casiTeeth = scene.getMeshByName(“Casi’s Teeth”);
var casiVisor = scene.getMeshByName(“Casi’s Visor”);
var casiLipsPosition = casiLips.getVerticesData(BABYLON.VertexBuffer.PositionKind);

casiLips.updateVerticesData(BABYLON.VertexBuffer.PositionKind, casiLipsPosition);

casiLips.morphTargetManager.getTarget(1).influence = 1.0;
console.log(casiLips.morphTargetManager.getTarget(1).influence);
console.log(casiInnerMouth.getTotalVertices());
console.log(casiEyes.position);
console.log(casiLips.morphTargetManager);

clonedCasiLips.morphTargetManager = manager;
manager.influences = 1.0;
console.log(manager);

            var target0 = BABYLON.MorphTarget.FromMesh(clonedCasiLips, "Casi's Lips", 1.0);
            manager.addTarget(target0);
            console.log(target0);
            var angle = 0;
            scene.registerBeforeRender(function() {
                target0.influence = Math.sin(angle)*Math.sin(angle);
                angle += 0.01;
            })

});
assetsManager.load();
return scene;
};

var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });

var scene = createScene();

engine.runRenderLoop(function () {
if (scene) {
scene.render();
}
});

// Resize
window.addEventListener(“resize”, function () {
engine.resize();
});

Am I doing something wrong?

Welcome aboard!

You should setup a repro in the Playground, it will be easier for people to help you.

1 Like

https://playground.babylonjs.com/#WC8SEF

Note the camera’s default position isn’t in front of the 3d model because I’m having trouble figuring out how to do that as well so you’ll have to move the camera to in front of the mode to get it in front that my 3d model is whited out I’ve pasted how it looks in playground to this reply I don’t know what that means but I hope it doesn’t cause any problems.

Your PG is a bit too complicated. Here’s a simpler one where morphing does work:
https://playground.babylonjs.com/#WGZLGJ#3267

1 Like

Is it possible to display this in an html page?

1 Like

Never mind I figured it out thanks for your help.

2 Likes