three.js如何将渐变颜色用于背景

Question

我正在使用three.js在WeChat上开发3D游戏，但我有一个问题，three.js如何设置渐变的背景颜色。我在文档上看到了背景颜色，但没有背景颜色的渐变。请说明我是中国人，英文不好。

Answer 1

要获得高级效果，请尝试使用https://github.com/mattdesl/three-vignette-background或查看其工作原理。对于简单的东西，做一个CSS渐变，并把它放在画布后面。您可以先使用use CSS to make the gradient，然后使用make the threejs canvas transparent。

Answer 2

使用着色器很容易做到这一点

var myGradient = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(2,2,1,1),
  new THREE.ShaderMaterial({
    uniforms: {
      uColorA: { value: new THREE.Color },
      uColorB: { value: new THREE.Color }
    },
    vertexShader: require('./gradient.vert'),
    fragmentShader: require('./gradient.frag')
  })
)

现在，我通常将其呈现为：

myGradient.material.depthWrite = false
myGradient.renderOrder = -99999

这将导致该网格首先渲染，然后渲染其上的所有内容。但这实际上可能不是最好的解决方案，它可能会更好地呈现它最后，而不是其他一切？

gradient.vert：

varying vec2 vUv;
void main(){
  vUv = uv;
  float depth = -1.; //or maybe 1. you can experiment
  gl_Position = vec4(position.xy, depth, 1.);
}

gradient.frag：

varying vec2 vUv;
uniform vec3 uColorA;
uniform vec3 uColorB;
void main(){
  gl_FragColor = vec4(
    mix( uColorA, uColorB, vec3(vUv.y)),
    1.
  );
}

Answer 3

下面是ESM的可重用函数

import {
  Mesh,
  BackSide,
  SphereGeometry,
  ShaderMaterial,
  Color
} from 'three'

const SKY_COLOR = 0x999999
const GROUND_COLOR = 0x242424
const SKY_SIZE = 1000000

function addSkyGradient(scene) {
      const vertexShader = `
      varying vec3 vWorldPosition;
            void main() {
                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
                vWorldPosition = worldPosition.xyz;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }`
      const fragmentShader = `
      uniform vec3 topColor;
            uniform vec3 bottomColor;
            varying vec3 vWorldPosition;
            void main() {
                float h = normalize( vWorldPosition).z;
                gl_FragColor = vec4( mix( bottomColor, topColor, max( h, 0.0 ) ), 1.0 );
            }`
      const uniforms = {
        topColor: { value: new Color(SKY_COLOR) },
        bottomColor: { value: new Color(GROUND_COLOR) }
      }
      const skyGeo = new SphereGeometry(SKY_SIZE, 32, 15)
      const skyMat = new ShaderMaterial({
        uniforms,
        vertexShader,
        fragmentShader,
        side: BackSide
      })
      const sky = new Mesh(skyGeo, skyMat)
      scene.add(sky)
}

My Document