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。

提前感谢！

- Robbie

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;

- WestLangley

---

抱歉-由于尝试了许多不同的方法，我的代码中有一个打字错误。我刚刚更新了我的代码以反映新的值分配。但是，我仍然遇到相同的问题。我也刚刚更新到r.52，但仍然存在同样的问题。 - Robbie

太棒了 - 非常感谢！！！将统一变量定义为uniforms = shader.uniforms解决了问题。真的非常感谢您的帮助 :) - Robbie