Javascript 如何在three.js中设置图像背景？

我试图在three.js中使用globe为我的场景设置图像背景，但不幸的是，当我这样做时，我场景的主要对象也变成了黑色（与背景颜色相同）

我使用的方法是：

renderer = new THREE.WebGLRenderer({ antialias: false, alpha:true });

这使得默认背景透明。然后我在CSS部分添加了图像背景

我的整个场景脚本如下所示：

你们有什么办法来修复它并使地球可见吗

---

非常感谢！

关于背景图像，您正在为

WebGLRenderer

设置

alpha

值，这是正确的。您没有发布CSS，但请确保在

容器上设置背景图像，而不是在画布上

另外，注释掉这一行：

renderer.setClearColor(0x000000, 0);

您不需要设置清晰的颜色，因为您正在清除为透明度，而不是颜色。这应该可以解决背景图像问题

关于全黑模型，场景中需要一盏灯。请尝试将其添加到
init
方法：

var light = new THREE.PointLight(0xffffff, 1, Infinity);
camera.add(light);

这将在相机位置添加光源（并在相机移动时跟随相机）

编辑以添加代码段：


var容器，stats；
摄像机、场景、渲染器；
var组；
var mouseX=0，
mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，12000）；
//近距离
摄像机位置z=500；
var灯光=新的三点灯光（0xffffff，1，无穷大）；
相机。添加（灯光）；
场景=新的三个。场景（）；
组=新的三个。组（）；
场景。添加（组）；
//土
var loader=new THREE.TextureLoader（）；
loader.crossOrigin=''；
loader.load（'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/640px-Equirectangular_projection_SW.jpg，函数（纹理）{
var geometry=新的三种。球墨法（180,32,32）；
var材料=新的三网格基本材料({
贴图：纹理，
透支：0.5
});
var mesh=新的三个网格（几何体、材质）；
组。添加（网格）；
});
//影子
var canvas=document.createElement（'canvas'）；
画布宽度=128；
canvas.height=128；
var context=canvas.getContext（'2d'）；
var gradient=context.createRadialGradient(
画布宽度/2，
1.5米/高，
0,
画布宽度/2，
1.5米/高，
画布宽度/2
);
gradient.addColorStop（0.1，#000000'）；
gradient.addColorStop（1，#000000'）；
context.fillStyle=渐变；
context.fillRect（0,0，canvas.width，canvas.height）；
var纹理=新的三个。CanvasTexture（canvas）；
var geometry=新的三个。PlaneBufferGeometry（300,300,3,3）；
var材料=新的三网格基本材料({
贴图：纹理，
透支：0.5
});
var mesh=新的三个网格（几何体、材质）；
网格位置y=-200；
mesh.rotation.x=-Math.PI/2；
组。添加（网格）；
renderer=new THREE.WebGLRenderer({
反别名：假，
阿尔法：是的
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//renderer.setClearColor（0x000000，0）；
container.appendChild（renderer.domeElement）；
统计数据=新统计数据（）；
appendChild（stats.dom）；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
onDocumentMouseMove函数（事件）{
mouseX=（event.clientX-windowHalfX）；
mouseY=（event.clientY-windowHalfY）；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
stats.update（）；
}
函数render（）{
camera.position.x+=（mouseX-camera.position.x）*0.08；
camera.position.y+=（-mouseY-camera.position.y）*0.08；
摄像机。注视（场景。位置）；
旋转组y-=0.003；
渲染器。渲染（场景、摄影机）；
}
正文{
颜色：#ffffff；
字体系列：“Futura”；
字体大小：20px；
文本对齐：居中；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg);
背景色：黑色；
边际：0px；
溢出：隐藏；
}
一段时间以来，有：

var texture = new THREE.TextureLoader().load( "textures/bg.jpg" );
scene.background = texture;

我正在使用three.js v 0.87
有两种方法

1） 使用
TextureLoader
加载图像并将其设置为背景。这将导致静态背景可能看起来不太真实

 var texture = new THREE.TextureLoader().load(
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    );
   scene.background = texture;

2） 使用
skybox
加载顶部、左侧、右侧底部和前后侧的图像。然后将它们设置在立方体或球体几何体中

var urls = [
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg"
    ];

    var materialArray = [];
    for (var i = 0; i < 6; i++)
      materialArray.push(
        new THREE.MeshBasicMaterial({
          map: new THREE.TextureLoader().load(urls[i]),
          side: THREE.BackSide
        })
      );

    var skyGeometry = new THREE.SphereGeometry(400, 32, 32);
    var skyMaterial = new THREE.MeshFaceMaterial(materialArray);
    var skybox = new THREE.Mesh(skyGeometry, skyMaterial);
    scene.add(skybox);

var url=[
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
"https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg"
];
var materialArray=[]；
对于（变量i=0；i<6；i++）
材料排列(
新的三网格基本材料({
map:new THREE.TextureLoader（）.load（URL[i]），
侧面：三。背面
})
);
var skyGeometry=新的三种球墨法（400,32,32）；
var skyMaterial=新的三个网格面材质（materialArray）；
var skybox=new THREE.Mesh（skyGeometry，skyMaterial）；
场景.添加（skybox）；

这将生成一个球体，其背面带有纹理图像。只需将
3.球墨法
替换为 var texture = new THREE.TextureLoader().load(
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    );
   scene.background = texture;

var urls = [
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg",
      "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg"
    ];

    var materialArray = [];
    for (var i = 0; i < 6; i++)
      materialArray.push(
        new THREE.MeshBasicMaterial({
          map: new THREE.TextureLoader().load(urls[i]),
          side: THREE.BackSide
        })
      );

    var skyGeometry = new THREE.SphereGeometry(400, 32, 32);
    var skyMaterial = new THREE.MeshFaceMaterial(materialArray);
    var skybox = new THREE.Mesh(skyGeometry, skyMaterial);
    scene.add(skybox);