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