How to get Fullscreen 1 to 1 background on Mobile

Questions
1

I’m trying to get touchevents working for my mobile game in threejs. But the controls dont work because it keeps scrolling! even though I have event.preventdefault . I would debug it in Chrome DevTools but it actually works in DevTools, but on my Pixel 3a it doesnt work

GitHub Link to Project: https://github.com/spikethea/3d-platformer

Heres a link to my game
http://quincegorerodney.panel.uwe.ac.uk/secret%20levels/

i made a quick YouTube video too to show me attempting to use it https://www.youtube.com/watch?v=hdCeN8F7uW4

this is the render setup code

//Renderer
const canvas = document.querySelector(‘#c’);

renderer = new THREE.WebGLRenderer( { canvas, antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth/2, window.innerHeight/2, false );
document.body.appendChild( renderer.domElement );

renderer.gammaFactor = 2.2;//Correcting the scenes Gamma Values
renderer.gammaFactor = true;
renderer.outputEncoding = THREE.GammaEncoding;

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap

//Camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 20;
camera.position.y = 15;
//controls.update() must be called after any manual changes to the camera's transform
1 Like
2

I don’t have a Pixel around to test on, but you can try using CSS to limit the viewport:

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
1 Like
3

Ive already tried that unfortunately :confused: i dont think that it is specifically a pixel 3a problem. it should be replicated with mobile devices

4

It Seems to have fixed itself. I tmayb have been a Z-Index issue anyway thanks

5

So I tried every trick under the sun when confronted by this, but Safari block all attempts. I was trying to make a dependency free plugin (not threejs related), eventually I figured I’d look at some npm packages out there. This one right here works REALLY WELL, it’s the only thing that’s going to fix this issue for you on Safari

3 Likes
6

that is great, thank you