Threejs轨道控制在触摸设备上无法正常工作

Question

我有一个加载了对象的threejs场景和一个必须围绕它旋转的摄像头，当用户拖动屏幕时。这在计算机中运行良好，但在触摸设备上没有。如果它没有变焦（捏合），它运行良好，如果它被缩放然后转动它不能正常工作。当物体变得变大和缩小时，我不明白问题是什么。

Answer 1

init();
animate();

function init() {

    w_container = $obj3D.width();
    h_container = $obj3D.height();

    camera = new THREE.PerspectiveCamera(45, w_container / h_container, 1, 2000);
    camera.position.z = zoom_value;

    scene = new THREE.Scene();

    controls = new THREE.OrbitControls(camera, $obj3D[0]);
    controls.enableDamping = true;
    controls.dampingFactor = 0.08;
    controls.rotateSpeed = 0.03;
    controls.enableZoom = true;
    controls.zoomSpeed = 0.5;
    controls.minDistance = 30;  
    controls.maxDistance = 230;
    controls.update();

    var ambientLight = new THREE.AmbientLight(0xffffff, 1.4);
    scene.add(ambientLight);

    var pointLight = new THREE.PointLight(0x5a5a5a, .7);
    pointLight.power = .6;
    pointLight.position.set(50, 50, 50);
    camera.add(pointLight);

    scene.add(camera);

    THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

    new THREE.MTLLoader()
            .setPath('models/packagin/')
            .setMaterialOptions({side: THREE.DoubleSide})
            .load('oggetto.mtl', function (materials) {

                materials.preload();

                new THREE.OBJLoader()
                        .setMaterials(materials)
                        .setPath('models/packagin/')
                        .load('oggetto.obj', function (object) {

                            object.traverse(function (child) {

                                if (child instanceof THREE.Mesh) {
                                }
                            });

                            object.position.y = -28;

                            OBJ = object;

                            scene.add(object);

                        }, onProgress, onError);

            });

    renderer = new THREE.WebGLRenderer();

    renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(w_container, h_container);
    $obj3D[0].appendChild(renderer.domElement);
    window.addEventListener('resize', canvasResize, false);
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    render();
}

}