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效果。

缺點是，要設置足夠的距離，不要讓你的其它對象物體跑到這個背景的後面去，跑到後面就看不到了。