Meshes are in Scene however nothing but the renderer's clear color appears

Question

So I'm working with Three.js and jQuery to create a small visual application. At the moment all I want is for all the meshes I have, to appear on screen.

The Problem: None of the meshes appear on screen whatsoever.

Exceptions: The renderer's clear color appears (0x00bfff) and console.log(scene) confirms that all the meshes are in the scene.

Attempts to Fix: Use THREE.Projector, THREE.Raycaster, change camera positioning, and many more attempts.

I'm still very new to Three.js and programming in general so please be very critical of my work. Anything helps! Thanks!

WORLD.JS

$(document).ready(function() {
    initialize();
    animate();
});

var initialize = function() {
    clock = new THREE.Clock();  // timer used to calculate time between rendering frames

    scene = new THREE.Scene();  // list of objects that are to be "read" (rendered)

    camera = new THREE.PerspectiveCamera(35,    // FOV
                                         window.innerWidth / window.innerHeight,    // Aspect Ratio
                                         .1,    // Near
                                         10000);    // Far
    camera.position.set( 25, 25, 125 );
    camera.lookAt( scene.position );

    setupEnvironment();

    setupAI();

    renderer = new THREE.WebGLRenderer();   // renderer will draw as WebGL rather than HTML5 Canvas
    renderer.setSize( window.innerWidth, window.innerHeight );  // size of the canvas that renderer will draw on
    renderer.setClearColor( 0x00bfff, 1 );
    document.body.appendChild( renderer.domElement );   // adds the canvas to the document
};

var animate = function() {  // animates the scene with frames
    requestAnimationFrame(animate); // works recursively
    render();   // update and display
}

var render = function() {
    var delta = clock.getDelta()    // gets the seconds passed since the last call to this method

    // AI collision needed

    // AI update needed

    renderer.render( scene, camera )    // repaint
}

var setupEnvironment = function() {
    ground = new BoxMesh( 10, 0.1, 10, 0x6C4319, 1 );
    positionThenAdd( ground, [[ 0, 0 ]] );

    light1 = new THREE.PointLight( 0xFFFFFF, .5 );
    light1.position.set( 10, 10, 10 );
    scene.add( light1 );

    light2 = new THREE.PointLight( 0xFFFFFF, 1 );
    light2.position.set( -10, -10, 10 );
    scene.add( light2 );
};


var setupAI = function() {
    sheep = new BoxMesh( 1, 1, 1, 0xFFFFFF, 3 );
    positionThenAdd( sheep, [[ 0, 0 ],
                             [ 4.5, 0 ],
                             [ 9.5, 0 ]]);

    sheepHerder = new BoxMesh( 1, 1, 1, 0x996633, 1 );
    positionThenAdd( sheepHerder, [[ 4.5, 7.5 ]] );
};

function BoxMesh( width, height, depth, hexColor, amount ) {    // creates one or more box meshes
    this.width = width;
    this.height = height;
    this.depth = depth;
    this.hexColor = hexColor;
    this.amount = amount;   // amount of box meshes to be made

    boxSize = new THREE.BoxGeometry( width, height, depth );
    boxMaterial = new THREE.MeshLambertMaterial( { color: hexColor } );

    var all = [];   // will contain all of the box meshes
    for(var n = 1; n <= amount; n++) {  // adds a new box mesh to the end of the all array
        all.push(new THREE.Mesh( boxSize, boxMaterial ));   // uses the attributes given by the BoxMesh constructor's parameters
    }
    return all; // returns all of the created box meshes as an array;
}

var positionThenAdd = function( varMesh, posArrXByZ ) { // positions an object and then adds it to the scene
    this.varMesh = varMesh; // variable name of the mesh(es) array
    this.posArrXByZ = posArrXByZ;   // posArrXByZ stands for "array of positions in the format of X-by-Z"
    // posArrXByZ is a 2 dimensional array where the first dimension is for the specific mesh to be positioned...
    // and the second dimension is the positional coordinates.
    // posArrXByZ = [ [x0,z0], [x1,z1], ...[xn,zn] ]
    for(var mesh = 0; mesh < varMesh.length; mesh++) {  // mesh accesses the varMesh array
        varMesh[mesh].position.set( varMesh[mesh].geometry.parameters.width/2 + posArrXByZ[mesh][0],    // the x coordinate, varMesh[mesh].width/2 makes the x coordinate act upon the closest side
                                    varMesh[mesh].geometry.parameters.height/2 + ground.height,         // the y coordinate, which is pre-set to rest on top of the ground
                                    varMesh[mesh].geometry.parameters.depth/2 + posArrXByZ[mesh][1] );  // the z coordinate, varMesh[mesh].height/2 makes the y coordinate act upon the closest side
        scene.add( varMesh[mesh] ); // adds the specific mesh that was just positioned
    }
};

HTML FILE

<!DOCTYPE html>
<html>
<head>
    <title>Taro's World</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            border: 0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="mrdoob-three.js-d6384d2/build/Three.js"></script>
    <script src="mrdoob-three.js-d6384d2/examples/js/renderers/Projector.js"></script>
    <script src="world.js"></script>
</head>
<body></body>
</html>

Answer 1

Two things are broken in your script :

• in your positionThenAdd function, at position.set(...), you wrote somewhere ground.height. ground is an array, you probably meant varMesh[mesh].geometry.parameters.height.

• your console should print that positionThenAdd is not a function. While you declared previous functions writing function myFunction(){....} you declared this one that way : var positionThenAdd = function () { ... };. The difference in javascript is that, as any variable, positionThenAdd will then be reachable in the script order. Since you write it at the end, nothing can reach it. You just have to modify its declaration to function positionThenAdd(){...}. See var functionName = function() {} vs function functionName() {}

Your scene : http://jsfiddle.net/ba8vvkyg/1/