How to scroll the canvas on touch device?

Questions
,
1

Hi,
I’ve a question that I searched about it and nothing found.

could you please explain how to I can scroll the canvas on mobile phones?
I mean that I’m making a website and one of my section has canvas tag that i made an animation with three.js but scrolling in canvas isn’t working on touch screen.

here is the code below about my animation .

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

} );
3

Bit late here, but you can remove orbit controls if you don’t use them. Or controls.enabled = false.

4

I had such a problem. I set this CSS to the canvas which three.js is using.

canvas{
 overflow : scroll;
}

That solved my problem. Hope it would be helpful. Thank you.

1 Like