Orbitcontrols cannot zoom //encountered an unknown camera type - dolly/zoom disabled

Questions
1

Hi,
I’m starting to use three.js. I use the aviator tuto here => https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/

I have follow also this jsfiddle (this is the desired behaviour) http://jsfiddle.net/Stemkoski/ddbTy/

My problem : orbitcontrols works but i cannot zoom and de-zoom. Below i put my snippets.
Can you help me ?

function createScene() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
scene = new THREE.Scene();
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 50;
nearPlane = .1;
farPlane = 10000;
camera = new THREE.PerspectiveCamera(
	fieldOfView,
	aspectRatio,
	nearPlane,
	farPlane
);
camera.position.z = 200;
camera.lookAt(scene.position)

renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMap.enabled = true;
container = document.getElementById('world');
container.appendChild(renderer.domElement);
window.addEventListener('resize', handleWindowResize, false);
scene.add( camera ); // required, since adding light as child of camera
controls = new THREE.OrbitControls(camera,renderer.domElement);
}

// in my loop function 
function loop(){
controls.update()
requestAnimationFrame(loop);
renderer.render(scene, camera);
}

here i success with this jsfiddle but i cannot moving around my target. It jump always out my scene…
http://jsfiddle.net/f8ycbe12/

2

You have missed to apply renderer.domElement to the constructor of OrbitControls which is necessary in your use case (you have an absolute positioned div beneath your canvas). I’ve updated the fiddle with the fix.

http://jsfiddle.net/f8ycbe12/3/

BTW: I highly recommend to use the latest version of three.js since you already use the latest version of OrbitControls. The versions of the library core and further modules should always match otherwise you might be faced with evil error situations.

2 Likes
3

Thanks for your explanation. Have a good day