# Connect FBX File Morph Targets and Bones to dat.gui

**URL:** <https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849>\
**Category:** Questions\
**Tags:** morph-targets\
**Created:** [August 21, 2018, 1:22pm UTC](https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849 "2018-08-21T13:22:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Markus1](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@Markus1](https://discourse.threejs.org/u/Markus1)\
**Post date:** [August 21, 2018, 1:22pm UTC](https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849/1 "2018-08-21T13:22:40Z")

</div>

Hello,  
I use the newest FBX-Loader and the model is showing up fine and is textured as it should.  
But now, how can I connect the morph targets and the bones in my FBX-file to the dat.gui sliders so the sliders appear and I can move them?  
Is this done the same way as JSON, with the “morphTargetInfluences” like the line below?

… folder.add( params, ‘influence1’, 0, 1 ).step( 0.01 ).name(‘Mouth\_Open’).listen().onChange( function( value ) { mesh.morphTargetInfluences[6] = value;});…

I could not figure out how to do that in a different way.  
Thanks for the help.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 22, 2018, 12:29am UTC](https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849/2 "2018-08-22T00:29:47Z")

</div>

JSONLoader creates `Geometry` while newer loaders create `BufferGeometry`, so there are slight differences but I think this should work for both:

```auto
folder.add( mesh.morphTargetInfluences, '0', 0, 1 ).step( 0.01 ).name('A').listen();
folder.add( mesh.morphTargetInfluences, '1', 0, 1 ).step( 0.01 ).name('B').listen();
folder.add( mesh.morphTargetInfluences, '2', 0, 1 ).step( 0.01 ).name('C').listen();
folder.add( mesh.morphTargetInfluences, '3', 0, 1 ).step( 0.01 ).name('D').listen();

```

Using a GUI to control bones will get messy with many bones but the basics are simple enough:

```auto
folder.add( bone.rotation, 'y', 0, 360 ).name( 'Arm' );

```

---

<div class="post-metadata">

**Author:** ![Markus1](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@Markus1](https://discourse.threejs.org/u/Markus1)\
**Post date:** [August 22, 2018, 2:34pm UTC](https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849/3 "2018-08-22T14:34:12Z")

</div>

Thanks for your answer. Unfortunately, it did not work out with that code.

Here is the FBX-model, the texture and the dat.gui code so far. Maybe you can give me the code to make this work, sadly, I could not figure it out and I am somehow stock here…  
Thanks for your answer.

[PapageiFBXBinary.fbx](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/4/4c745da30263482be4aa5bccb5d4a77b92228706.fbx) (1.5 MB)  
 ![ToonParrotPNG24](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/9/9934f734c21919f99a851a586a8ea9bd17a7f409.jpeg)

```
	var params = {						  
		BlendShape_1: 0.0,

	};								
	var gui = new dat.GUI({
			autoplace: false, 
			width: 250,
			height: 9 * 32 - 1				
	});

	var folder = gui.addFolder( 'BlendShape' );
	folder.add( params, 'BlendShape_1l', 0, 1 ).step( 0.01 ).name('Mouth_open').listen().onChange( function( value ) { Geometry.BlendShapeChannel[92890752] = value;});
		folder.open();

		var update = function() {
		};
	render()
```

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 22, 2018, 3:48pm UTC](https://discourse.threejs.org/t/connect-fbx-file-morph-targets-and-bones-to-dat-gui/3849/4 "2018-08-22T15:48:18Z")

</div>

That code is not what I’d suggested, can you share your more complete code (or a demo) including the part where you load the model?