javascript - three.js:相机改变位置，但不显示

Question

我有一个程序，其中 camera.position.[x|y|z] 根据鼠标位置而变化。此控制台输出验证了这一点:

但是，相机所注视的对象的渲染并没有改变。它静止不动，如下所示:

https://dl.dropbox.com/u/2070405/stackoverflow2/index.html

如何最好地调试此类行为？

程序由index.html、js/main.js、js/myLibs/dragPanControls.js*、js/require.js、js/libs/three.js/build/three.js组成

这是 main.js:

// CONFIGURE require.js BEFORE 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", "myLibs/testlib"], function(DPC, three, testlib) {
    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("DPC? ", DPC);
        console.log("testlib.success? ", testlib.success);
        //console.log("DragPanControls? ", DragPanControls);
        console.log("DPC.DragPanControls? ", DPC.DragPanControls);
        cameraControls  = new DPC.DragPanControls(camera);

    };

    function animate() {

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

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

        cameraControls.update();

        console.log("camera.position.x: ", camera.position.x);

        renderer.render(scene, camera);

    };

});

这是 js/myLibs/dragPanControls.js:

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

        // Setup work:

        var DragPanControls;


        DragPanControls = function(object, domElement)
        {
            console.log("drapancontrols kan finde THREE? ", THREE);

            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 );
        }

        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 );
        }

        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 );

            //console.log("this._mouseX: ", this._mouseX);
            //console.log("this.rangeX: ", this.rangeX);

            //console.log("this._object.position.x: ", this._object.position.x);
            //console.log("this._object.position.y: ", this._object.position.y);
        }

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

        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;
        }

        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 {
            DragPanControls: DragPanControls
        };
    }
);

*由 jeromeetienne 友情借出

Answer 1

您正在使用从网上复制的代码，这些代码旨在与旧版本的库一起使用。

相反，使用 three.js examples/js/controls 目录中可用的多个相机 Controller 中的任何一个。例如:

controls = new THREE.OrbitControls( camera );

从 r.52 开始，这些控件不属于库的一部分，因此您必须明确包含源代码。

这是一个显示相机 Controller 使用的 fiddle :http://jsfiddle.net/WV49w/3/