显示球体发光的 threejs 和着色器问题

Question

我正在研究 3d 可视化。我需要展示一个具有氛围的世界，我基于一个使用 threejs r40 的示例，但我的是 r71。

当我尝试添加气氛（一种代表世界的球体的辉光）时，出现以下错误：

three.min.js:445 Uncaught TypeError: c.addEventListener is not a function

我的代码如下：

scene.add(createAtmosphere());

function createAtmosphere() {

    shader = Shaders['atmosphere'];
    uniforms = THREE.UniformsUtils.clone(shader.uniforms);
    mesh = new THREE.Mesh(new THREE.Sphere(200, 40, 30), 
        new THREE.ShaderMaterial({

          uniforms: uniforms,
          vertexShader: shader.vertexShader,
          fragmentShader: shader.fragmentShader

        })
      );

    mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.1;
    mesh.flipSided = true;
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    return mesh;
  }

这是着色器

var Shaders = {
    'atmosphere' : {
      uniforms: {},
      vertexShader: [
        'varying vec3 vNormal;',
        'void main() {',
          'vNormal = normalize( normalMatrix * normal );',
          'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
        '}'
      ].join('\n'),
      fragmentShader: [
        'varying vec3 vNormal;',
        'void main() {',
          'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );',
          'gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;',
        '}'
      ].join('\n')
    }
  };

我解决了另一个着色器问题，但我找不到问题所在（我不熟悉着色器，这让我抓狂）。

提前致谢

Answer 1

您必须创建您的网格发送 SphereGeometry，而不是 Sphere。

http://threejs.org/docs/#Reference/Objects/Mesh http://threejs.org/docs/#Reference/Extras.Geometries/SphereGeometry

scene.add(createAtmosphere());

function createAtmosphere() {

    shader = Shaders['atmosphere'];
    uniforms = THREE.UniformsUtils.clone(shader.uniforms);
    mesh = new THREE.Mesh(new THREE.SphereGeometry(200, 40, 30), 
        new THREE.ShaderMaterial({

          uniforms: uniforms,
          vertexShader: shader.vertexShader,
          fragmentShader: shader.fragmentShader

        })
      );

    mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.1;
    mesh.flipSided = true;
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    return mesh;
  }

显示球体发光的 threejs 和着色器问题

Issue with threejs and shaders showing an sphere glow

shader

three.js