在带有轨道控制器的三个js中使用Tween函数时，我注意到当我尝试从对象的背面居中放置对象时，补间发生了异常。

您可以使用小提琴链接尝试一下，在该位置将对象旋转到后视图，然后单击“适合屏幕”，对象将离开屏幕并与中心对齐。

有什么方法可以克服它，我想在物体平移并旋转到任何方向时显示其正视图。

请帮我解决这个问题，以使我更好地进行澄清。

以下是与TweenLite https://jsfiddle.net/6r9cjfmz/

以下是与Tween http://jsfiddle.net/Komsomol/r4nctoxy/

        console.clear();

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.01,700);
        camera.position.set(0,60);

        scene.add(camera);

        var renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        TweenLite.ticker.addEventListener('tick',render);

        var object3d = new THREE.DirectionalLight('white',1);
        object3d.position.set(2.6,1,3);
        object3d.name = 'Back light';
        scene.add(object3d);

        var material = new THREE.MeshLambertMaterial({ side: THREE.DoubleSide,color: '#F00' });

        var object = new THREE.Mesh(new THREE.BoxGeometry(20,20,20),material);
        object.position.set(-10,0);
        object.name = 'Object 1';
        scene.add(object);

        var controls = new THREE.OrbitControls(camera,renderer.domElement);

        controls.rotateSpeed = 3.6;
        controls.zoomSpeed = 0.8;
        controls.panSpeed = 1;

        controls.nozoom = false;
        controls.noPan = false;

        controls.enabled = true;
       // TweenLite.ticker.addEventListener(controls.update);

        var timeline = new TimelineLite({
            onStart: function () {
                TweenLite.ticker.removeEventListener("tick",controls.update);
                controls.enabled = false;
            },onComplete: function () {
                TweenLite.ticker.addEventListener("tick",controls.update);
                controls.position0.copy(camera.position);
                controls.reset();
                controls.enabled = true;
            }
        });
        easing = '';

        camera.reset = function () {

            var pos = { x: 0,y: 0 };
            var distance = 60;
            var speed = 1;

            if (camera.parent !== scene) {
                var pos = camera.position.clone();      
                camera.parent.localToWorld(camera.position);
                scene.add(camera);
            }

            timeline.clear();
            timeline.to(camera.position,speed,{
                x: pos.x,y: pos.y,z: distance,ease: easing
            },0);
            timeline.to(camera.rotation,{ x: 0,y: 0,z: 0,ease: easing },0);


        };



        var startX,startY,$target = $(renderer.domElement),selected;

        function mouseUp(e) {

        }

        function render() {
            renderer.render(scene,camera);
        }
        $(document).ready(function () {
            $(".button").click(function (e) {
                e = e.originalEvent || e;
                e.preventDefault();
                console.log(e)
                console.log(e.touches)

                var pos = { x: 0,z: 0 };
                var distance = 90;
                var speed = 1;

                if (camera.parent !== scene) {
                    var pos = camera.position.clone();
                    camera.parent.localToWorld(camera.position);
                    scene.add(camera);
                }

                timeline.clear();
                timeline.to(camera.position,{
                    x: pos.x,ease: easing
                },0);
                timeline.to(camera.rotation,0);
                // }
            });
        });

        function mouseDown(e) {
            e = e.originalEvent || e;
            startX = (e.touches ? e.touches[0].clientX : e.clientX);
            startY = (e.touches ? e.touches[0].clientY : e.clientY);
        }


        $target.on('mousedown touchend',mouseDown);