Visualizza la scena a una risoluzione più bassa in three.js

Question

Sto cercando un modo per visualizzare una vista three.js a metà risoluzione (o doppia dimensione a seconda di come la si guarda).

Three.js documentation afferma che

[Y] ou può anche fornire valori setSize più piccoli, come window.innerWidth/2 e window.innerHeight/2, per metà della risoluzione. Questo non significa che il gioco riempirà solo metà della finestra, ma piuttosto un po 'sfocato e ingrandito.

Il risultato effettivo, tuttavia, è che il viewport è sclamato a metà dimensione.

Questo jsfiddle mostra il comportamento non previsto.

Guardando il API c'è un setSize e un metodo setViewport, ma nessuno dei due mi permette di avere una finestra in scala.

C'è un question and answer qui su SO che dà un modo di farlo con i CSS, ma sto cercando un modo correlato non CSS se possibile.

Answer 1

La risposta di 2pha è corretta ed è stata implementata in threejs con il metodo setPixelRatio(), in modo da poter scrivere anche meno righe. L'interesse principale con questo metodo è che è coerente con la proprietà della finestra window.devicePixelRatio come richiamato in un commento.

Questa è una caratteristica importante da aggiungere al tuo boilerplate se ti interessano i dispositivi mobili/tablet. Nel tuo header HTML dovresti avere questo meta tag: <meta name='viewport' content='width=device-width'/>.

• Se non si dispone di questo tag tuoi innerWidth e innerHeight valori saranno più grande di quanto le vostre esigenze di dispositivi, la creazione di un framebuffer più grande e che può ridurre il framerate.
• Ma a questo contrario se si dispone di questo tag, senza impostare il rapporto pixel, il framebuffer sarà troppo piccolo ... CSS pixel vs screen pixelstory.

è per questo che si aggiunge questa linea in javascript

renderer.setPixelRatio(window.devicePixelRatio); 

Ha bisogno del setSize da chiamare dopo:

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

Answer 2

Non sono sicuro se c'è un modo migliore ma è possibile ridimensionare l'elemento dom subito dopo che è stato aggiunto.

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth/2, window.innerHeight/2); 
document.body.appendChild(renderer.domElement); 
renderer.domElement.style.width = renderer.domElement.width * 2 + 'px'; 
renderer.domElement.style.height = renderer.domElement.height * 2 + 'px'; 

https://jsfiddle.net/x4p3bcua/4/

anche se questo è ancora facendo tramite CSS in un giro su strada.