title: Problem in understanding three.js coordinate and axes system
body: <p>I have following code:</p>
  
  <pre><code>// coordinate values
  var x1 = -815723.5125568421;
  var y1 = 20538442.534868136;
  var z1 = -17.439584224846456;
  var x2 = -815723.5125568421;
  var y2 = 20538443.164575472;
  var z2 = -16.620415776398275;
  
  // make a rectangular face parallel to y-z plane
  var dummySquare = new THREE.Geometry();
  dummySquare.vertices.push(new THREE.Vector3(x1,y1,z1));
  dummySquare.vertices.push(new THREE.Vector3(x1,y1,z2));
  dummySquare.vertices.push(new THREE.Vector3(x2,y2,z1));
  dummySquare.vertices.push(new THREE.Vector3(x2,y2,z2));
  dummySquare.faces.push(new THREE.Face3(0,1,2));
  dummySquare.faces.push(new THREE.Face3(1,2,3));
  var dummySquareMaterial = new THREE.MeshBasicMaterial( { color: "#0000FF", side: THREE.DoubleSide } );
  var dummySquareMesh = new THREE.Mesh(dummySquare, dummySquareMaterial);
  </code></pre>
  
  <p>So, I am making a rectangular face parallel to y-z plane.
  During debugging I observe following:</p>
  
  <blockquote>
    <p>vertices: Array(4)</p>
    
    <p>0: p {x: -815723.5125568421, y: 20538442.534868136, z:
    -17.439584224846456}</p>
    
    <p>1: p {x: -815723.5125568421, y: 20538442.534868136, z:
    -16.620415776398275}</p>
    
    <p>2: p {x: -815723.5125568421, y: 20538443.164575472, z:
    -17.439584224846456}</p>
    
    <p>3: p {x: -815723.5125568421, y: 20538443.164575472, z:
    -16.620415776398275}</p>
    
    <p>position: p {x: 0, y: 0, z: 0}</p>
  </blockquote>
  
  <p>So vertices are as expected. But position is at (0,0,0). I expected position to be mid point of the plane defined by above four vertices.</p>
  
  <p>What is missing here in my understanding?</p>
  
  <p>Another observation is as follows.</p>
  
  <p>I make two faces just like above(same vertices). </p>
  
  <p>For one of the two faces, I determine centre of geometry, move geometry it to origin(translate by negative of centre), create a mesh with it which then I move back to original position:</p>
  
  <pre><code>var face = new THREE.Geometry();
  ....add vertices as code snippet above
  var faceCentre = new THREE.Vector3();
  face.boundingBox.getCenter(faceCentre );
  face.translate(-faceCentre .x,-faceCentre .y,-faceCentre .z);
  //make mesh
  var faceMaterial = new THREE.MeshBasicMaterial( { color: "#FF0000", side: 
  THREE.DoubleSide } );
  var faceMesh= new THREE.Mesh(face, faceMaterial);
  // move mesh back by setting its position to original centre of face
  faceMesh.position.x = faceCentre .x;
  faceMesh.position.y = faceCentre .y;
  faceMesh.position.z = faceCentre .z;
  </code></pre>
  
  <p>Unmoved face has same vertices as for face above, as expected.</p>
  
  <p>But other face has now totally different vertices, even though both are displayed at same position and in same orientation.</p>
  
  <p>Why this difference in vertices?</p>