我有一个名为THREEx
的对象。它似乎有一个名为DragPanControls
的属性,它显然是一个函数。我知道THREEx
存在,因为
console.log("THREEx? ", THREEx);
返回此输出(参见第3行):
我知道DragPanControls存在是因为单击上面第3行中的绿色文本会显示:
但是,无法访问DragPanControls。我知道这是因为
console.log("THREEx.DragPanControls? ", THREEx.DragPanControls);
返回 undefined (参见第一张图片中的第4行),因为尝试将其用作构造函数也会失败(参见第一张图片中的第5行)
我如何找出问题所在?运行代码可以在这里看到: https://dl.dropbox.com/u/2070405/stackoverflow1/index.html
更新:由于亚历山大的答案,问题现在已经解决了。为了将来参考,这是生成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
}
});
这是main.js,其中require.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);
};
});
答案 0 :(得分:3)
从您的第一个屏幕截图中,THREEx
对象实际上是一个包含另一个THREEx
对象的对象。
您可以使用以下方式访问函数DragPanControls
:
THREEx.THREEx.DragPanControls