Resizing, taille d'écran et PixelRatio. Pour faire en sorte que l'écran prenne toute la taille de l'écran, on utilise du js natif avec un window.innerWidth ou Height à la place d'une taille fixe dans notre tableau des tailles. Cela ne suffit pas car il faut détecter le resize de l'écran et d'actualiser ces tailles. Donc window.addEventListener('resize' () => { sizes.width = window.innerWidth (pareil pour la height). En plus de ça, il faut actualiser chaque élément qui utilise de près ou de loin ces paramètres. Donc la camera avec camera.aspect = sizes.width / sizes.height (le paramètre d'aspect ratio qu'on à utilisé précédemment). Après, c'est autour du renderer avec renderer.setSize(sizes.width, sizes.height) (pas besoin de diviser ici étant donné que la fonction est faite pour ça donc y'a deux args). Ensuite il faut updateProjectionMatrix() sur la camera pour à chaque resize, update les matrices parce que sous le capot, ça fonctionne comme ça. J'avais déjà remarqué mais mon carré n'avait pas des bords parfaits, comme de l'alliasing. En fait c'est parce mon écran utilise un pixel ratio de 2. Donc en gros chaque pixel est divisé en 4 pixels ce qui est très agréable visuellement mais pour la situation, il existe une fonction en three qui est renderer.setPixelRatio(window.devicePixelRatio). C'est tout simple, plus ton pixel ratio est élevé, plus ton GPU fera de render pour lisser ce dernier. Il faut le limiter parce qu'avec un grand pixel ratio ça rame beaucoup trop (notamment sur les mobiles qui ont en plus des performances moins bonnes) donc on utilise un Math.min }). Enfin pour ce qui est du grand écran, on peut par exemple utilise un event listener dblclick qui étonnament existe et effectuer un canvas.requestFullScreen() en vérifiant avec un if !window.fullscreenElement et un document.exitFullscreen(). J'ai du mal à me souvenir de laquelle fait quoi mais ça viendra. Faut aussi prendre le reflexe de if les versions webkit