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();
}

}