javascript - 为三个场景添加背景

Question

我正在尝试为三个场景添加背景，但无法正常工作。我听从了给出的建议 here和 here没有成功。

这是我添加到我的(复杂)代码中的行:

            // Load the background texture
            var loader = new THREE.TextureLoader();
            var texture = loader.load( 'textures/stars_texture2956.jpg' );
            var backgroundMesh = new THREE.Mesh(
                new THREE.PlaneGeometry(2, 2, 0),
                new THREE.MeshBasicMaterial({
                    map: texture
                }));

            backgroundMesh.material.depthTest = false;
            backgroundMesh.material.depthWrite = false;

            // Create your background scene
            backgroundScene = new THREE.Scene();
            backgroundCamera = new THREE.Camera();
            backgroundScene.add(backgroundCamera );
            backgroundScene.add(backgroundMesh );

render 函数如下所示:

function render() {
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render( scene, camera );
}

我仍然没有看到背景(它仍然是白色)，但其他一切都按预期工作。有办法解决这个问题吗？

Answer 1

如果您希望为场景添加静态背景，那么最简单的方法是让场景的背景透明并在 Canvas 下放置图像:

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xffffff, 0);

如果您希望创建在旋转相机时会发生变化的全景背景，那么您需要创建一个天空盒 - 场景周围的一个大网格，其纹理包含一组覆盖 360 度视角的纹理。看看这个例子: http://threejs.org/examples/#webgl_materials_envmaps