Make Morph Targets sliders on my web page?

Questions
, , ,
1

My script basically imports a glTF file, and allows the user to inspect it, however, I also want all the morph targets on my file to automatically have sliders be made for them on my web page, how can i do that?

Here is my current JS:

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var camera;

var createScene = function () {
  var scene = new BABYLON.Scene(engine);

  // Adjust camera position and target
  camera = new BABYLON.ArcRotateCamera("camera", -Math.PI/2, Math.PI/2, 12, new BABYLON.Vector3(0, 3.5, 0), scene);

  // Disable camera controls by default
  camera.detachControl(canvas);

  var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

  BABYLON.SceneLoader.ImportMesh("", "./models/", "emoti.glb", scene, function (newMeshes) {
    var model = newMeshes[0];
    model.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
  });

  return scene;
}

var scene = createScene();
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0.0);
engine.runRenderLoop(function () {
  scene.render();
});

window.addEventListener("resize", function () {
  engine.resize();
});

// Disable or enable camera controls based on checkbox state
var checkbox = document.getElementById("disableControlsCheckbox");
checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    camera.detachControl(canvas);
  } else {
    camera.attachControl(canvas, true);
  }
});

And my model can be found here

2

Hello! The morph targets documentation Morph Targets | Babylon.js Documentation (babylonjs.com) has an example PG with sliders Morph targets demo | Babylon.js Playground (babylonjs.com)

1 Like
3

hiya! thanks so much, how could I implement this into my own code? I am rather new to this and its all completely new to me, and i cant find a way to integrate these and have them work in the way the example has

4

The PG example is using the dat gui library, but you should be able to use plain HTML sliders with it too. You can also use Babylon GUI Sliders: The Babylon GUI | Babylon.js Documentation (babylonjs.com). For all of them, the idea is the same, whenever the value changes in the slider (firing an onchange event), change the corresponding value on the mesh’s morph target.

5

cool, thanks! one thing that I cant find on the documentation, is there a simple way to get all of the morph targets without having to cite the name of each one, as I am only using one model, and it has over 50 shape keys that I want the user to be able to control.

6

Yep! MorphTargetManager | Babylon.js Documentation (babylonjs.com)

You can use numTargets to get the total amount of targets and get each one with getTarget(targetNumber)

1 Like
7

I keep getting the issue
BJS - [20:26:05]: Unable to load from ./models/emoti.glb: Error in onSuccess callback: TypeError: model.morphTargetManager
i dont know what to do bahaa

8

Can you please share a repro in the playground ?