Javascript Sample RSSDK THREE.js

[ggera]

I am running the Javascript Framework samples included in the RSSDK--my camera is the SR300 and i'm running Windows 10. Though a newbie here i am a bit familiar with THREE.js. I am trying multiple strategies to load simple, low-poly models (.json,.obj) in place of the sphere geometry in the supplied "Hand-Tracking"example with no success--i am continually getting errors if I try to place models on the hand_joints_array ("cannot read property 'position' of undefined" in function checkFacePointsVisible()) --the sample does 'init' and the models all load on top of each other as one unit on one joint -I am baffled because I can successfully replace spheres with any other type of geometry- If anyone can offer suggestions, help, Much appreciated. Thanks (below is the THREE.js/"SampleRenderer.js" of the project)

        //THREE.JS variables
var scene, camera, renderer;

// sphere width segments, heightSegments
var sp_wseg = 8;
var sp_hseg = 8;

var MaxHands = 2;
var MaxJoints = intel.realsense.hand.NUMBER_OF_JOINTS;
var MaxLandmarks = 78;

// hand base sphere radius, width segments, heightSegments
var sp_hradius = 11;
// hand joints
var hand_joints_array = new Array(2);

// face base radius 
var sp_fradius = 0.40;
// face points
var face_points_array;
// face detection plane
var detectionPlane;

// maxFaces (only detection & landmark in current sample renderer)
var maxFaces = 1; //initialized to 1
var sphere;
var obj =  new THREE.Object3D();
//var object;
var msh=[];

var loader2 = new THREE.JSONLoader();
function createSphere2(){

    loader2.load("suzanne2.json", function(geometry) {
    var material = new THREE.MeshPhongMaterial({color: '#ffa000' ,  opacity:0.2});

    var object = new THREE.Mesh(geometry, material);

   object.visible=true;
    obj.add(object);

});

    return obj;
}


    ///



// Create Sphere Function used across face & hand
function createSphere(_radius, _wSegments, _hSegments, _specularColor, _color, _emmisive, _shininess){
    var geometry = new THREE.SphereGeometry(_radius, _wSegments, _hSegments);
    var material = new THREE.MeshPhongMaterial({
        specular: _specularColor,
        color: _color,
        emissive: _emmisive,
        shininess: _shininess
    });
    sphere = new THREE.Mesh(geometry, material);


    return sphere;
}

/** HAND RENDERER METHODS **/

// show/hide spheres for joints not active
function checkHandJointsVisible() {

    for (i = 0; i < MaxHands; i++){
        for (j = 0; j < MaxJoints; j++) {

            if (hand_joints_array.position.x == 0 && hand_joints_array.position.y == 0 && hand_joints_array.position.z == 0)
                hand_joints_array.visible = false;
            else
                hand_joints_array.visible = true;
        }
        ///////
      } 
}

// reset joints position
function clearHandsPosition(_label) {

   // if (_label == 16384) {
        for (i = 0; i < MaxHands; i++) {
            for (j = 0; j < MaxJoints; j++) {
                hand_joints_array.position.set(0, 0, 0);
            }
        }

}

// initialize sample hand renderer
function initHandRenderer(w, h) {

    // setup THREE.JS scene, camera & renderer
    w += 250; // wider Window

    // initialize 2D array
    for (i = 0; i < MaxHands; i++) {
        hand_joints_array = new Array(MaxJoints);

    }

    // scene & camera
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, w / h, 1, 1500);
    camera.position.z = -60;
    camera.lookAt(scene.position);

    // renderer
    renderer = new THREE.WebGLRenderer({ alpha: true } );

    // set window size
    renderer.setSize(w, h);
    renderer.setClearColor( 0x000000, 0 ); // the default
    var container = document.getElementById('renderercontainer');
    container.appendChild(renderer.domElement);

    // ambient lighting
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    // directional lighting (Top)
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.85);
    directionalLight.position.set(0, 1, 0);
    scene.add(directionalLight);

    // directional light (Bottom)
    var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight2.position.set(0, -1, 0);
    scene.add(directionalLight2);

    // Grid
    var grid = new THREE.GridHelper(400, 80);
    grid.setColors('#FFFFFF', '#FFFFFF');
    grid.position.z = 875;
    grid.position.y = -200;
   // scene.add(grid);
   ///


    fillHandScene(); // create spheres
    handRendererUpdate(); // hand renderer update


    return hand_joints_array;
    for(var i=0; i < hand_joints_array.length; i++){
      scene.add(object);
       msh.push(object);

   }

}

// update hand renderer
function handRendererUpdate() {
    requestAnimationFrame(handRendererUpdate);
    checkHandJointsVisible();
    renderer.render(scene, camera);

    for(var k=0; k < hand_joints_array.length; k++){
    console.log(hand_joints_array);
}

}

// create objects(spheres) for the hand scene
function fillHandScene() {
    for(i = 0; i< MaxHands; i++){
        for (j = 0; j < MaxJoints; j++) {

              //console.log( hand_joints_array.position);
            if (j == 5 || j == 9 || j == 13 || j == 17 || j == 21) {
                hand_joints_array = createSphere(sp_hradius, sp_wseg, sp_hseg, '#414141', '#f0e53d', '#0f0e0e', 100);
            } else if (j == 1) {
                hand_joints_array =  createSphere2();//(sp_hradius+4, sp_wseg, sp_hseg, '#414141', '#ff000e', '#0f0e0e', 100);

               // hand_joints_array.add(object);
             } else {
                hand_joints_array = createSphere2();
                //(sp_hradius-3, sp_wseg, sp_hseg, '#525252', '#1b93ff', '#0f0e0e', 100);
            }
           // hand_joints_array.add(obj);
            scene.add(hand_joints_array);


               if(obj){

              obj.visible=true;
              obj.scale.set(15,15,15);

            }

        }

    }