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

如果您正在尝试制作全景查看器或类似内容，那对我来说并不清楚......

如果这是你的目标，我在这里给出了一个答案，用于解决向渲染球体插入一个equirectangular图像的问题（可以通过鼠标和/或deviceOrientation [智能手机中的加速度计]控制）： / p>

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

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

2 个答案: