ThreeJS:创建一个完全适合窗口的背景图像？

Question

在ThreeJS(JavaScript/WebGL)中,如何创建静态背景图像,该图像是场景的一部分,但调整大小以完全适合整个内部浏览器窗口？它在我使用CSS时有效,但是当我通过renderer.domElement.toDataURL('image/png')制作"截图"时,背景图像将无法显示,我想这样做.谢谢!

Answer 1

您可以使用单独的背景场景来渲染背景图像.

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

然后在渲染循环中,在真实场景之前绘制bgScene.

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