three.js 如何设置背景图片？

有两种方式：

1、使用html的body属性设置背景图片，即：

body {
    margin: 0;
    overflow: hidden;
    background: url("background/background.png") center no-repeat;
    background-size:cover;
}

这种方法要设置渲染器的透明度，即：

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

alpha: true 这个属性是关键，不然背景会被renderer遮住。

这里还有一个关键点，就是不要对scene设置背景色，即：

scene.background = new THREE.Color( 0x000000 );

如果设置了，也会遮住html的背景图。

 

2、使用 THREE.PlaneBufferGeometry 设置背景，就相当于创建一个大的平面来充当背景

这种方式的优点是，可以设置倾斜度，设置场景的雾化效果，展示出一个带深度的3D效果。

缺点是，要设置足够的距离，不要让你的其它对象物体跑到这个背景的后面去，跑到后面就看不到了。