How to connect the bones with the datGui slider correctly?

Questions
,
1

I try to move the bones of a model with sliders. Does anyone see what is missing or wrong in this code? I have already tried a lot. My attempts were not successful. Thanks a lot !

var loader = new THREE.JSONLoader();	
	loader.load( "./three/models/JSON/Blender/ModelBones.json", addModel);	
	
	function addModel( geometry, materials ) {		

        materials.forEach(function (mat) {
            mat.skinning = true;
            //mat.side = THREE.DoubleSide;
        });
		
		var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshPhongMaterial( materials ));
		
		mesh.scale.set( 1.9, 1.5, 1.9 );        
		mesh.position.set( 0, -6, 0 );		  	
		mesh.rotation.set( 0.0, 1.6, 0.0);		
		//mesh.geometry.dynamic = true;
		scene.add( mesh );            

        // set defaults for control object
        //boneControls.Bone_2 = mesh.children[0].rotation.x;
        //boneControls.Bone_3 = mesh.children[0].rotation.y;
        //boneControls.Bone_4 = mesh.children[0].rotation.z;

        
		var helper = new THREE.SkeletonHelper( mesh );			
		helper.material.linewidth = 3;
		helper.visible = true;
		scene.add( helper );            
        
  
	
	boneControls = new function() {		
		this.Bone_2 = 0.0;
		this.Bone_3 = 0.0;
		this.Bone_4 = 0.0;
	};		
	
	var checkBox = {
		'show model'     :true,
		'show skeleton'	 :true,		
	};		
							
	var gui = new dat.GUI();																				
		gui.add( checkBox, 'show model' ).onChange( function() {
					mesh.visible = checkBox[ 'show model' ];
		} );
		
		gui.add( checkBox, 'show skeleton' ).onChange( function() {
					helper.visible = checkBox[ 'show skeleton' ];
		} );	

	var folder = gui.addFolder( 'Skeleton' );		
		folder.add( boneControls, 'Bone_2', 0, 1 );
		folder.add( boneControls, 'Bone_3', -3.00, 3.00 );
		folder.add( boneControls, 'Bone_4', -3.00, 3.00 );
		folder.open();	
		
	update();		

}


function animate() {
	render();
	requestAnimationFrame( animate );
	}

function render() {	
	renderer.render( scene, camera );
	
	//mesh.children[0].children[1].rotation.x = control.Bone_2;
        //mesh.children[0].children[1].rotation.y = control.Bone_3;
        //mesh.children[0].children[1].rotation.z = control.Bone_4;
	
	}

//helper.update();
animate();

  //JSON File

 "bones":[{
    "name":"hip",
    "parent":-1,
    "pos":[0,2.07188,0.0383028],
    "rotq":[0,0,0,1]
},{
    "name":"pelvis",
    "parent":0,
    "pos":[0,0.038698,-0.00215585],
    "rotq":[0,0,0,1]
},{
    "name":"lThighBend",
    "parent":1,
    "pos":[0.152237,-0.220734,-0.0199375],
    "rotq":[0,0,0,1]
},{
    "name":"lThighTwist",
    "parent":2,
    "pos":[0.00803333,-0.4161,-0.00671866],
    "rotq":[0,0,0,1]
},{
    "name":"lShin",
    "parent":3,
    "pos":[0.0357633,-0.483821,-0.0421699],
    "rotq":[0,0,0,1]
},{
    "name":"lFoot",
    "parent":4,
    "pos":[0.0423666,-0.862359,-0.0417369],
    "rotq":[0,0,0,1]
},{
2

Have you had a look at the bone manipulation in the example in the SkinnedMesh docs to see how it’s done there?

3

@whorfl Yes I saw that, Unfortunately I can not do much with it.

4

I still get the following messages.

When skinning, number of vertices (7909), skinIndices (0), and skinWeights (0) should match. three.js:33582:6

THREE.MeshFaceMaterial has been removed. Use an Array instead. three.js:42292:3

    var loader = new THREE.JSONLoader();	
	loader.load( "./three/models/JSON/Blender/Model.json", function ( geometry, materials ) {			
		
		materials.forEach( function ( material ) {
		material.skinning = true;
		//material.side = THREE.DoubleSide;
		} );

	   var skinnedMesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ));
         //var skinnedMesh = new THREE.SkinnedMesh( geometry, new THREE.MeshPhongMaterial(materials ));
		
		
		skinnedMesh.scale.set( 2.5, 1.9, 2.5 );        
		skinnedMesh.position.set( 0, -16, 0 );		    //Position (x = nach rechts+ links-) (y = nach oben+, unten-) (z = nach vorne+, hinten-)			
		skinnedMesh.rotation.set( 0.0, 0, 0.0);		    //Rotation (x = -nach oben) (y = -nach rechts)
		//skinnedMesh.geometry.dynamic = true;
		scene.add( skinnedMesh );		    

                controls.test_pos_x = skinnedMesh.position.x;
		controls.test_pos_y = skinnedMesh.position.y;
		controls.test_pos_z = skinnedMesh.position.z;			
        
	    var helper = new THREE.SkeletonHelper( skinnedMesh );			
		helper.material.linewidth = 2;
		helper.visible = true;
		scene.add( helper );             
		
		render()	
	
		});

	    var controls = new function() {			
		this.test_pos_x = 0.0;
		this.test_pos_y = 0.0;
		this.test_pos_z = 0.0;			
	        }; 

	    addControls(controls);
	
	function addControls(controlsObject) {
	    var gui = new dat.GUI();		
		gui.add( controlsObject, 'test_pos_x', -10, 10 ).listen();
		gui.add( controlsObject, 'test_pos_y', -10, 10 ).listen();
		gui.add( controlsObject, 'test_pos_z', -10, 10 ).listen();		
	}
	

function animate() {
	render();
	requestAnimationFrame( animate );
	}

function render() {	
	renderer.render( scene, camera );
	
    //skinnedMesh.position.x = controls.test_pos_x;
    //skinnedMesh.position.y = controls.test_pos_y;
    //skinnedMesh.position.z = controls.test_pos_z;       
	
	}	

animate();