Wie erstellt man eine Three.js Fullscreen App mit einem Web Form/Text Overlay responsive?

Question

(Um klar zu sein, ich bin zu fragen, wie meine app ansprechbar, nicht zu fragen, wie man es machen)

So habe ich gearbeitet, auf einer Web-Anwendung, die Three.js verwendet eine Szene zu machen, das unter Verwendung von Volles Fenster. Ich möchte ein Konfigurations-Overlay erstellen, das angezeigt und ausgeblendet wird, wenn Sie auf eine Einstellungsschaltfläche klicken. Die Idee ist, dass diese Überlagerung einige Text- und einige HTML-Formularelemente enthalten wird.

Ich weiß, wie man das Overlay macht, aber mein Kampf ist, wie es richtig auf dem Handy angezeigt wird. Im Allgemeinen, wenn Erstellen einer Webseite verantwortungs auf mobilen verhalten scheint es die übliche Art und Weise, darüber zu gehen, indem die Darstellungseinstellung kleiner auf, mobil zu sein, durch so etwas wie folgt aus:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Es ist mein Verständnis, dass dies die Seite rendert indem man vorgibt, dass es nur etwa 320 Pixel breit ist, selbst wenn das mobile Gerät in Wirklichkeit etwa einen 900 Pixel breiten Bildschirm hat.

Das Problem mit dieser Lösung ist, dass, wenn ich meine Fullscreen Three.js Szene rendern, verwendet es die 320 Pixel breit, und ich am Ende mit einem unscharfen Bild.

Ich hätte gerne eine Möglichkeit, das Ansichtsfenster für mein Overlay/Config-Formular auf einem mobilen Gerät auf eine kleinere Größe zu bringen und trotzdem die volle Definitionsqualität meines Renderings meiner Three.js-Szene beizubehalten.

Answer 1

Laut dem Kommentar, Ihr Problem scheint Pixel-Verhältnis auf High-dpi-Bildschirmen zu sein.
Verwendung so etwas wie:

renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight);