THREE.js: OrbitControls pan and zoom issue

StackOverflow https://stackoverflow.com/questions/20888248

  •  23-09-2022
  •  | 
  •  

Domanda

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>

È stato utile?

Soluzione

remove the camera.lookAt(scene.position); line

Altri suggerimenti

In OrbitControls.js line 219 find onMouseDown

and comment this lines

        /*if ( event.button === 2 )
            state = STATE.PAN;*/
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top