Threejs орбитальное управление не работает правильно на сенсорных устройствах - PullRequest
Новая
       11

Threejs орбитальное управление не работает правильно на сенсорных устройствах

0 голосов
/ 13 сентября 2018

У меня есть сцена trijs с загруженным объектом и камерой, которая должна вращаться вокруг нее, когда пользователь тащит по экрану. Это хорошо работает на компьютере, но на сенсорных устройствах нет. Если он повернут без масштабирования (щепотка), он работает хорошо, если он увеличен, а затем повернут, он не работает хорошо. Объект по очереди становится увеличенным и уменьшенным, я не понимаю в чем проблема.

1 Ответ

0 голосов
/ 14 сентября 2018 
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();
}

}

...