1

という名前のオブジェクトがありますTHREEx。DragPanControls明らかに関数であるという名前のプロパティがあるようです。私はそれTHREExが存在することを知っています。

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

この出力を返します (3 行目を参照)。

ここに画像の説明を入力

上記の 3 行目の緑色のテキストをクリックすると、次のことが明らかになるため、DragPanControls が存在することがわかります。

ここに画像の説明を入力

ただし、DragPanControls にはアクセスできません。私はこれを知っているので

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

undefinedを返し(最初の図の 4 行目を参照)、コンストラクタとして使用しようとしても失敗するため (最初の図の 5 行目を参照)

何が問題なのかを調べるにはどうすればよいですか? 実行中のコードは、 https ://dl.dropbox.com/u/2070405/stackoverflow1/index.html で確認できます 。

更新: Alexander からの回答のおかげで、問題は解決されました。今後の参考のために、これは THREEx オブジェクトを生成したコードです。

/** @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
}

});

これは、require.js が上記のコードをインポートする main.js です (上記のコードはファイル 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);

};

});
4

1 に答える 1

2

最初のスクリーンショットから、THREExオブジェクトは実際には別のオブジェクトを含むTHREExオブジェクトです。

DragPanControls以下を使用して関数にアクセスできます。

THREEx.THREEx.DragPanControls
于 2012-10-20T17:50:49.443 に答える