Q:

How do I draw two rectangles moving towards me in three.js?

I am using three.js to draw a couple of 3D objects. 
Currently, I have drawn one rectangle that is moving towards me from the left:

body { margin: 0; }
   canvas { width: 100%; height: 100% }
  <title> </title>
 <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
  <script src="js/three.min.js"></script>
  <script>
            function five(x){
                x_rounded = 5 * Math.round(x/5);
                return(x_rounded);
            }
            var transparency = {0: "00", 5: "0D", 10: "1A", 15: "26", 20: "33", 25: "40", 30: "4D", 35: "59", 40: "66", 45: "73", 50: "80", 55: "8C", 60: "99", 65: "A6", 70: "B3", 75: "BF", 80: "CC", 85: "D9", 90: "E6", 95: "F2", 100: "FF"};
   var scene = new THREE.Scene();
            // var scene2 = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

   var renderer = new THREE.WebGLRenderer();
            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();
            mouse.x = 0;
            mouse.y = 0;
            var speed = 0.1;
   renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );

   var shapes = [];
            camera.position.x = 4;
            shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
            camera.position.x = 6;
            shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
      camera.position.z = 25;
            trans = transparency[five(camera.position.z)];
   var material = new THREE.MeshBasicMaterial( { color: '#'+trans+'#F5F5F5' } );
   var cubes = [];
            for(var i = 0;i<shapes.length;i++){
                cube = new THREE.Mesh( shapes[i], material )
                cubes.push(cube);
      }
            
            scene.add(cubes[0]);
            scene.add(cubes[1]);

                camera.position.x = 4;
   var render = function () {
    requestAnimationFrame( render );

                camera.position.z -= speed;
                trans = transparency[five(camera.position.z)];
                col = '#'+trans+'#F5F5F5';
                material = new THREE.MeshBasicMaterial( { color:  col} );
                scene = new THREE.Scene();
                scene.add(new THREE.Mesh(shapes[0], material));
                if(camera.position.z <= 0){
                    camera.position.z = 25;
                    // shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
                    // cubes.push(new THREE.Mesh(shapes[shapes.length-1], material));
                    // scene.add(cubes[cubes.length-1]);
                }
    // cube.rotation.x += 0.05;
    // cube.rotation.y += 0.05;
    //             cube.rotation.z += 0.05;

    renderer.render(scene, camera);
   };

   render();

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates
 // (-1 to +1) for both components

 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
 mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1
}



window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);
  </script>
 </body>

However, I now want to draw another rectangle that is moving towards me from the right (mirror image of the one on the left). I tried adding a new rectangle and changing camera.position.y and .x, but nothing worked. Also, every time the rectangle loops over, I want it to fade on from the background to the foreground. Is this possible in three.js?

A:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometries = [];
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));

var material = new THREE.MeshNormalMaterial({
  color: 0xff0000
});
var meshes = [];
meshes.push(new THREE.Mesh(geometries[0], material));
meshes.push(new THREE.Mesh(geometries[1], material));

meshes[0].position.set(2, 0, -10);
scene.add(meshes[0]);

meshes[1].position.set(-2, 0, -15);
scene.add(meshes[1]);

var time = new Date();
function render() {
  // delta in ms
  var newTime = new Date();
  var delta = newTime - time;
  time = newTime;

  // move the boxes
  var mult = 0.005;
  meshes[1].position.z += delta * mult;
  meshes[0].position.z += delta * mult;

  renderer.render(scene, camera);

  requestAnimationFrame(render);
};

requestAnimationFrame(render);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>

I'd strongly suggest that you read the docs first since your code wasn't good at all, there are some small facts that you need to know first:

To render things you need a renderer, a camera and some objects to render
The objects to render must be stored in a scene graph, THREE.Scene will hold all the objects to render
with renderer.render(scene, camera) THREE will map all the 3d objects in our
scene to a 2d plane (which is what we see a.k.a the screen), after the representation is computed is rendered with THREE.WebGLRenderer

In the example above instead of moving the camera I moved the objects (which I assumed that's what you wanted), first thing to note is that THREE uses the right hand rule, by default any object created (as well as the camera) is positioned in the origin, the camera is a special object because it also has a vector which points to the direction the camera is looking (it's looking to the -z initially)
For this simple example we don't need to move the camera, how about moving the objects away from the camera? we can do that by setting the z coordinate of the objects to be moved away from the camera (which would by any multiple of the unit -z vector), also since you want to have an object to the right and to the left how about changing it's x coordinates, the object on the left needs to have an x coordinate multiple of the unit -x vector and the object on the right a multiple of the unit x vector. Finally in the game loop we just need to move them towards the camera i.e. changing it's z coordinate.
Please make sure to read a little bit about 3d math, Udacity's course is a good place to start :)

