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);