Question

我尝试将最新的OrbitControls.js添加到我的场景和轨道接缝中以便正常工作。但是，当我使用鼠标中键或滚轮进行缩放时，轴接缝将关闭，并且不再正确旋转。 Pan（或strafe）似乎在我的场景中也无法正常工作。

在该示例中，http://threejs.org/examples/#misc_controls_orbit鼠标右键将摄像机平行移动到场景中，在我的场景中，它只是与鼠标左键一样。你可以看到我的行为是不正常的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 1

删除camera.lookAt(scene.position);行

Answer 2

在OrbitControls.js第219行找到onMouseDown

并评论此行

        /*if ( event.button === 2 )
            state = STATE.PAN;*/

THREE.js：OrbitControls平移和缩放问题

2 个答案: