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

Answer 2

我不清楚你是想做一个全景视图还是类似的东西……

如果这是你的目标，这是我给出的一个解决问题的答案，解决了在渲染的球体中插入等长方形图像的问题(可以通过鼠标和/或智能手机中的deviceOrientationaccelerometer控制)：

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