Threejs和着色器顯示球體發光的問題

我正在研究3D可視化。我需要展示一個充滿大氣的世界，並且我以一個與threejs r40相同的例子爲例，但我的r71。Threejs和着色器顯示球體發光的問題

當我嘗試添加大氣（一種光暈，代表世界球的）我收到以下錯誤：

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

我解決了另一個着色器問題，但是我無法找到這個問題（我對着色器不熟悉，並且讓我發瘋）。

在此先感謝

來源

2015-05-29 Germán Lena

你必須創建你的網發送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; 
    }

來源

2015-05-29 00:44:41

是的，你是對的，其實我改變這顯示地球（長前天）時。無論如何，使用SphereGeometry不會顯示任何內容（https://gist.github.com/glena/0b2875044cd6c39ff150）。我應該回到D3並堅持2D hahaha –

@GermánLena你還是會得到你提到的錯誤嗎？如果不是，它可能是你的着色器的問題。嘗試首先使用普通材質創建網格，然後查看它是否顯示。您可能還想將其標記爲已回答並創建一個新問題，因爲這是一個不同的問題。 –

你是對的，我在這裏發佈了一個新問題，你有什麼線索嗎？ http://stackoverflow.com/questions/30538512/issue-upgrading-threejs-with-shaders –

Threejs和着色器顯示球體發光的問題

回答

相關問題