Как прокрутить холст на сенсорном устройстве? (Три. js) - PullRequest
Новая
       10

Как прокрутить холст на сенсорном устройстве? (Три. js)

0 голосов
/ 08 апреля 2020

У меня вопрос, который я искал по этому поводу, но ничего не найдено.

Не могли бы вы объяснить, как я могу прокрутить холст на мобильных телефонах? Я имею в виду, что я делаю веб-сайт, и в одном из моих разделов есть тег canvas, в котором я сделал анимацию с тремя. js, но прокрутка в canvas не работает на сенсорном экране.

вот код ниже о моей анимации. 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
var cameraPosition = camera;

cameraPosition.position.set(100,0, 120);



var renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.getElementById("viewport")
});
renderer.setClearColor(0xffffff);
var canvas = renderer.domElement
render();

function render() {
    if (resize(renderer)) {
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

function resize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
        renderer.setSize(width, height, false);
    }
    return needResize;
}
camera.lookAt(100,0,-120);

window.addEventListener( 'resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight )
})

var controls = new THREE.OrbitControls(camera, renderer.domElement);
// to disable zoom
controls.enableZoom = false;

// to disable rotation
controls.enableRotate = false;

// to disable pan
controls.enablePan = false;


var spotLight = new THREE.SpotLight( 0xffffbb );
spotLight.position.set( 10, 10, 150 );
scene.add( spotLight );


var loader = new THREE.GLTFLoader();

loader.load( './iphonex/out.glb', function ( gltf ) {

    var object = gltf.scene;
    object.position.set(0,0, 0);


    scene.add( gltf.scene );
    animation();

    function animation() {

        renderer.render(scene,camera);
        requestAnimationFrame(function () {
            animation();
        })
    }
    function updateCamera() {
        object.rotation.y = 0.1 + window.scrollX * Math.PI / 360;

    }

    window.addEventListener("scroll", updateCamera);

    // controls.noRotate = true;
    // controls.noZoom = true;
    // window.addEventListener('scroll', onscroll
    // , false);
    // window.addEventListener('wheel', onscroll, false);    var animate = function () {
    //     requestAnimationFrame(animate);
    //     renderer.render(scene, camera);
    // }

}, undefined, function ( error ) {

    console.error( error );

} );

1 Ответ

0 голосов
/ 08 апреля 2020

Событие прокрутки работает иначе, чем вы ожидаете на мобильном телефоне. javascript событие прокрутки для iPhone / iPad?

...