In ThreeJS (JavaScript/ WebGL) how can I create a static background image that is part of the scene but resizes to fit the full inner browser window exactly? It works when I use CSS but then the background image won't show when making a "screenshot" via renderer.domElement.toDataURL('image/png'), which I want to. Thanks!
You can use a separate background scene to render the background image.
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);
Then in your render loop, draw bgScene before your real scene.
renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render(scene, cam);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With