In ThreeJS (JavaScript/WebGL) come è possibile creare un'immagine di sfondo statica che fa parte della scena ma viene ridimensionata per adattarsi esattamente all'intera finestra del browser interno? Funziona quando uso CSS, ma l'immagine di sfondo non verrà visualizzata quando crei uno "screenshot" tramite renderer.domElement.toDataURL ('image/png'), che voglio. Grazie!ThreeJS: creazione di un'immagine di sfondo che si adatta perfettamente alla finestra?
È possibile utilizzare una scena di sfondo separata per eseguire il rendering dell'immagine di sfondo.
var bg = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({map: backgroundTexture})
);
// The bg plane shouldn't care about the z-buffer.
bg.material.depthTest = false;
bg.material.depthWrite = false;
var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
bgScene.add(bgCam);
bgScene.add(bg);
Quindi, nel ciclo di rendering, disegnare bgScene prima della scena reale.
renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render(scene, cam);
Grazie mille ci proverò! –
non funziona, sto usando 'OBJMTLLode'r, senza che questo funzioni correttamente, cosa si deve fare per' OBJMTLLoder' e 'OBJLoder' ??? –
sì, finalmente ha funzionato .... –
non era chiaro per me, se si sta cercando di fare un visualizzatore di panorami o qualcosa del genere ...
Se quello era il tuo obiettivo, ecco una risposta che ho dato a risolvere il problema della l'inserimento di un'immagine equirettangolare alla sfera reso (che può essere controllato da mouse e/o deviceOrientation [accelerometro negli smartphone]):
Intende fotocamera essere statico nella scena, o sarà in grado di muoversi ? Hai pensato di provare a creare uno skybox? –
Quale tipo di renderer usi? –
Cory, al momento ho una fotocamera statica. Sto mettendo una scatola con texture sul retro della scena, ma non conosco le dimensioni per dare alla scatola esattamente il riempimento dello schermo con la sua texture. Danny, sto usando WebGLRenderer. Grazie! –