CODEWITHSUNDEEP
three.js
Philipp Lenssen
Philipp Lenssen

Reputation: 9218

ThreeJS: Creating a background image that exactly fits the window?

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!

Upvotes: 5

Views: 11683

Answers (2)

DavidTaubmann
DavidTaubmann

Reputation: 3360

It wasn't clear for me if you are trying to make a panorama viewer or something like that...

If that was your goal, here's an answer I gave to solve the problem of inserting an equirectangular image to the rendered sphere (which can be controlled by mouse and/or deviceOrientation[accelerometer in smartphones]):

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

Upvotes: 0

Ilmari Heikkinen
Ilmari Heikkinen

Reputation: 2751

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

Upvotes: 14

Related Questions