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

【问题标题】：ThreeJS: Creating a background image that exactly fits the window?ThreeJS：创建一个完全适合窗口的背景图像？
【发布时间】：2016-06-11 00:31:45
【问题描述】：

在 ThreeJS (JavaScript/WebGL) 中，如何创建一个静态背景图像，它是场景的一部分，但可以调整大小以完全适合整个内部浏览器窗口？当我使用 CSS 时它可以工作，但是当我想要通过 renderer.domElement.toDataURL('image/png') 制作“屏幕截图”时，背景图像不会显示。谢谢！

【问题讨论】：

你的相机在场景中是静止的，还是可以移动的？你有没有想过尝试制作一个天空盒？
您使用哪种类型的渲染器？
科里，我目前有一个静态相机。我在场景的后面放了一个带纹理的盒子，但不知道要给盒子哪个尺寸才能用它的纹理完全填满屏幕。丹尼，我正在使用 WebGLRenderer。谢谢！
您是否尝试过使用 useScreenCoordinates = true 的 THREE.Sprite 并对其进行缩放以使其适合并在第一/最低场景中渲染？

标签： three.js

【解决方案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);

【讨论】：

非常感谢，我会试试看！
对我不起作用，我正在使用OBJMTLLoder，如果没有这个工作正常，OBJMTLLoder 和 OBJLoder 应该怎么做？？？

【解决方案2】：

我不清楚您是否要制作全景查看器或类似的东西...

如果这是您的目标，那么我给出的答案是为了解决将 equirectangular 图像插入渲染球体的问题（可以通过鼠标和/或 deviceOrientation[智能手机中的加速度计] 控制）：

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

【讨论】：