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

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked Aug 21, 2013 at 0:56 BeaczeBeacze 53433 gold badges99 silver badges2828 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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