camera translateX #1753

farfromrefug opened this Issue Apr 18, 2012 · 20 comments


4 participants


I am trying to implement translation using pan on ipad. So when the user pan on the ipad, i want to translate the camera. Actually what i want is to translate the camera in the global space like if i had translated the camera of panx, pany in its own space.

I am not sure if it the right function to use, but i understood translateX, translateY to be what i want. So the first question is "am i right?"

Now the reason why i ask, and not just test it, is that for me translateX on the camera does nothing.


i tried updating the matrix afterward, still nothing :s
By the way i actually use CombinedCamera, and so i do


mrdoob commented Apr 18, 2012

I am not sure if it the right function to use, but i understood translateX, translateY to be what i want. So the first question is "am i right?"

Yep. That should be working.

Ok so that s a good news but it doesnt work :s
I tried updateMatrix afterward and still nothing ...


mrdoob commented Apr 18, 2012

Could you share more code? It may just be something else.

I hope you have enough. And by the way, thank you!

RepairMan.loadDAE = function(path)
    if (dae != null)
        dae = null;
    loader.load( path, function colladaReady( collada ) {

        dae = collada.scene;

        dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
        dae.useQuaternion = false;

        THREE.SceneUtils.traverseHierarchy( dae, function ( object ) {
            partsDict[] = object; 
            object.material.doubleSided = true;
            object.useQuaternion = false;
        } );
        scene.add( dae );
    } );
var init = function() {
    projector = new THREE.Projector();

    scene = new THREE.Scene();

    camera = new THREE.CombinedCamera(window.innerWidth,  window.innerHeight, initialCamera.fov, 1, 2000 );
    camera.position.set( initialCamera.tx, initialCamera.ty, );
    camera.useQuaternion = false;
    camera.lookAt( scene.position );

    scene.add( camera );

    // RepairMan.loadDAE(decodeURIComponent("/Volumes/data/dev/xerox/xstar3/trunk/Client/Titanium/RepairMan/Resources/web/models/main.dae"));

    scene.add( new THREE.AmbientLight( 0xcccccc ) );

    var directionalLight = new THREE.DirectionalLight(0xaaaaaa );
    directionalLight.position.x = 100;
    directionalLight.position.y = 100;
    directionalLight.position.z = 100;
    scene.add( directionalLight );

    var directionalLight2 = new THREE.DirectionalLight(0xaaaaaa );
    directionalLight2.position.x = -100;
    directionalLight2.position.y = -100;
    directionalLight2.position.z = -100;
    scene.add( directionalLight2 );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    stats = new Stats(); = 'absolute'; = '0px';
    document.body.appendChild( stats.domElement );;
RepairMan.moveModel = function(_x, _y, _z, _animated) {

Looking at the source - it seems you should be translating the CombinedCamera object as it is the render-time camera being used. The 2 children camera seems to be used to setup the parent camera parameters.

You are right.
But sadly it still doesnt work!


mrdoob commented Apr 19, 2012

Have you tried using PerspectiveCamera instead? Is there any reason why you need CombinedCamera?

I use CombinedCamera because it has methods like setZoom which make it pretty nifty with touch screen pinch for example.
But i can try PerspectiveCamera and add the setZoom if it works for translateX.


mrdoob commented Apr 21, 2012

Looking at the CombinedCamera code...

this.cameraP.fov =  this.fov / this.zoom;

Seems like you can just try using the PerspectiveCamera and do this:

camera.fov = fov / zoom;

Then try and see if translateX() works.

still doesn't work :s
I must be doing something wrong!


mrdoob commented Apr 21, 2012

Uhm... do you mind creating a jsfiddle that shows the issue?

it works on jsfiddle
so its definitively me :s
sorry for the trouble, will go through my code (again)

Ok so i managed to get to work (dont really now how but i guess it was a FULL clean up of the project)
Thank you!

farfromrefug reopened this May 2, 2012

Ok so i faced the problem again. And i managed to narrow it down to Vector3.addSelf
It's camera.position.addSelf( axis ); which doesnt work in my case.
The worst part is that if i do

camera.position.x += axis.x;
camera.position.y += axis.y;
camera.position.z += axis.z;

it works....
any idea?


mrdoob commented May 2, 2012

No idea...

    addSelf: function ( v ) {

        this.x += v.x;
        this.y += v.y;
        this.z += v.z;

        return this;


Yes me neither, i tried a lot of things and i dont get it...
So for now i stick with my solution (ugly one ...)

mrdoob closed this May 3, 2012


alteredq commented May 3, 2012

This is weird, maybe some trouble with runaway global variables or accidentally naming more variables with the same name or something like that.

what is "runaway global variables"?


alteredq commented May 3, 2012

When you think your variable is local but you accidentally made it global because of some mistake, e.g.:

function doSomething() {

    var localVar1; // <== here


We used to have some really strange bugs cause of this.

ah ok i see.
I will go through my code to check that, we never know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment