object has property that cannot be accessed

Question

I have an object named THREEx. It seemingly has a property named DragPanControls which apparently is a function. I know that THREEx exists, because

console.log("THREEx? ", THREEx);

returns this output (see line 3):

and I know that DragPanControls exists because clicking the green text in line 3 above reveals this:

However, DragPanControls cannot be accessed. I know this because

console.log("THREEx.DragPanControls? ", THREEx.DragPanControls);

returns undefined (see line 4 in the first picture) and because trying to use it as a constructor also fails (see line 5 in the first picture)

How do I find out what's wrong? The running code can be seen here: https://dl.dropbox.com/u/2070405/stackoverflow1/index.html

Update: The problem is now solved, thanks to the answer from Alexander. For future reference, this is the code that generated the THREEx object:

/** @namespace */
define(["../libs/three.js/build/three"],
function () {

// Setup work:
var THREEx  = THREEx        || {};

THREEx.DragPanControls  = function(object, domElement)
{
    this._object    = object;
    this._domElement= domElement || document;

    // parameters that you can change after initialisation
    this.target = new THREE.Vector3(0, 0, 0);
    this.speedX = 0.03;
    this.speedY = 0.03;
    this.rangeX = -40;
    this.rangeY = +40;

    // private variables
    this._mouseX    = 0;
    this._mouseY    = 0;

    var _this   = this;
    this._$onMouseMove  = function(){ _this._onMouseMove.apply(_this, arguments); };
    this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); };
    this._$onTouchMove  = function(){ _this._onTouchMove.apply(_this, arguments); };

    this._domElement.addEventListener( 'mousemove', this._$onMouseMove, false );
    this._domElement.addEventListener( 'touchstart', this._$onTouchStart,false );
    this._domElement.addEventListener( 'touchmove', this._$onTouchMove, false );
}

THREEx.DragPanControls.prototype.destroy    = function()
{
    this._domElement.removeEventListener( 'mousemove', this._$onMouseMove, false );
    this._domElement.removeEventListener( 'touchstart', this._$onTouchStart,false );
    this._domElement.removeEventListener( 'touchmove', this._$onTouchMove, false );
}

THREEx.DragPanControls.prototype.update = function(event)
{
    this._object.position.x += ( this._mouseX * this.rangeX - this._object.position.x ) * this.speedX;
    this._object.position.y += ( this._mouseY * this.rangeY - this._object.position.y ) * this.speedY;
    this._object.lookAt( this.target );
}

THREEx.DragPanControls.prototype._onMouseMove   = function(event)
{
    this._mouseX    = ( event.clientX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.clientY / window.innerHeight) - 0.5;
}

THREEx.DragPanControls.prototype._onTouchStart  = function(event)
{
    if( event.touches.length != 1 ) return;

    // no preventDefault to get click event on ios

    this._mouseX    = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
}

THREEx.DragPanControls.prototype._onTouchMove   = function(event)
{
    if( event.touches.length != 1 ) return;

    event.preventDefault();

    this._mouseX    = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
}

// Return module:
return {
    THREEx: THREEx
    //dragpancontrols: THREEx.DragPanControls
}

});

and this is the main.js where require.js imports the code above (the code above was in the file myLibs/dragPanControls.js):

// CONFIGURE require.js BEFORE YOU START LOADING MODULES:

requirejs.config({
shim: {
    'libs/three.js/build/three': {
        deps: [],
        exports: 'three' //'three' will not be accessible, but any values that three.js writes to the global object will become available to me if I import 'three'.
        /*init: function () {
            // if I want 'three' to actually refer to something, I can do so by returning whatever I want it to refer to, in this init function
            console.log("init three. Is THREE available? ", THREE);
            return this;
        }*/
    }
}
});


// NOW START LOADING MODULES:

require(["myLibs/dragPanControls", "libs/three.js/build/three"], function(THREEx, three) {
console.log("Function call called after all modules are loaded and accessible");


// HELLO WORLD EXAMPLE:

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    console.log("THREEx? ", THREEx);
    //console.log("DragPanControls? ", DragPanControls);
    console.log("THREEx.DragPanControls? ", THREEx.DragPanControls);
    cameraControls  = new DragPanControls(camera);

};

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

};

});

Answer 1

From your first screenshot, the THREEx object is actually an object that contains another THREEx object.

You can access the function DragPanControls by using:

THREEx.THREEx.DragPanControls