I have a problem with TrackballControls. It doesn't work and pletly I don't know why. I'm doing this like in this example: link for example. I was looking for solution but still I don't know what I'm doing wrong. Am I missing something in my code?

Simulation: link for my sim

I have 2 TrackballControls.js coz when I was looking for solution one person has written that in her case helped add script like url, not like local file: link.

Code:

controls = new THREE.TrackballControls( camera );

controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

controls.keys = [ 65, 83, 68 ];

controls.addEventListener( 'change', render );`

Next update in function animate:

function animate() { controls.update(); }

Next function animate is called in loader:

loader.load('./models/my_pc/models/my_pc.dae', function (collada) {

model = collada.scene;
model.scale.x = model.scale.y = model.scale.z = 0.0125;
model.position.x = -2;
model.position.y = 0;
model.position.z = 2;
model.rotation.x = -1.570796327;
model.rotation.y = 0;
model.rotation.z = 0;

init();
animate();
}

I have a problem with TrackballControls. It doesn't work and pletly I don't know why. I'm doing this like in this example: link for example. I was looking for solution but still I don't know what I'm doing wrong. Am I missing something in my code?

Simulation: link for my sim

I have 2 TrackballControls.js coz when I was looking for solution one person has written that in her case helped add script like url, not like local file: link.

Code:

controls = new THREE.TrackballControls( camera );

controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

controls.keys = [ 65, 83, 68 ];

controls.addEventListener( 'change', render );`

Next update in function animate:

function animate() { controls.update(); }

Next function animate is called in loader:

loader.load('./models/my_pc/models/my_pc.dae', function (collada) {

model = collada.scene;
model.scale.x = model.scale.y = model.scale.z = 0.0125;
model.position.x = -2;
model.position.y = 0;
model.position.z = 2;
model.rotation.x = -1.570796327;
model.rotation.y = 0;
model.rotation.z = 0;

init();
animate();
}

• javascript
• three.js
• webgl

• 1 It doesn't work is the most useless description you could give about your issue. Can you be more specific? – Gabriele Petronella Commented Aug 21, 2013 at 1:16
• Looks like you are using Revision 58. Have you tried using the newest trackball.js from Revision 60? There have been a few fixes as of late that could help you in your case. Also it looks like you have 2 TrackballControl-Scripts loaded in your code? Can you show the code where you are implementing TrackballControls? – GuyGood Commented Aug 21, 2013 at 7:49
• I have 2 TrackballControls.js coz when I was looking for solution one person has written that in her case helped add script like url, not like local file: link. – Beacze Commented Aug 21, 2013 at 10:12

1 Answer 1

Good day, it appears that your calling your animate function once and only once upon load. You need to do your init, then have an animate function with a requestAnimationFrame shim like so:

function animate() {
    requestAnimationFrame( animate );           
    controls.update();    
    render();
}

That should at least get you moving. This will ensure that every frame your controls are being updated (ie. mouse movement will be translated to camera position/rotation) and you are then re-rendering the scene with the new relevant information. FYI, you'll also need to write a render function which at the very least does this:

function render() {
    renderer.render(scene, camera);
}