three.js中簡單粗暴實現漸變色背景

首先需要實現渲染器的背景透明顯示

this.renderer = new THREE.WebGLRenderer({
    alpha: true, // canvas是否包含alpha (透明度) 默認為 false
    antialias: true,
    precision: 'highp',
})
this.renderer.setClearAlpha(0.0) // 設置alpha，合法參數是一個 0.0 到 1.0 之間的浮點數

使用css設置渲染器元素所在dom背景

#container {
    width: 100%;
    height: 600px;
    outline: none;
    background-image: linear-gradient(rgb(0, 0, 1), rgb(119, 119, 237));
}

另外需要注意的是，不能為 Scene 指定背景色

 

參考鏈接：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/renderers/WebGLRenderer