Reduced a bit the internal complexity

docs/example-body-parts.html

@@ -16,20 +16,14 @@
 	var man = new Male();
 
 	man.turnRight = 90;
-
+	
 	man.l_fingers.bend = 20;
 	man.r_fingers.bend = 20;
 
-	man.l_leg.straddle = 30;
-	man.r_leg.straddle = 30;
-
-	man.l_ankle.tilt = 30;
-	man.r_ankle.tilt = 30;
-
-	man.stepOnGround();
+	man.position.y = +0.13;
 
 	man.body.label( 'body', -27, 1.5, 0 ).scale.set( 3, 3, 3 );
-	man.head.label( 'head', 12 );
+	man.head.label( 'head', 9 );
 	man.neck.label( 'neck', 0, 0.5, 3 );
 	man.torso.label( 'torso', 7, 0.5, 3 );
 	man.pelvis.label( 'pelvis', 0, 0.5, 2 );
@@ -51,25 +45,36 @@
 	man.r_leg.label( 'r_leg', 5, -1.55, 0, 1, 2.02 );
 	man.r_knee.label( 'r_knee', 4, -1.25, 0, 1, 2.08 );
 	man.r_ankle.label( 'r_ankle', 1, -1.2, -1, 1, 2, 0 );
-
+	
 	function animate( t ) {
 
+		var s = Math.sin( 2*t );
+
 		man.head.turn = -45 * Math.sin( 2*t +0.5 );
 
 		man.torso.tilt = -15 * Math.sin( 2*t -0.5 );
 
-		man.l_arm.straddle = 55 - 30 * Math.sin( 2*t );
-		man.r_arm.straddle = 55 + 30 * Math.sin( 2*t );
+		man.l_arm.straddle = 55 - 30 * s;
+		man.r_arm.straddle = 55 + 30 * s;
 
-		man.l_elbow.bend = 30 + 30 * Math.sin( 2*t );
-		man.r_elbow.bend = 30 - 30 * Math.sin( 2*t );
+		man.l_elbow.bend = 30 + 30 * s;
+		man.r_elbow.bend = 30 - 30 * s;
 
-		man.l_wrist.bend = 25 + 15 * Math.sin( 2*t );
-		man.r_wrist.bend = 25 - 15 * Math.sin( 2*t );
+		man.l_wrist.bend = 25 + 15 * s;
+		man.r_wrist.bend = 25 - 15 * s;
 
-		man.l_fingers.bend = 40 + 20 * Math.sin( 2*t );
-		man.r_fingers.bend = 40 - 20 * Math.sin( 2*t );
+		man.l_fingers.bend = 40 + 20 * s;
+		man.r_fingers.bend = 40 - 20 * s;
 
+		man.body.position.x = -0.7*s;
+		man.body.tilt = 10*s;
+
+		man.l_leg.straddle = 30+12.5*s;
+		man.r_leg.straddle = 30-12.5*s;
+
+		man.l_ankle.tilt = 30+3*s;
+		man.r_ankle.tilt = 30-3*s;
+
 	}
 
 	</script>

docs/example-point.html

@@ -74,7 +74,7 @@
 
 		// attach a string to five points relative to body parts
 		setLoopVertex( 0, man.r_finger_2.tip.point( 0, 0.5, 0 ) );
-		setLoopVertex( 1, man.head.point( 3, 1.2, 0 ) );
+		setLoopVertex( 1, man.head.point( 3, -1.5, 0 ) );
 		setLoopVertex( 2, man.l_finger_2.tip.point( 0, 0.5, 0 ) );
 		setLoopVertex( 3, man.l_ankle.point( 6, 2, 0 ) );
 		setLoopVertex( 4, man.r_ankle.point( 6, 2, 0 ) );

docs/example-scene.html

@@ -97,15 +97,15 @@
 
 			super();
 
-			this.position.set( x, -0.6, 0 );
+			this.position.set( x, -0.72, 0 );
 			this.rotation.y = angle;
 
 			var seat = new LimbShape( false, [ 0.4, 0.27, 0.4, 0, 270, 1, 0.2, 0 ], 20, 60 );
 			seat.recolor( 'darksalmon' );
 
 			var backrest = new LimbShape( false, [ 0.05, 1.0, 0.15, -90, 270, 1, 0.5, 0 ], 50, 10 );
 			backrest.recolor( 'darksalmon' );
-			backrest.position.set( -0.27, 0.55, 0 );
+			backrest.position.set( -0.12, 0.2, 0 );
 			backrest.rotation.set( 0, 0, 0.35 );
 
 			var cussion = new THREE.Mesh(

docs/qa-eyes-and-ears.html

@@ -25,11 +25,11 @@
 				shininess: 200
 			} )
 	);
-	eyeR.position.set( 2.2, 3.7, 2 );
+	eyeR.position.set( 2.2, 0.7, 2 );
 	man.head.attach( eyeR );
 
 	var eyeL = eyeR.clone();
-	eyeL.position.set( 2.2, 3.7, -2 );
+	eyeL.position.set( 2.2, 0.7, -2 );
 	man.head.attach( eyeL );
 
 

src/editor/posture-editor.js

@@ -362,9 +362,11 @@ function onPointerDown( event ) {
 		document.getElementById( 'rot-z-name' ).innerHTML = model[ name ].nameUI.z || 'N/A';
 
 		dragPoint.position.copy( obj.worldToLocal( intersects[ 0 ].point ) );
-		obj.imageWrapper.add( dragPoint );
+		//obj.imageWrapper.add( dragPoint );
+		obj.image.add( dragPoint );
 
-		if ( !cbMovX.checked && !cbMovY.checked && !cbMovZ.checked ) obj.imageWrapper.add( gauge );
+		//if ( !cbMovX.checked && !cbMovY.checked && !cbMovZ.checked ) obj.imageWrapper.add( gauge );
+		if ( !cbMovX.checked && !cbMovY.checked && !cbMovZ.checked ) obj.image.add( gauge );
 		gauge.position.y = ( obj instanceof Ankle ) ? 2 : 0;
 
 

src/organs/Head.js

@@ -9,7 +9,7 @@ class Head extends Joint {
 
 	constructor( parentJoint ) {
 
-		super( parentJoint, [ 1, 3, 0 ], Head.SIZE, HeadShape );
+		super( parentJoint, [ 1, 3+1.5, 0 ], Head.SIZE, HeadShape );
 
 		this.minRot = new THREE.Vector3( -45 / 2, -90 / 2, -60 / 2 );
 		this.maxRot = new THREE.Vector3( 45 / 2, 90 / 2, 50 / 2 );

src/organs/Joint.js

@@ -38,11 +38,12 @@ class Joint extends THREE.Group {
 		}
 
 		this.image.castShadow = true;
- 		if ( shape != PelvisShape && shape != ShoeShape ) {
+ 		//if ( shape != PelvisShape && shape != ShoeShape ) {
+		//
+		//	this.image.position.set( 0, yVal / 2, 0 );
+		//
+		//}
 
-			this.image.position.set( 0, yVal / 2, 0 );
-
-		}
 
 		this.imageWrapper = new THREE.Group();
 		this.imageWrapper.add( this.image );
@@ -235,7 +236,13 @@ class Joint extends THREE.Group {
 
 		this.traverse( function ( o ) {
 
-			if ( o.material && o.material.emissive ) o.material.emissive.setRGB( 0, state ? -1 : 0, state ? -0.4 : 0 );
+			if ( ( o.material instanceof Array ) ) {
+
+				if ( o.material[ 0 ] && o.material[ 0 ].emissive ) o.material[ 0 ].emissive.setRGB( 0, state ? -1 : 0, state ? -0.4 : 0 );
+				if ( o.material[ 1 ] && o.material[ 1 ].emissive ) o.material[ 1 ].emissive.setRGB( 0, state ? -1 : 0, state ? -0.4 : 0 );
+
+			} else
+				if ( o.material && o.material.emissive ) o.material.emissive.setRGB( 0, state ? -1 : 0, state ? -0.4 : 0 );
 
 		} );
 

src/organs/Phalange.js

@@ -29,8 +29,8 @@ class Phalange extends Joint {
 			this.nail.castShadow = true;
 			this.nail.receiveShadow = true;
 			this.nail.scale.set( 0.05, 0.2*nailSize, 0.1*nailSize );
-			this.nail.position.set( params[ 0 ]/4, params[ 1 ]*0.7, 0 );
-			this.nail.rotation.set( 0, 0, 0.2 );
+			this.nail.position.set( params[ 0 ]/4.5, params[ 1 ]*0.75, 0 );
+			this.nail.rotation.set( 0, 0, 0.1 );
 			this.nail.recolor = function ( color ) {
 
 				if ( typeof color === 'string' )

src/shapes/LimbShape.js

@@ -8,7 +8,7 @@ import { ParametricShape } from './ParametricShape.js';
 // limb shape as parametric surface
 class LimbShape extends ParametricShape {
 
-	constructor( feminine, params, nU = 24, nV = 12 ) {
+	constructor( feminine, params, nU = 10, nV = 12 ) {
 
 		var x = params[ 0 ],
 			y = params[ 1 ],
@@ -20,18 +20,20 @@ class LimbShape extends ParametricShape {
 			rad = params[ 7 ];
 		super( null, BODY_COLORS.LIMBS, function ( u, v, target ) {
 
+			u = THREE.MathUtils.smoothstep( u, 0, 1 );
+
 			v = 360 * v;
 			var r = offset + scale * cos( alpha + dAlpha * u );
 			target.set( x * r * cos( v ) / 2, y * u, z * r * sin( v ) / 2 );
 			var w = new THREE.Vector3( x * cos( v ) * cos( 170 * u - 85 ) / 2,
 				y * ( 1 / 2 + sin( 180 * u - 90 ) / 2 ),
 				z * sin( v ) * cos( 180 * u - 90 ) / 2 );
 			target = target.lerp( w, Math.pow( Math.abs( 2 * u - 1 ), 16 ) );
-			target.y += -0.5*y;
+			/*target.y += -0.5*y;*/
 
 		}, nU, nV );
 
-		if ( rad ) this.addJointSphere( rad, -y / 2 );
+		if ( rad ) this.addJointSphere( rad, /*-y / 2*/0 );
 
 		this.name = 'LimbShape';
 

src/shapes/TorsoShape.js

@@ -1,3 +1,4 @@
+import * as THREE from "three";
 import { BODY_COLORS, cos, cossers, sin } from '../globals.js';
 import { ParametricShape } from './ParametricShape.js';
 
@@ -16,6 +17,8 @@ class TorsoShape extends ParametricShape {
 			scale = params[ 6 ];
 		super( null, BODY_COLORS.TORSO, function ( u, v, target ) {
 
+			if ( u<0.3 ) u = THREE.MathUtils.smoothstep( u, 0, 1 );
+
 			var r = offset + scale * cos( alpha + dAlpha * u );
 			if ( feminine ) r += cossers( u, v, [
 				[ 0.35, 0.85, 0.7, 0.95, 2 ],
@@ -31,11 +34,11 @@ class TorsoShape extends ParametricShape {
 			var k = Math.pow( Math.abs( 2 * u - 1 ), 16 ),
 				kx = Math.pow( Math.abs( 2 * u - 1 ), 2 );
 			if ( x2 < 0 ) kx = k;
-			target.set( x1 * ( 1 - kx ) + kx * x2, y1 * ( 1 - k ) + k * y2 - y/2, z1 * ( 1 - k ) + k * z2 );
+			target.set( x1 * ( 1 - kx ) + kx * x2, y1 * ( 1 - k ) + k * y2 /*- y/2*/, z1 * ( 1 - k ) + k * z2 );
 
-		}, 30, 20 );
+		}, 20, 20 );
 
-		this.addSphere( 2, -y / 2 );
+		this.addSphere( 2, /*-y / 2*/0 );
 
 		this.name = 'TorsoShape';