4 March 2018

joxin-Mocap

“Spider”

I converted a human skeleton to a monster.

When I first started this project, I drew a lot of skeletons on my sketchbook. I liked how simple they looked, and I found them to be a powerful abstraction of the way we move. Many live creatures have skeletons, so I thought—what if I try to create a new animal from human skeletons?

I used a walking skeleton data from CMU’s Mocap database. The raw data was in formats (e.g. amc, mpg), which I couldn’t use. However, luckily, someone converted all this data to bvh and posted it online, which can be accessed here.

I loaded a walking human skeleton data into Three.js. Starting with the template provided by Golan, I converted every bone position from human to the “spider.” The concept was simple but the process was very strenuous. I spent a lot of time figuring out how geometry and material work in Three.js. Also, to make the spider legs look like lines but with thickness, I found this library called MeshLine. It was horribly documented, but I eventually made it work. The conversion took a lot of fine-tuning. The head and torso are mapped directly. The tough part was to convert all human arms and legs to the four “spider” legs. The process was a combination of very deliberate mapping and trial-and-error.

I also took special consideration to design a monster skeleton that makes structural and physiological sense. Biological bodies have balance. For example, if the legs are too thin and the body is huge, or if the head is too much in the front, then the entire body would probably look weird and uncomfortable. Thus, in the mapping process, I modeled the body in a balanced way while maintaining the original relationships between the different bone positions in the human.

For me, the project was mainly a technical lesson. It was a great practice for me to understand the library of Three.js. I am still trying to get through the learning curve, but I am already very impressed by how powerful and flexible this code environment is. Every little task requires quite a bit of digging, but the result is normally very rewarding.

I liked the way the monster (spider or scorpion?) looks, but it definitely is very preliminary. I hope to continue working on it and potentially extend it to a final project for this class. Currently the materials and environments are both extremely simple. I am hoping to use shaders to make the monster look more complex and interesting. When it walks side by side with the human, their movements are visually in sync as I intended. I used red because I wanted to highlight the fun nature of this conversion. I wasn’t trying to make a scary monster. I made a monster that is the human’s twin.

Special thanks to tesh for helping me through the tough learning curve of Three.js when I first started this project <3

var clock = new THREE.Clock();
 
			var camera, controls, scene, renderer;
			var mixer, skeletonHelper;
 
			var parabola = function( x, k ) {
		        return Math.pow( 4 * x * ( 1 - x ), k );
		    }
 
			init();
			animate();
 
			var cubes;
			// var left_spider_thigh;
			// var left_spider_calf;
			// var left_spider_thigh_a;
			// var left_spider_calf_a;
			// var right_spider_thigh;
			// var right_spider_calf;
			// var right_spider_thigh_a;
			// var right_spider_calf_a;
 
 
			var human_torso;
			var human_head;
			var human_left_leg;
			var human_right_leg;
			var human_left_arm;
			var human_right_arm;
 
			var spider_body;
			var spider_head;
			var spider_left_leg;
			var spider_right_leg;
			var spider_left_arm;
			var spider_right_arm;
			var spider_neck;
 
			var human_shift = -200;
			var spider_shift = 60;
 
			var loader = new THREE.BVHLoader();
			loader.load("bvh/07_08.bvh", function( result ) {
 
				skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
				// og_skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
				skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to SkeletonHelper directly
				// og_skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to SkeletonHelper directly
 
				var material = new MeshLineMaterial({
					color: new THREE.Color(0xff0000),
					side: THREE.DoubleSide,
				});
				skeletonHelper.material = material;
				//scene.add( skeletonHelper );
 
				// play animation
				mixer = new THREE.AnimationMixer( skeletonHelper );
				mixer.clipAction( result.clip ).setEffectiveWeight( 2.0 ).play();
 
			} );
 
			function init() {
 
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 0, 100, 400 );
 
				controls = new THREE.OrbitControls( camera );
				controls.minDistance = 300;
				controls.maxDistance = 700;
 
				scene = new THREE.Scene();
 
				scene.add( new THREE.GridHelper( 500, 20 ) );
 
				cubes = [];
				for (var i = 0; i &lt; 21; i++) {
					var geometry = new THREE.SphereGeometry( 1, 30, 30, 0, 6.3, 0, 3.1 );
					var material0 = new THREE.MeshBasicMaterial({
						color: 0xff0000,
						opacity: 0.9,
						transparent: true 
					});
					cube = new THREE.Mesh( geometry, material0 );
					cubes.push(cube);
					//scene.add( cube );
				}
 
				// spider
 
				var geometry_body = new THREE.SphereGeometry( 30, 32, 32 );
				var material_body = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					opacity: 0.9,
					transparent: true 
				});
				spider_body = new THREE.Mesh( geometry_body, material_body );
				scene.add( spider_body );
 
				var geometry_head = new THREE.SphereGeometry( 10, 32, 32 );
				var material_head = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					opacity: 0.9,
					transparent: true 
				});
				spider_head = new THREE.Mesh( geometry_head, material_head );
				scene.add( spider_head );
 
				var lines = [];
				for (var i = 0; i &lt; 4; i++) {
					var geometry_try = new THREE.Geometry();
					geometry_try.vertices.push(new THREE.Vector3(0, 0, 0));
					geometry_try.vertices.push(new THREE.Vector3(100, 100, 100));
					geometry_try.vertices.push(new THREE.Vector3(100, 0, 0));
					var line = new MeshLine();
					line.setGeometry( geometry_try )
					line.setGeometry( geometry_try, function( p ) { return 10; } ); // makes width 10 * lineWidth
					line.setGeometry( geometry_try, function( p ) { return 4 * (1 - p); } ); // makes width taper
					line.setGeometry( geometry_try, function( p ) { return 2 * parabola( p, 1 ); } ); // makes width sinusoidal
					lines.push(line);
				}
 
				var material_try = new MeshLineMaterial({
					color: new THREE.Color(0xff0000),
					side: THREE.DoubleSide,
				});
 
				spider_left_leg = new THREE.Mesh( lines[0].geometry, material_try );
				spider_right_leg= new THREE.Mesh( lines[1].geometry, material_try );
				spider_left_arm = new THREE.Mesh( lines[2].geometry, material_try );
				spider_right_arm= new THREE.Mesh( lines[3].geometry, material_try );
 
				var geometry_body = new THREE.Geometry();
				geometry_body.vertices.push(new THREE.Vector3(0, 0, 0));
				geometry_body.vertices.push(new THREE.Vector3(100, 100, 100));
				geometry_body.vertices.push(new THREE.Vector3(100, 0, 0));
				geometry_body.vertices.push(new THREE.Vector3(0, 100, 0));
				var line_neck = new MeshLine();
				line_neck.setGeometry( geometry_body );
				line_neck.setGeometry( geometry_body, function( p ) { return 10; } ); // makes width 10 * lineWidth
				line_neck.setGeometry( geometry_body, function( p ) { return 4 * (1 - p); } ); // makes width taper
				line_neck.setGeometry( geometry_body, function( p ) { return 2 * parabola( p, 1 ); } ); // makes width sinusoidal
 
				spider_neck = new THREE.Mesh( line_neck.geometry, material_try );;
 
				scene.add( spider_left_leg );
				scene.add( spider_right_leg );
				scene.add( spider_left_arm );
				scene.add( spider_right_arm );
				scene.add( spider_neck );
 
				// human
 
				var lines = [];
				for (var i = 0; i &lt; 5; i++) {
					var geometry_try = new THREE.Geometry();
					geometry_try.vertices.push(new THREE.Vector3(0, 0, 0));
					geometry_try.vertices.push(new THREE.Vector3(100, 100, 100));
					geometry_try.vertices.push(new THREE.Vector3(100, 0, 0));
					geometry_try.vertices.push(new THREE.Vector3(0, 100, 0));
					geometry_try.vertices.push(new THREE.Vector3(0, 100, 100));
					var line = new MeshLine();
					line.setGeometry( geometry_try );
					line.setGeometry( geometry_try, function( p ) { return 3; } ); // makes width 5 * lineWidth
					//line.setGeometry( geometry_try, function( p ) { return 4 * (1 - p); } ); // makes width taper
					line.setGeometry( geometry_try, function( p ) { return 1.2 * parabola( p, 1 ); } ); // makes width sinusoidal
					lines.push(line);
				}
 
				human_left_leg = new THREE.Mesh( lines[0].geometry, material_try );
				human_right_leg= new THREE.Mesh( lines[1].geometry, material_try );
				human_left_arm = new THREE.Mesh( lines[2].geometry, material_try );
				human_right_arm= new THREE.Mesh( lines[3].geometry, material_try );
				human_torso    = new THREE.Mesh( lines[4].geometry, material_try );
 
				scene.add( human_left_leg );
				scene.add( human_right_leg );
				scene.add( human_left_arm );
				scene.add( human_right_arm );
				scene.add( human_torso );
 
				var geometry_head = new THREE.SphereGeometry( 5, 32, 32 );
				human_head = new THREE.Mesh( geometry_head, material_head );
				scene.add( human_head );
 
				// renderer
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setClearColor( 0xeeeeee );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
 
				document.body.appendChild( renderer.domElement );
 
				window.addEventListener( 'resize', onWindowResize, false );
 
			}
 
			function onWindowResize() {
 
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
 
				renderer.setSize( window.innerWidth, window.innerHeight );
 
			}
 
			function animate() {
 
				requestAnimationFrame( animate );
 
				var delta = clock.getDelta();
 
				if ( mixer ) mixer.update( delta );
				if ( skeletonHelper ) {
					for (var y = 0; y &lt; skeletonHelper.bones.length; y++){
						//console.log(skeletonHelper.bones[y].position);
						skeletonHelper.bones[y].position = skeletonHelper.bones[y].position * 20;
					}
 
					var useful = [ 0, // hip
 
								   2, // left leg root
								   3, // left knee
								   4, // left ankle
								   6, // left feet tip
 
								   8, // right left root
								   9, // right knee
								   10, //right ankle
								   12, // right feet tip
 
								   17, // chest
								   18, // neck
								   19, // chin
								   20, // forehead
 
								   21, // left shoulder
								   22, // left elbow
								   23, // left wrist
								   26, // left hand
 
								   30, // right shoulder
								   31, // right elbow
								   32, // right wrist
								   35, // right hand
 
								   ];
					for (var i = 0; i &lt; useful.length; i++) { 
						myPos = skeletonHelper.bones[useful[i]].getWorldPosition();
						cubes[i].position.y = myPos.y * 5;
						cubes[i].position.z = myPos.z * 5;
						cubes[i].position.x = myPos.x * 5;
					}
 
 
					// body / hip
					var pos0 = skeletonHelper.bones[0].getWorldPosition();
					var hip = new THREE.Vector3(0, pos0.y, pos0.z);
 
					// head
					var pos20 = skeletonHelper.bones[20].getWorldPosition();
					var head = new THREE.Vector3(pos20.x-pos0.x, pos20.y, pos20.z);
 
					// left leg
					var pos2 = skeletonHelper.bones[2].getWorldPosition();
					var pos3 = skeletonHelper.bones[3].getWorldPosition();
					var pos4 = skeletonHelper.bones[4].getWorldPosition();
					var pos6 = skeletonHelper.bones[6].getWorldPosition();
 
					var left_leg_root = new THREE.Vector3((pos2.x-pos0.x) * 5, pos2.y*2 + 30, pos2.z * 5 + 10);
					var newY = (pos3.y * 5-50 - 15) / (30-10) * (50 - 60) + 50;
					var left_leg_knee = new THREE.Vector3((pos3.x-pos0.x) * 5 + 100, newY*2, pos3.z * 5+30);
					var left_leg_ankle = new THREE.Vector3((pos4.x-pos0.x) * 5 + 140, pos4.y*2, pos4.z * 5+30);
 
					// left arm
					var pos21 = skeletonHelper.bones[21].getWorldPosition();
					var pos22 = skeletonHelper.bones[22].getWorldPosition();
					var pos23 = skeletonHelper.bones[23].getWorldPosition();
					var pos26 = skeletonHelper.bones[26].getWorldPosition();
 
					var left_arm_root = new THREE.Vector3((pos21.x-pos0.x) * 5, pos21.y * 2+ 30, pos21.z * 5-10);
					var newZ = (pos22.z * 5+30 - pos21.z * 5-10) * 2 + pos21.z * 5-10;
					var left_arm_knee = new THREE.Vector3((pos22.x-pos0.x) * 5+100, pos22.y * 2 + 80, newZ-50);
					var left_arm_ankle = new THREE.Vector3((pos23.x-pos0.x) * 5+140, (pos23.y-12) * 10 - 25, pos23.z * 5-40);
 
					// right leg
 
					var pos8 = skeletonHelper.bones[8].getWorldPosition();
					var pos9 = skeletonHelper.bones[9].getWorldPosition();
					var pos10 = skeletonHelper.bones[10].getWorldPosition();
					var pos12 = skeletonHelper.bones[12].getWorldPosition();
 
					var right_leg_root = new THREE.Vector3((pos8.x - pos0.x) * 5, pos8.y*2 + 30, pos8.z * 5 + 10);
					var newY = (pos9.y * 5-50 - 15) / (30-10) * (50 - 60) + 50;
					var right_leg_knee = new THREE.Vector3((pos9.x - pos0.x) * 5-100, newY*2, pos9.z * 5+30);
					var right_leg_ankle = new THREE.Vector3((pos10.x - pos0.x) * 5-140, pos10.y*2, pos10.z * 5+30);
 
					// right arm
					var pos30 = skeletonHelper.bones[30].getWorldPosition();
					var pos31 = skeletonHelper.bones[31].getWorldPosition();
					var pos32 = skeletonHelper.bones[32].getWorldPosition();
					var pos35 = skeletonHelper.bones[35].getWorldPosition();
 
					var right_arm_root = new THREE.Vector3((pos30.x - pos0.x) * 5, pos30.y * 2 + 30, pos30.z * 5-10);
					//console.log(pos22.z * 5+30 - pos21.z * 5-10);
					var newZ = (pos31.z * 5+30 - pos30.z * 5-10) * 2 + pos30.z * 5-10;
					var right_arm_knee = new THREE.Vector3((pos31.x - pos0.x) * 5-100, pos31.y*2 + 80, newZ-40);
					var right_arm_ankle = new THREE.Vector3((pos32.x - pos0.x)* 5-140, (pos32.y-12) * 10 -25, pos32.z * 5-40);
 
					// chest &amp; neck &amp; chin
					var pos17 = skeletonHelper.bones[17].getWorldPosition();
					var pos18 = skeletonHelper.bones[18].getWorldPosition();
					var pos19 = skeletonHelper.bones[19].getWorldPosition();
					var chest = new THREE.Vector3((pos17.x-pos0.x)*10, pos17.y * 8 + 20, pos17.z * 5-30);
					var neck  = new THREE.Vector3((pos18.x-pos0.x)*10-5, pos18.y * 8 + 20, pos18.z * 5);
					var chin  = new THREE.Vector3((pos19.x-pos0.x)*10+3, pos19.y * 7, pos19.z * 5 + 50);
 
 
					/* update human body parts */
 
					// var human_torso;
					// var human_head;
					// var human_left_leg;
					// var human_right_leg;
					// var human_left_arm;
					// var human_right_arm;
 
					var human_scale = 5;
					for (var i = 0; i &lt; 2; i++) {
						human_left_leg.geometry.attributes.position.array[i*3+0]  = pos0.x * 5 + human_shift;
						human_left_leg.geometry.attributes.position.array[i*3+1]  = pos0.y * 5;
						human_left_leg.geometry.attributes.position.array[i*3+2]  = pos0.z * 5;
						human_left_arm.geometry.attributes.position.array[i*3+0]  = pos17.x * 5 + human_shift;
						human_left_arm.geometry.attributes.position.array[i*3+1]  = pos17.y * 5;
						human_left_arm.geometry.attributes.position.array[i*3+2]  = pos17.z * 5;
						human_right_arm.geometry.attributes.position.array[i*3+0] = pos17.x * 5 + human_shift;
						human_right_arm.geometry.attributes.position.array[i*3+1] = pos17.y * 5;
						human_right_arm.geometry.attributes.position.array[i*3+2] = pos17.z * 5;
						human_right_leg.geometry.attributes.position.array[i*3+0] = pos0.x * 5 + human_shift;
						human_right_leg.geometry.attributes.position.array[i*3+1] = pos0.y * 5;
						human_right_leg.geometry.attributes.position.array[i*3+2] = pos0.z * 5;
 
						human_torso.geometry.attributes.position.array[i*3+0] 	  = pos0.x * 5 + human_shift;
						human_torso.geometry.attributes.position.array[i*3+1]     = pos0.y * 5;
						human_torso.geometry.attributes.position.array[i*3+2]     = pos0.z * 5;
					}
					for (var i = 2; i &lt; 4; i++) {
						human_left_leg.geometry.attributes.position.array[i*3+0]  = pos2.x * 5 + human_shift;
						human_left_leg.geometry.attributes.position.array[i*3+1]  = pos2.y * 5;
						human_left_leg.geometry.attributes.position.array[i*3+2]  = pos2.z * 5;
						human_left_arm.geometry.attributes.position.array[i*3+0]  = pos21.x * 5 + human_shift;
						human_left_arm.geometry.attributes.position.array[i*3+1]  = pos21.y * 5;
						human_left_arm.geometry.attributes.position.array[i*3+2]  = pos21.z * 5;
						human_right_arm.geometry.attributes.position.array[i*3+0] = pos30.x * 5 + human_shift;
						human_right_arm.geometry.attributes.position.array[i*3+1] = pos30.y * 5;
						human_right_arm.geometry.attributes.position.array[i*3+2] = pos30.z * 5;
						human_right_leg.geometry.attributes.position.array[i*3+0] = pos8.x * 5 + human_shift;
						human_right_leg.geometry.attributes.position.array[i*3+1] = pos8.y * 5;
						human_right_leg.geometry.attributes.position.array[i*3+2] = pos8.z * 5;
 
						human_torso.geometry.attributes.position.array[i*3+0] = pos17.x * 5 + human_shift;
						human_torso.geometry.attributes.position.array[i*3+1] = pos17.y * 5;
						human_torso.geometry.attributes.position.array[i*3+2] = pos17.z * 5;
					}
					for (var i = 4; i &lt; 6; i++) {
						human_left_leg.geometry.attributes.position.array[i*3+0] = pos3.x * 5 + human_shift;
						human_left_leg.geometry.attributes.position.array[i*3+1] = pos3.y * 5;
						human_left_leg.geometry.attributes.position.array[i*3+2] = pos3.z * 5;
						human_left_arm.geometry.attributes.position.array[i*3+0] = pos22.x * 5 + human_shift;
						human_left_arm.geometry.attributes.position.array[i*3+1] = pos22.y * 5;
						human_left_arm.geometry.attributes.position.array[i*3+2] = pos22.z * 5;
						human_right_arm.geometry.attributes.position.array[i*3+0] = pos31.x * 5 + human_shift;
						human_right_arm.geometry.attributes.position.array[i*3+1] = pos31.y * 5;
						human_right_arm.geometry.attributes.position.array[i*3+2] = pos31.z * 5;
						human_right_leg.geometry.attributes.position.array[i*3+0] = pos9.x * 5 + human_shift;
						human_right_leg.geometry.attributes.position.array[i*3+1] = pos9.y * 5;
						human_right_leg.geometry.attributes.position.array[i*3+2] = pos9.z * 5;
 
						human_torso.geometry.attributes.position.array[i*3+0] = pos18.x * 5 + human_shift;
						human_torso.geometry.attributes.position.array[i*3+1] = pos18.y * 5;
						human_torso.geometry.attributes.position.array[i*3+2] = pos18.z * 5;
					}
					for (var i = 6; i &lt; 8; i++) {
						human_left_leg.geometry.attributes.position.array[i*3+0] = pos4.x * 5 + human_shift;
						human_left_leg.geometry.attributes.position.array[i*3+1] = pos4.y * 5;
						human_left_leg.geometry.attributes.position.array[i*3+2] = pos4.z * 5;
						human_left_arm.geometry.attributes.position.array[i*3+0] = pos23.x * 5 + human_shift;
						human_left_arm.geometry.attributes.position.array[i*3+1] = pos23.y * 5;
						human_left_arm.geometry.attributes.position.array[i*3+2] = pos23.z * 5;
						human_right_arm.geometry.attributes.position.array[i*3+0] = pos32.x * 5 + human_shift;
						human_right_arm.geometry.attributes.position.array[i*3+1] = pos32.y * 5;
						human_right_arm.geometry.attributes.position.array[i*3+2] = pos32.z * 5;
						human_right_leg.geometry.attributes.position.array[i*3+0] = pos10.x * 5 + human_shift;
						human_right_leg.geometry.attributes.position.array[i*3+1] = pos10.y * 5;
						human_right_leg.geometry.attributes.position.array[i*3+2] = pos10.z * 5;
 
						human_torso.geometry.attributes.position.array[i*3+0] = pos19.x * 5 + human_shift;
						human_torso.geometry.attributes.position.array[i*3+1] = pos19.y * 5;
						human_torso.geometry.attributes.position.array[i*3+2] = pos19.z * 5;
					}
					for (var i = 8; i &lt; 10; i++) {
						human_left_leg.geometry.attributes.position.array[i*3+0] = pos6.x * 5 + human_shift;
						human_left_leg.geometry.attributes.position.array[i*3+1] = pos6.y * 5;
						human_left_leg.geometry.attributes.position.array[i*3+2] = pos6.z * 5;
						human_left_arm.geometry.attributes.position.array[i*3+0] = pos26.x * 5 + human_shift;
						human_left_arm.geometry.attributes.position.array[i*3+1] = pos26.y * 5;
						human_left_arm.geometry.attributes.position.array[i*3+2] = pos26.z * 5;
						human_right_arm.geometry.attributes.position.array[i*3+0] = pos35.x * 5 + human_shift;
						human_right_arm.geometry.attributes.position.array[i*3+1] = pos35.y * 5;
						human_right_arm.geometry.attributes.position.array[i*3+2] = pos35.z * 5;
						human_right_leg.geometry.attributes.position.array[i*3+0] = pos12.x * 5 + human_shift;
						human_right_leg.geometry.attributes.position.array[i*3+1] = pos12.y * 5;
						human_right_leg.geometry.attributes.position.array[i*3+2] = pos12.z * 5;
						human_torso.geometry.attributes.position.array[i*3+0] = pos20.x * 5 + human_shift;
						human_torso.geometry.attributes.position.array[i*3+1] = pos20.y * 5;
						human_torso.geometry.attributes.position.array[i*3+2] = pos20.z * 5;
					}
					human_left_leg.geometry.attributes.position.needsUpdate = true;
					human_right_leg.geometry.attributes.position.needsUpdate = true;
					human_left_arm.geometry.attributes.position.needsUpdate = true;
					human_right_arm.geometry.attributes.position.needsUpdate = true;
					human_torso.geometry.attributes.position.needsUpdate = true;
 
					human_head.position.x = pos19.x*human_scale + human_shift;
					human_head.position.y = pos19.y*human_scale;
					human_head.position.z = pos19.z*human_scale; 
 
 
					/* update to spider body parts */
 
					//console.log(meshline.geometry);
					for (var i = 0; i &lt; 2; i++) {
						spider_left_leg.geometry.attributes.position.array[i*3+0] = left_leg_root.x + spider_shift;
						spider_left_leg.geometry.attributes.position.array[i*3+1] = left_leg_root.y;
						spider_left_leg.geometry.attributes.position.array[i*3+2] = left_leg_root.z;
 
						spider_left_arm.geometry.attributes.position.array[i*3+0] = left_arm_root.x+ spider_shift;
						spider_left_arm.geometry.attributes.position.array[i*3+1] = left_arm_root.y;
						spider_left_arm.geometry.attributes.position.array[i*3+2] = left_arm_root.z;
 
						spider_right_leg.geometry.attributes.position.array[i*3+0] = right_leg_ankle.x + spider_shift;
						spider_right_leg.geometry.attributes.position.array[i*3+1] = right_leg_ankle.y;
						spider_right_leg.geometry.attributes.position.array[i*3+2] = right_leg_ankle.z;
 
						spider_right_arm.geometry.attributes.position.array[i*3+0] = right_arm_ankle.x + spider_shift;
						spider_right_arm.geometry.attributes.position.array[i*3+1] = right_arm_ankle.y;
						spider_right_arm.geometry.attributes.position.array[i*3+2] = right_arm_ankle.z;
 
						spider_neck.geometry.attributes.position.array[i*3+0] = chin.x + spider_shift;
						spider_neck.geometry.attributes.position.array[i*3+1] = chin.y;
						spider_neck.geometry.attributes.position.array[i*3+2] = chin.z;
					};
					for (var i = 2; i &lt; 4; i++) {
						spider_left_leg.geometry.attributes.position.array[i*3+0] = left_leg_knee.x + spider_shift; 
						spider_left_leg.geometry.attributes.position.array[i*3+1] = left_leg_knee.y; 
						spider_left_leg.geometry.attributes.position.array[i*3+2] = left_leg_knee.z; 
 
						spider_right_leg.geometry.attributes.position.array[i*3+0] = right_leg_knee.x + spider_shift;
						spider_right_leg.geometry.attributes.position.array[i*3+1] = right_leg_knee.y;
						spider_right_leg.geometry.attributes.position.array[i*3+2] = right_leg_knee.z;
 
						spider_left_arm.geometry.attributes.position.array[i*3+0] = left_arm_knee.x + spider_shift;
						spider_left_arm.geometry.attributes.position.array[i*3+1] = left_arm_knee.y;
						spider_left_arm.geometry.attributes.position.array[i*3+2] = left_arm_knee.z;
 
						spider_right_arm.geometry.attributes.position.array[i*3+0] = right_arm_knee.x + spider_shift;
						spider_right_arm.geometry.attributes.position.array[i*3+1] = right_arm_knee.y;
						spider_right_arm.geometry.attributes.position.array[i*3+2] = right_arm_knee.z;
 
						spider_neck.geometry.attributes.position.array[i*3+0] = neck.x + spider_shift;
						spider_neck.geometry.attributes.position.array[i*3+1] = neck.y;
						spider_neck.geometry.attributes.position.array[i*3+2] = neck.z;
					};
					for (var i = 4; i &lt; 6; i++) {
						spider_left_leg.geometry.attributes.position.array[i*3+0] = left_leg_ankle.x + spider_shift;
						spider_left_leg.geometry.attributes.position.array[i*3+1] = left_leg_ankle.y;
						spider_left_leg.geometry.attributes.position.array[i*3+2] = left_leg_ankle.z;
 
						spider_left_arm.geometry.attributes.position.array[i*3+0] = left_arm_ankle.x + spider_shift;
						spider_left_arm.geometry.attributes.position.array[i*3+1] = left_arm_ankle.y;
						spider_left_arm.geometry.attributes.position.array[i*3+2] = left_arm_ankle.z;
 
						spider_right_leg.geometry.attributes.position.array[i*3+0] = right_leg_root.x + spider_shift;
						spider_right_leg.geometry.attributes.position.array[i*3+1] = right_leg_root.y;
						spider_right_leg.geometry.attributes.position.array[i*3+2] = right_leg_root.z;
 
						spider_right_arm.geometry.attributes.position.array[i*3+0] = right_arm_root.x + spider_shift;
						spider_right_arm.geometry.attributes.position.array[i*3+1] = right_arm_root.y;
						spider_right_arm.geometry.attributes.position.array[i*3+2] = right_arm_root.z;
 
						spider_neck.geometry.attributes.position.array[i*3+0] = chest.x + spider_shift;
						spider_neck.geometry.attributes.position.array[i*3+1] = chest.y;
						spider_neck.geometry.attributes.position.array[i*3+2] = chest.z;
 
					};
 
					for (var i = 6; i &lt; 8; i++) {
						spider_neck.geometry.attributes.position.array[i*3 + 0] = hip.x*5 + spider_shift;
						spider_neck.geometry.attributes.position.array[i*3 + 1] = hip.y*5;
						spider_neck.geometry.attributes.position.array[i*3 + 2] = hip.z*5;
 
					};
 
					spider_left_leg.geometry.attributes.position.needsUpdate = true;
					spider_right_leg.geometry.attributes.position.needsUpdate = true;
					spider_left_arm.geometry.attributes.position.needsUpdate = true;
					spider_right_arm.geometry.attributes.position.needsUpdate = true;
					spider_neck.geometry.attributes.position.needsUpdate = true;
 
					spider_body.position.x = hip.x*5 + spider_shift;
					spider_body.position.y = hip.y*5;
					spider_body.position.z = hip.z*5;
 
					spider_head.position.x = head.x*20 + spider_shift ;
					spider_head.position.y = head.y*8.2;
					spider_head.position.z = head.z*5 + 50; 
 
					skeletonHelper.update();
 
				}
				renderer.render( scene, camera );
			}