5

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

4

2 回答 2

14

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

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);
于 2012-07-04T00:41:00.260 回答
0

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

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

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

于 2016-06-10T16:31:45.960 回答