0

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

} );
gman
  • 100,619
  • 31
  • 269
  • 393
Pourya Behzadpour
  • 13
  • 4
  • 1
    Why are you using `OrbitControls` if you disable zooming, panning and orbiting? Consider to remove `OrbitControls`, use `camera.lookAt()` to orient your camera and try it again. – Mugen87 Apr 08 '20 at 09:18
  • @Mugen87 I've disabled the orbit controls to stick the object with the scroll bar orienting. I need to when user scrolling the windows then animation play not automatically.this is why when user scrolling the window the camera can change the view to my object. – Pourya Behzadpour Apr 11 '20 at 07:03

2 Answers2

0

The scroll event works differently than you would expect on mobile. javascript scroll event for iPhone/iPad?

Ethan Hermsey
  • 930
  • 4
  • 11
  • Well I know that is difference between iPhone and iPad scroll event thanks for reply me back,but the problem is I want to set canvas scroll bar to my main window scroll bar. – Pourya Behzadpour Apr 11 '20 at 07:22
  • hmm.. So you want to capture the scroll event in the canvas and then pass it through to the window, so when you scroll on the canvas the whole page scrolls? Am i getting this right? – Ethan Hermsey Apr 11 '20 at 19:42
  • absolutely I want to scroll the canvas through the window scroll. – Pourya Behzadpour Apr 13 '20 at 06:36
  • That's the opposite of what i just said. What happens if you, inside the scroll event, do document.body.scrollTop += event.deltaY, or something? – Ethan Hermsey Apr 13 '20 at 11:17
  • Yup, I did that but nothing response from the canvas...and still it's static and won't work. – Pourya Behzadpour Apr 14 '20 at 12:42
  • Ah, it's supposed to be document.documentElement.scrollTop. https://www.w3schools.com/jsref/prop_element_scrolltop.asp, See the third example – Ethan Hermsey Apr 14 '20 at 15:56
  • It won't work at all , canvas scroller is working on desktop size but in mobile version one it behave like a static element and the scroller won't scroll at all. – Pourya Behzadpour Apr 15 '20 at 12:58
  • I'm sorry. I can't help with this. I can't image how this doesn't work and without an example or iphone im stuck myself too. – Ethan Hermsey May 09 '20 at 09:48
  • 1
    Well i found a way for it.My overflow was hidden because of some reason and I knew it,but I didn't have a way to delete the overflow hidden.I used the scroll magic library to scroll the canvas behind the scene and with the window scroller now I can scroll it easily ... – Pourya Behzadpour May 10 '20 at 07:04
0

You can create a transparent upper div to prevent canvas from getting touched.

<div class="relative h-screen">
  <div class="fixed top-0 left-0 w-screen h-screen z-40"></div>
  <canvas></canvas>
</div>
mehrdad noori
  • 1