Blender-->JSON-->Skinned Mesh rig not working

json
bones
skeleton

#1

I’m trying to control a rigged hand in Three.js. I’m almost there! I’ve seen a few threads around this, but none of the possible solutions seem to work for me.

Here is a preview: http://halfhalf.us/jsfiddle/

For whatever reason, the mesh is not binding to the skeleton. Would appreciate any help!

<!DOCTYPE html>
<head>
<title></title>

</head>


<body>

<script src="js/three.min.js"></script>
<script src="js/ShaderSkin.js"></script>
<script src="js/dat.gui.min.js"></script>

<script src="js/shaders/BleachBypassShader.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/controls/OrbitControls.js"></script>


<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/TexturePass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>


<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<div id="container"></div>

<script>
	
	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

				var statsEnabled = true;

				var container, stats, loader;

				var camera, scene, renderer;

				var mesh, mesh2;
				
				var bones, skeleton;

				var directionalLight;
				
				var datGUI, guiControls;

				var mouseX = 0;
				var mouseY = 0;
				
				var helpset = [];

				var targetX = 0, targetY = 0;


				var windowHalfX = window.innerWidth / 2;
				var windowHalfY = window.innerHeight / 2;

				var mapColor, mapHeight, mapSpecular;

				var firstPass = true;

				var composer, composerBeckmann;

				init();
				initBones();
				setupDatGui();
				animate();
				
				function initBones(){
					
				}
				
				
				
				function setupDatGui(){
					datGUI = new dat.GUI();
					
					datGUI.add(guiControls, "scene");
					var cfolder = datGUI.addFolder("Controls");
					
					cfolder.add(guiControls, "Bone_0", -3.14, 3.14);
					cfolder.add(guiControls, "Bone_1", -3.14, 3.14);
					cfolder.add(guiControls, "Bone_2", -3.14, 3.14);
					
					datGUI.open();
					
				}
				
							
				function init() {

					container = document.createElement( 'div' );
					document.body.appendChild( container );

					//scene
					
					scene = new THREE.Scene();
					
					//camera

					camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
					camera.position.z = 0;
					camera.position.y = -200;
					camera.lookAt(scene.position);
					
					
					
					/*datGUI controls object*/
			        guiControls = new function(){
			            this.Bone_0 = 0.0;
			            this.Bone_1 = 0.0;
			            this.Bone_2 = 0.0;
			            this.Bone_3 = 0.0;
            
			            this.rotationX  = 0.0;
			            this.rotationY  = 0.0;
			            this.rotationZ  = 0.0;
            
			            this.lightX = 131;
			            this.lightY = 107;
			            this.lightZ = 180;
			            this.intensity = 1.5;       
			            this.distance = 373;
			            this.angle = 1.6;
			            this.exponent = 38;
			            this.shadowCameraNear = 34;
			            this.shadowCameraFar = 2635;
			            this.shadowCameraFov = 68;
			            this.shadowCameraVisible=false;
			            this.shadowMapWidth=512;
			            this.shadowMapHeight=512;
			            this.shadowBias=0.00;
			            this.shadowDarkness=0.11;
            
			            this.scene = function(){
			                console.log(scene);
			            };
                       
			        }
					
					// LIGHTS

					scene.add( new THREE.AmbientLight( 0x333344 ) );

					directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
					directionalLight.position.set( 500, 0, 500 );

					directionalLight.castShadow = true;

					directionalLight.shadow.mapSize.width = 2048;
					directionalLight.shadow.mapSize.height = 2048;

					directionalLight.shadow.camera.near = 200;
					directionalLight.shadow.camera.far = 1500;

					directionalLight.shadow.camera.left = -500;
					directionalLight.shadow.camera.right = 500;
					directionalLight.shadow.camera.top = 500;
					directionalLight.shadow.camera.bottom = -500;

					directionalLight.shadow.bias = -0.005;

					scene.add( directionalLight );
					
					// add spotlight for the shadows
			        var spotLight = new THREE.DirectionalLight(0xffffff);
			        spotLight.position.set(20, 20, 20);
			        spotLight.castShadow = false;
			        scene.add(spotLight);
					
					//

					loader = new THREE.JSONLoader();
					loader.load( "hand_for_export.json", function ( geometry, materials ) {
						console.log(geometry)
						console.log('---')
						materials[0].skinning = true;
						materials.skinning = true;
						createScene( geometry, 100, materials );
				

					} );

					//

					renderer = new THREE.WebGLRenderer( { antialias: true } );
					renderer.setClearColor( 0x242a34 );
					renderer.setPixelRatio( window.devicePixelRatio );
					renderer.setSize( window.innerWidth, window.innerHeight );
					container.appendChild( renderer.domElement );

					renderer.shadowMap.enabled = true;
					renderer.shadowMap.renderReverseSided = false;

					renderer.autoClear = false;

					//

					renderer.gammaInput = true;
					renderer.gammaOutput = true;

					//

					if ( statsEnabled ) {

						stats = new Stats();
						container.appendChild( stats.dom );

					}
					
					// controls
		
					controls = new THREE.OrbitControls(camera, renderer.domElement);
					controls.addEventListener( 'change', render ); // remove when using animation loop
					// enable animation loop when using damping or autorotation
					//controls.enableDamping = true;
					//controls.dampingFactor = 0.25;
					controls.enableZoom = true;
					

					// COMPOSER

					renderer.autoClear = false;

					// BECKMANN

					var effectBeckmann = new THREE.ShaderPass( THREE.ShaderSkin[ "beckmann" ] );
					var effectCopy = new THREE.ShaderPass( THREE.CopyShader );

					effectCopy.renderToScreen = true;

					var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
					var rtwidth = 512, rtheight = 512;

					composerBeckmann = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
					composerBeckmann.addPass( effectBeckmann );
					composerBeckmann.addPass( effectCopy );

					// EVENTS

					document.addEventListener( 'mousemove', onDocumentMouseMove, false );
					window.addEventListener( 'resize', onWindowResize, false );

				}

				function createScene( geometry, scale, mats ) {

				  // enable skinning
				    for (var i = 0; i < mats.length; i++) {
				      var mat = mats[i];

				      mat.skinning = true;
				    }
					
					var textureLoader = new THREE.TextureLoader();

					var mapHeight = textureLoader.load( "textures/HAND_S_UV_LIGHTER.jpg" );

					mapHeight.anisotropy = 4;
					mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
					mapHeight.format = THREE.RGBFormat;

					var mapSpecular = textureLoader.load( "textures/HAND_S.jpg" );

					mapSpecular.anisotropy = 4;
					mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
					mapSpecular.format = THREE.RGBFormat;

					var mapColor = textureLoader.load( "textures/HAND_C.jpg" );

					mapColor.anisotropy = 4;
					mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;
					mapColor.format = THREE.RGBFormat;

					var shader = THREE.ShaderSkin[ "skinSimple" ];

					var fragmentShader = shader.fragmentShader;
					var vertexShader = shader.vertexShader;

					var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
					

					uniforms[ "enableBump" ].value = true;
					uniforms[ "enableSpecular" ].value = true;

					uniforms[ "tBeckmann" ].value = composerBeckmann.renderTarget1.texture;
					uniforms[ "tDiffuse" ].value = mapColor;

					uniforms[ "bumpMap" ].value = mapHeight;
					uniforms[ "specularMap" ].value = mapSpecular;

					uniforms[ "diffuse" ].value.setHex( 0xa0a0a0 );
					uniforms[ "specular" ].value.setHex( 0xa0a0a0 );

					uniforms[ "uRoughness" ].value = 0.2;
					uniforms[ "uSpecularBrightness" ].value = 0.5;

					uniforms[ "bumpScale" ].value = .2;

					var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true, skinning:true } );
					material.extensions.derivatives = true;
					material.skinning = true;
					geometry.dynamic = true;
					material.side = THREE.DoubleSide;
					
					
					
					//mesh 
					console.log('material')
					console.log(material)
					mesh = new THREE.SkinnedMesh( geometry, material );
					mesh.skinning = true;
					//mesh.position.y = - 50;
					mesh.scale.set( scale, scale, scale );

					mesh.castShadow = true;
					//mesh.receiveShadow = true;
					mesh.bind( mesh.skeleton );
					
					scene.add( mesh );
					
					var helper = new THREE.SkeletonHelper( mesh );
					helper.material.linewidth = 10;
					scene.add( helper );
					
					helpset.push(helper);
					
					console.log(geometry);
		
				}
				
			

				//

				function onWindowResize( event ) {

					renderer.setSize( window.innerWidth, window.innerHeight );

					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();

				}

				function onDocumentMouseMove( event ) {

					mouseX = ( event.clientX - windowHalfX ) * 1;
					mouseY = ( event.clientY - windowHalfY ) * 1;

				}

				//

				function animate() {

					requestAnimationFrame( animate );

					render();
					if ( statsEnabled ) stats.update();

				}

				function render() {

					//targetX = mouseX * .001;
					//targetY = mouseY * .001;

					if ( mesh ) {

						if (mesh.skeleton) {
							// right foot
							//mesh.skeleton.bones[0].rotation.y += .0005;
							// left foot
						}

					}

					if ( firstPass ) {

						composerBeckmann.render();
						firstPass = false;

					}
					
					scene.traverse(function(child){
			            if (child instanceof THREE.SkinnedMesh){  
        
			                child.rotation.y += .0005;
							
							child.skeleton.bones[0].rotation.z = guiControls.Bone_0;
			                child.skeleton.bones[1].rotation.z = guiControls.Bone_1;
			                child.skeleton.bones[2].rotation.z = guiControls.Bone_2;
			                child.skeleton.bones[3].rotation.z = guiControls.Bone_3;        
							
							
			            }
			            else if  (child instanceof THREE.SkeletonHelper){
			                child.update();
			            }
			        }); 
					
				

					renderer.clear();
					renderer.render( scene, camera );

				}
</script>

</body>

</html>