THREE.js: OrbitControls pan and zoom issue
I tried adding the latest OrbitControls.js to my scene and orbit seams to work ok. However, when I zoom using the middle mouse button or scroll wheel the axis seams to be off and it no longer rotates correctly. Pan (or strafe) does not seem to work correctly in my scene either.
In the example, http://threejs.org/examples/#misc_controls_orbit right mouse button moves the camera parallel to the scene and in my scene it just orbits the same as left mouse button. You can see how mine is misbehaving http://www.xrez.com/tufa_test/.
<!DOCTYPE html>
<html lang="en">
<head>
<title>obj tester</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
</style>
</head>
<body>
<script src="cam.js"></script>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var camera, scene, controls, renderer;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var meshes = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
camera.position.x = 400;
camera.position.y = 200;
camera.position.z = 400;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambient);
// var directionalLight = new THREE.DirectionalLight(0x000000);
//directionalLight.position.set(0, 70, 100).normalize();
//scene.add(directionalLight);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
container.appendChild(webglRenderer.domElement);
var loader = new THREE.JSONLoader(),
callbackKey = function(geometry) {createScene(geometry, 0, 0, 0, 15, "twe.jpg")};
loader.load("tufaWallEarly02_v3.js", callbackKey);
window.addEventListener('resize', onWindowResize, false);
}
function createScene(geometry, x, y, z, scale, tmap) {
zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)}));
zmesh.position.set(x, y, z);
zmesh.scale.set(scale, scale, scale);
meshes.push(zmesh);
scene.add(zmesh);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
for(var i = 0; i < meshes.length; i++){
meshes[i].rotation.y += .001;
}
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
</script>
</body>
Answer
remove the camera.lookAt(scene.position); line