ThreeJS: ¿Crear una imagen de fondo que se ajuste exactamente a la ventana?

En ThreeJS (JavaScript/WebGL) ¿cómo puedo crear una imagen de fondo estática que sea parte de la escena pero que cambie el tamaño para que se ajuste a la ventana interna completa del navegador exactamente? Funciona cuando uso CSS pero luego la imagen de fondo no se muestra al hacer una "captura de pantalla" a través de renderer.domElement.toDataURL ('image/png'), que quiero. ¡Gracias!ThreeJS: ¿Crear una imagen de fondo que se ajuste exactamente a la ventana?

Fuente

2012-06-24 Philipp Lenssen

va a la cámara ser estática en la escena, o va a ser capaz de moverse ? ¿Has pensado en intentar hacer un palco? –

¿Qué tipo de renderizador usas? –

Cory, actualmente tengo una cámara estática. Estoy colocando una caja texturizada en la parte posterior de la escena, pero no sé qué dimensiones darle a la caja para que llene exactamente la pantalla con su textura. Danny, estoy usando WebGLRenderer. ¡Gracias! –

Puede usar una escena de fondo separada para representar la imagen de fondo.

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);

Luego, en su ciclo de renderizado, dibuje bgScene antes de su escena real.

renderer.autoClear = false; 
renderer.clear(); 
renderer.render(bgScene, bgCam); 
renderer.render(scene, cam);

Fuente

2012-07-04 00:41:00

¡Muchas gracias intentaré esto! –

no funciona para mí, estoy usando 'OBJMTLLode'r, sin que esto funcione bien, ¿qué se supone que debe hacer para' OBJMTLLoder' y 'OBJLoder' ??? –

sí, finalmente funcionó .... –

No estaba claro para mí si usted está tratando de hacer un visor panorámico o algo por el estilo ...

Si ese era su objetivo, he aquí una respuesta que he dado para resolver el problema de la insertar una imagen equirectangular a la esfera prestados (que puede ser controlado por el ratón y/o deviceOrientation [acelerómetro en los teléfonos inteligentes]):

https://stackoverflow.com/a/37129356/1920145

Fuente

2016-06-10 16:31:45 davidtaubmann

ThreeJS: ¿Crear una imagen de fondo que se ajuste exactamente a la ventana?

Respuesta

Cuestiones relacionadas