Question

在下面的示例中，如果camera.position设置为（0，距离，0），其中距离是某个正数，则轨迹球控件将不再正常工作。相反，只有按下鼠标左键并移动鼠标才会进行缩放。只需按“ALIGN Y”按钮即可看到此信息。按“ALIGN X”或“ALIGN Z”按钮时未观察到该行为。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>TrackballControls test</title>
            <meta charset="utf-8">
        </head>

        <body>

            <script src='js/libs/inflate.min.js'></script>
            <script src="js/three.js"></script>

            <script src="js/controls/TrackballControls.js"></script>

            <div>
            <button onclick="alignX()" >ALIGN X</button>
            <button onclick="alignY()" >ALIGN Y</button>
            <button onclick="alignZ()" >ALIGN Z</button>
            </div>

            <script>

                var container, camera, controls, scene, renderer, distance;

                init();
                animate();

                function alignX() {controls.reset(); camera.position.set(distance,0,0);}
                function alignY() {controls.reset(); camera.position.set(0,distance,0);}
                function alignZ() {controls.reset(); camera.position.set(0,0,distance);}

                function init() {

                    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1000 );
                    distance = 2.2;
                    camera.position.set(0,0,distance);

                    controls = new THREE.TrackballControls( camera );

                    controls.rotateSpeed = 5.0;
                    controls.zoomSpeed = 5;
                    controls.panSpeed = 2;

                    controls.noZoom = false;
                    controls.noPan = false;

                    controls.staticMoving = true;
                    controls.dynamicDampingFactor = 0.3;

                    scene = new THREE.Scene();

                    // light

                    var ambientLight = new THREE.AmbientLight(0x222222);
                    camera.add( ambientLight );

                    var light = new THREE.PointLight();
            light.position.set( 2, 2, 2 );
            camera.add( light );

                    scene.add( camera );

                    // objects

                    var material = new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors });

                    var ico = new THREE.IcosahedronGeometry( 0.8, 0 );
                    for ( var i = 0; i < ico.faces.length; i ++ ) {
                        var face = ico.faces[ i ];
                        face.color.setHex( Math.random() * 0xffffff );
                    }
                    var bert = new THREE.Mesh( ico, material );
                    scene.add( bert )

                    // renderer

                    renderer = new THREE.WebGLRenderer( { antialias: false } );
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );

                    container = document.createElement( 'div' );
                    document.body.appendChild( container );
                    container.appendChild( renderer.domElement );

                    window.addEventListener( 'resize', onWindowResize, false );

                }

                function onWindowResize() {

                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize( window.innerWidth, window.innerHeight );

                    controls.handleResize();

                }

                function animate() {

                    requestAnimationFrame( animate );

                    controls.update();
                    renderer.render( scene, camera );

                }

            </script>

        </body>
    </html>

如果camera.position在y轴上，则THREE.js TrackballControls不起作用

0 个答案: