Molecule angles building

I try to build molecule CH4 with threejs

enter image description here

But when I try to build 109.5 angle

methanum = function(x, y, z) {
  molecule = new THREE.Object3D();
  var startPosition = new THREE.Vector3( 0, 0, 0 );
  molecule.add(atom(startPosition, "o"));
  var secondPosition = new THREE.Vector3( -20, 10, 00 );
  molecule.add(atom(secondPosition, "h"));
  var angle = 109.5;
  var matrix = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 0, 1, 0 ), angle * ( Math.PI / 180 ));
  var thirdPosition = secondPosition.applyMatrix4( matrix );
  molecule.add(atom(thirdPosition, "h"));
  var fourthPosition = thirdPosition.applyMatrix4( matrix );
  molecule.add(atom(thirdPosition, "h"));
  molecule.position.set(x, y, z);
  molecule.rotation.set(x, y, z);
  scene.add( molecule );
}

Demo: https://dl.dropboxusercontent.com/u/6204711/3d/ch4.html

But my atoms are not uniformly distributed as in the drawing

Some ideas?

Solution

Well there are 3 errors in your molecule code.

You place an oxygen as the center of the CH4 instead of a carbon
When you apply your fourth hydrogen, you specify the third position whereas you have created a fourthposition.
You are rotating around the wrong axis when you place your third hydrogen. My hints are the following: First of all , place your carbon, then move along the Z-axis, place your first hydrogen, rotate around the X-axis of 109.5°, place your second hydrogen, rotate around the Z-axis of 120° the position of your second hydrogen, place your third hydrogen and finally rotate once again around the Z-axis of 120° the position of your third hydrogen and place your last hydrogen.

Here is the CH4 I tried:

methanum3 = function(x, y, z) {


    molecule = new THREE.Object3D();
    var startPosition = new THREE.Vector3( 0, 0, 0 );
    molecule.add(atom(startPosition, "c"));

    var axis = new THREE.AxisHelper( 50 );
    axis.position.set( 0, 0, 0 );
    molecule.add( axis );

    var secondPosition = new THREE.Vector3( 0, 0, -40 );
    molecule.add(atom(secondPosition, "h"));


    var angle = 109.5;
    var matrixX = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, 0 ), angle * ( Math.PI / 180 ));
    var thirdPosition = secondPosition.applyMatrix4( matrixX );
    molecule.add(atom(thirdPosition, "h"));

    var matrixZ = new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 0, 0, 1 ), 120 * ( Math.PI / 180 ));

    var fourthPosition = thirdPosition.applyMatrix4( matrixZ );
    molecule.add(atom(fourthPosition, "h"));

    var fifthPosition = fourthPosition.applyMatrix4( matrixZ );
    molecule.add(atom(fifthPosition, "h"));

    molecule.position.set(x, y, z);
    //molecule.rotation.set(x, y, z);
    scene.add( molecule );
}

//water(0,0,0);
//water(30,60,0);
methanum3(-30,60,0);

Explanation:

Let's call H¹ an hydrogen and H² another one. The given angle of 109.5° is defined in the :

---> --->
(CH¹,CH²) plane. Therefore when you look in the direction of the normal of that plane, you can see the 109.5° (Cf. the right part of the image below) BUT When you look in the direction of the normal of another plane you'll get the projection of that angle on that plane. In your case when you look in the direction of the Z-axis you can see an angle of 120°.(Cf. left part of the image below).

The two angles are different according to the direction of the camera.

Hope this helps.