shader - three.js - 着色器纹理未出现(闪烁)

Question

我搜索了所有论坛，但没有发现其他人遇到此问题...我在球体上使用着色器来 1) 创建内部发光和 2) 应用地球纹理。当我这样做时 - 内部发光出现，但纹理没有。在我的控制台中，当我键入:uniforms.texture1.texture.image.src - 我收到纹理的正确源位置:*http://localhost:8091/media/world.jpg"

我的着色器似乎知道纹理，但没有显示它。当我将一个新对象添加到具有纹理的场景(假设是一个立方体)时 - 我的球体突然采用了我的新立方体对象的纹理。如果我在场景中添加两个新对象(比如说一个带有木盒纹理的盒子和一个带有星形纹理的天空盒)——我的球体试图同时呈现木盒纹理和星星纹理——从而导致闪烁效果(两者都不是我想要的纹理)。

我的代码如下:

  var Shaders = {
         'earth' : {
  uniforms: {
    'texture': { type: 't', value: THREE.ImageUtils.loadTexture( "media/world.jpg" ) }
  },
  vertexShader: [
    'varying vec3 vNormal;',
    'varying vec2 vUv;',
    'void main(void) {',
    'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
      'vNormal = normalize( normalMatrix * normal );',
      'vUv = uv;',
    '}'
  ].join('\n'),
  fragmentShader: [
    'uniform sampler2D texture;',
    'varying vec3 vNormal;',
    'varying vec2 vUv;',
    'void main(void) {',
        'vec3 diffuse = texture2D( texture, vUv ).xyz;',
        'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );',
        'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );',
        'gl_FragColor = vec4(diffuse + atmosphere, 1.0);',
    '}'
  ].join('\n')
}

};

在我初始化所有东西时(在我设置灯光、相机、场景等之后)- 我使用以下内容创建我的球体:

var geometry = new THREE.SphereGeometry(250, 40, 40)

var shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);

material = new THREE.ShaderMaterial({

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

    });

mesh = new THREE.Mesh(
new THREE.SphereGeometry(250, 40, 40), material);
mesh.matrixAutoUpdate = false;
scene.add(mesh);

我也试过将这段代码放在我的 html 头文件中(当然没有引号)，但这并没有改变任何东西....任何帮助将不胜感激。我正在使用 three.js 的 r51，也尝试了 r52。

提前致谢!

Answer 1

纹理现在分配不同:

{ type: "t", value: 0, texture: map } => { type: "t", value: map }

请参阅 three.js Wiki 上的迁移文档:https://github.com/mrdoob/three.js/wiki/Migration .

当前版本是 r.52。保持最新状态是个好主意。

编辑:另外，在这种情况下，不要克隆你的uniforms，而是像这样分配它们:

uniforms = shader.uniforms;