javascript - three.js: camera changes position, but it doesn't show - Stack Overflow

admin管理员组

文章数量:1410697

I have a program where camera.position.[x|y|z] changes according to mouse position. This is verified by this console output:

However, the rendering of the object at which the camera is looking, doesn't change. It stands still, as can be seen here:

.html

How do I best approach debugging such behavior?

The program consists of index.html, js/main.js, js/myLibs/dragPanControls.js*, js/require.js, js/libs/three.js/build/three.js

This is 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 bee 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);

    };

});

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

*kindly lended from jeromeetienne

I have a program where camera.position.[x|y|z] changes according to mouse position. This is verified by this console output:

However, the rendering of the object at which the camera is looking, doesn't change. It stands still, as can be seen here:

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

How do I best approach debugging such behavior?

The program consists of index.html, js/main.js, js/myLibs/dragPanControls.js*, js/require.js, js/libs/three.js/build/three.js

This is 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 bee 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);

    };

});

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

*kindly lended from jeromeetienne

• javascript
• three.js

Share Improve this question Follow asked Oct 20, 2012 at 23:10 user134055user134055

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You are using code you copied from the net that was designed to work with an older version of the library.

Instead, use a any one of a number of camera controllers available in the three.js examples/js/controls directory. For example:

controls = new THREE.OrbitControls( camera );

These controls are not part of the library as of r.52, so you will have to include the source explicitly.

Here is a Fiddle that shows the use of a camera controller: http://jsfiddle/WV49w/3/

本文标签： javascriptthreejs camera changes positionbut it doesn39t showStack Overflow