Geek asks and answers

ThreeJS: Creating a background image that exactly matches 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 window of the internal browser? It works when I use CSS, but then the background image will not be displayed when creating a “screenshot” via renderer.domElement.toDataURL ('image / png'), which I want. Thank!

+5
source share
2 answers

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 rendering loop, draw bgScene in front of the actual scene.

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

, - ...

, , , ( / [ ]):

fooobar.com/questions/1117750/...

0

More articles:


All Articles