title: How to create multiple geometries in three.js?
body: <p>Hi I currently working with three.js, I would like to create 4 cubes in the 4 parts of the axis. I am able to create one cube that is rotating but how do I create the other three?, I have tried the clone () function and  position.set, but I cant seem to create another cube in a different axis. thanks for any help or guidance
  Here is my javascript</p>
  
  <pre><code>var camera;
  var scene;
  var renderer;
  var mesh;
  
  init();
  animate();
  
  function init() {
  
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
  
      var light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 1, 1 ).normalize();
      scene.add(light);
  
      var geometry = new THREE.CubeGeometry( 10, 10, 10);
      var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
  
      mesh = new THREE.Mesh(geometry, material );
      mesh.position.z = -50;
      scene.add( mesh );
  
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
  
      window.addEventListener( 'resize', onWindowResize, false );
  
      render();
  }
  
  function animate() {
      mesh.rotation.x += .04;
      mesh.rotation.y += .02;
  
      render();
      requestAnimationFrame( animate );
  }
  
  function render() {
      renderer.render( scene, camera );
  }
  
  function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
      render();
  }
  </code></pre>