three.js 如何设置背景图片和替换颜色

有两种方式：

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

body {
   margin: 0;
   overflow: hidden; /* 溢出隐藏 */
   background: url("BJ/BJ01.jpg") center no-repeat;
   -webkit-background-size: cover;
   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效果。

替换颜色setClearColor

  // var renderer = new THREE.WebGLRenderer();//渲染器构建
      
// renderer.setClearColor(0x121A39);