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

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

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

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

Answer 2

地图未定义，因为TextureLoader构造函数需要经理，而不是网址。

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
var texture = loader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );

http://threejs.org/docs/#Reference/Loaders/TextureLoader

要解决两个场景的问题，您需要禁用autoClear。第二个渲染器调用清除第一个渲染器。初始化后设置：renderer.autoClear = false;。现在在渲染函数中手动清除：

function render() {
    renderer.clear(); // <-
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render( scene, camera );
}

Answer 3

我找到了一个解决方案：只需将背景网格物体添加到实际场景中，而不是创建不同的场景而不知道如何添加相机等等以使其正确渲染。

然后代码如下：

// Load the background texture
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/messier-41.jpg' );               
var backgroundMesh = new THREE.Mesh( 
    new THREE.PlaneGeometry(2048, 2048,8,8),
    new THREE.MeshBasicMaterial({
         map: texture
    }));


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

必须放在之前添加场景其他部分的代码。

Answer 4

尝试像这样编码

    THREE.ImageUtils.crossOrigin = '';
  var img = 'http://bpic.588ku.com/back_pic/03/92/40/4957e29f80d8a4a.jpg!ww650';
  var grass = THREE.ImageUtils.loadTexture(img);
new THREE.MeshLambertMaterial({  map: grass });

它对我有用

添加背景到三个场景

4 个答案: