移动相机以面对所选对象3js

Question

所以这是我第一次尝试学习如何用3 js和补间js创建web。当用户单击对象1时，我会创建多个对象，它将显示其内容。但是当我试图移动相机面向物体（缩放并聚焦在所选对象上）时，相机会跳到画布顶部并扫描所有画布。

(function() {
    var DZOOM, OX, OY, aspectt, camera, height, light, loader, render, renderer, scene, view, width, raycaster, intersects, INTERSECTED;
    var objects = [],
    uuids   = [], 
    names   = [];

    var container = document.getElementById( 'main-content' );
    var windowHalfX = container.offsetWidth / 2;
    var windowHalfY = container.offsetHeight / 2;
    width  = container.offsetWidth;
    height = container.offsetHeight;


    var raycaster = new THREE.Raycaster();

    var lookAtVector = new THREE.Vector3(0,0,0);

    var mouse = new THREE.Vector2(),
    INTERSECTED;
    document.body.appendChild( container );

    aspectt = width / height;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( '#fff' );

    camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 1, 1000);
    renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });

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

    function onWindowResize() {
        windowHalfX = container.offsetWidth / 2;
        windowHalfY = container.offsetHeight / 2;
        camera.aspect = container.offsetWidth / container.offsetHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( container.offsetWidth, container.offsetHeight );
    }


    renderer.setSize(width, height);
    container.appendChild( renderer.domElement );


    light = new THREE.DirectionalLight(0xffffff, 1);

    light.position.set(15, -5, 15);

    scene.add(light);



    OX = -35;

    OY = -5;

    if (!deviceIsMobile()) {
        camera.position.set(OX + 60, OY - 5, 35);
    }
    else{
        camera.position.set(OX + 30, OY - 10, 20);
    }
    camera.up = new THREE.Vector3(0, 0, 1);

    camera.lookAt(new THREE.Vector3(OX, OY, 0));

    container.addEventListener( 'mousedown', onDocumentMouseDown, false );
    container.addEventListener( 'touchstart', onDocumentTouchStart, false );
    container.addEventListener( 'touchmove', onDocumentTouchMove, false );

    function displayCaptionOnClick( event ) {

        event.preventDefault();

        mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
        raycaster.setFromCamera( mouse, camera );
        intersects = raycaster.intersectObjects( objects[0].children, true );

        if ( intersects.length > 0 ) {
            for( var i = 0; i < intersects.length; i++ ) {
               displayCaption(intersects[0].object.uuid);
            }               

        }

    }


    function redOnHover( event ) {

        event.preventDefault();

        mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

        raycaster.setFromCamera( mouse, camera );
        intersects = raycaster.intersectObjects( objects[0].children, true );
        if ( intersects.length > 0 ) {
                if ( INTERSECTED != intersects[ 0 ].object ) {

                    if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                    INTERSECTED.material.emissive.setHex( 0xff0000 ); 
                }

        } else {

            if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

            INTERSECTED = null;

        }

    }

    function toObj(obj) {
        console.log(obj);
        var normalMatrix = new THREE.Matrix3().getNormalMatrix( obj.matrixWorld );
        var worldNormal = new THREE.Vector3(0,0,1).applyMatrix3( normalMatrix ).normalize();
            console.log(worldNormal);
        var camPosition = new THREE.Vector3().copy(obj.position).add(worldNormal.multiplyScalar(100));

        var rotateTween = new TWEEN.Tween(lookAtVector)
            .to({
                x: obj.position.x,
                y: obj.position.y,
                z: obj.position.z
            }, 4000)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .onUpdate(function(){
                camera.lookAt(lookAtVector);
            })
            .onComplete(function(){
                lookAtVector.copy(obj.position);
            })
            .start();

            var goTween = new TWEEN.Tween(camera.position)
            .to(camPosition, 4000)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .start();
    }

    function displayCaption( uuid ) {

        var curObj = uuids.indexOf(uuid);
        console.log(curObj);
        if(curObj<=7){
            $('.single-page').hide();
            var crnt= $('#'+curObj);
            crnt.show();
            $('#sidebar').animate({right:0});
            redOnHover( event );
        }

    }


    var targetRotation = 0;
    var targetRotationOnMouseDown = 0;

    var mouseX = 0;
    var mouseXOnMouseDown = 0;


    function animate() {

        requestAnimationFrame(animate);

        render();
    }

    render = function() {
        TWEEN.update();

        camera.updateMatrixWorld();

        return renderer.render(scene, camera);
    };

    function onDocumentMouseDown( event ) {
        event.preventDefault();
        container.addEventListener( 'mousemove', onDocumentMouseMove, false );
        container.addEventListener( 'mouseup', onDocumentMouseUp, false );
        container.addEventListener( 'mouseout', onDocumentMouseOut, false );
        mouseXOnMouseDown = event.clientX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;

        checkClick(event);

        displayCaptionOnClick( event );
        toObj(INTERSECTED);
    }    

    var myObj;
    loader = new THREE.ObjectLoader();
    loader.load("js/try.dae.json",function ( obj ) {


        if (!deviceIsMobile()) {
            obj.scale.x = obj.scale.y = obj.scale.z = 2.3;
        }
        else{
            obj.scale.x = obj.scale.y = obj.scale.z = 0.8;
        }
        // FIXED
        obj.position.x = -15;
        obj.position.y = -5;
        obj.position.z = 24;
        obj.rotation.y = 0.15;
        obj.rotation.z = 0.6;
        myObj = obj;
        scene.add( obj );
        objects.push(obj);
        console.log(objects);

        var exclude = ["Cylinder_007", "Cube_005", "Cube_004", "Cylinder_006", "Cylinder_005", "Cylinder_004", "Cylinder_003", "Cylinder_002", "Plane_004", "Plane_003", "Plane_002", "Cube_003", "Cube_002", "Cube", "Cube_001", "Cylinder_001", "Plane_001", "Cylinder", "Torus_001", "Text"];
        for( var i = 0; i < objects[0].children.length; i++ ) {
           if ( exclude.indexOf(objects[0].children[i].name) < 0  ) {
                uuids.push(objects[0].children[i].children[0].uuid);
           }
        }
        for( var i = 0; i < objects[0].children.length; i++ ) {
            uuids.push(objects[0].children[i].children[0].uuid);
        }

        return render();
    });
    animate();
}).call(this);