Question

我们正在尝试使用以下代码在球体/地球周围实现光晕：

var sphereGeom = new THREE.SphereGeometry(3, 40, 40);
var moonTexture = new THREE.TextureLoader().load(
  "../../assets/moon-map.png"
);
var moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture });
var moon = new THREE.Mesh(sphereGeom, moonMaterial);
moon.position.set(0, 0, 0);
this.add(moon);

var customMaterial = new THREE.ShaderMaterial({
  uniforms: {
    c: { type: "f", value: 0.4 },
    p: { type: "f", value: 2.3 },
    glowColor: { type: "c", value: new THREE.Color(0xffffff) },
    viewVector: { type: "v3", value: new THREE.Vector3(10, 10, 10) }
  },
  vertexShader: `uniform vec3 viewVector;
  uniform float c;
  uniform float p;
  varying float intensity;
  void main() 
  {
      vec3 vNormal = normalize( normalMatrix * normal );
      vec3 vNormel = normalize( normalMatrix * viewVector );
      intensity = pow( c - dot(vNormal, vNormel), p );
      // intensity = 0;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }`,
  fragmentShader: `uniform vec3 glowColor;
  varying float intensity;
  void main() 
  {
      vec3 glow = glowColor * intensity;
      gl_FragColor = vec4( glow, 1.0 );
  }`,
  side: THREE.BackSide,
  blending: THREE.AdditiveBlending,
  transparent: true
});

moonGlow = new THREE.Mesh(sphereGeom.clone(), customMaterial.clone());
moonGlow.position.set(moon.position.x, moon.position.y, moon.position.z);
moonGlow.scale.multiplyScalar(1.1);
this.add(moonGlow);

这一切看起来都很好，我们得到了理想的结果。但是当我们将WebGLRenderer的alpha设置为true（用于在背景体元素中获取渐变）时，整个光晕被黑色边框包围。

是否有某种方法可以在背景和正面显示渐变颜色，使这个球体发光？

Answer 1

您可以将纹理应用于scene.background以获得所需效果。在这种情况下，没有必要将alpha = true应用于WebGLRenderer。

var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/gradient.jpg' );

scene.background = texture;

演示：https://jsfiddle.net/f2Lommf5/4946/

Threejs全球发光问题

1 个答案: