TrackballControls in three.js

Question

I have a problem with TrackballControls. It doesn't work and completly 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();
}

Solution

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