着色器中的Three.js紋理

Question

我無法將紋理加載到着色器材質中，只有看到的只是黑點。 這是我的shader.js

THREE.ShaderLib['cloud'] = {

    uniforms: {
        texture: { type: "t", value: THREE.ImageUtils.loadTexture("img/cloud.png") }
    },

    vertexShader: [
        "varying vec2 vUv;",
        "void main() {",
            "vUv = uv;",
            "gl_PointSize = 8.0;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}",
    ].join("\n"),

    fragmentShader: [
            "varying vec2 vUv;",
            "uniform sampler2D texture;",
            "void main() {",
                "gl_FragColor = texture2D(texture, vUv);",
            "}",
    ].join("\n")
};

這就是我試圖加載和使用它的方式：

var cloudShader = THREE.ShaderLib["cloud"];
var uniforms = THREE.UniformsUtils.clone(cloudShader.uniforms);

var texture = THREE.ImageUtils.loadTexture("img/cloud.png", undefined, function () {

   uniforms.texture.value = texture;
   texture.needsUpdate = true;

   var _material = new THREE.ShaderMaterial({
      fragmentShader: cloudShader.fragmentShader,
      vertexShader: cloudShader.vertexShader,
      uniforms: uniforms                   
   });                    
   _material.uniforms.texture.value.needsUpdate = true;
   var _geometry = new THREE.Geometry();
   _geometry.vertices.push(new THREE.Vector3(0, 0, 0));
   var _mesh = new THREE.Points(_geometry, _material);
   scene.add(_mesh);

 });

如您所見，我正在嘗試在創建材質之前和之后兩次設置更新紋理值。 這確實是一個簡單的示例，但是我不知道為什么它不能以我使用它的方式工作。 調試控制台中沒有錯誤。

我正在使用THREE.Points類，因為我正在使用它來生成作為粒子組的雲。

在此先感謝您的幫助。

Answer 1

因此，一段時間后，我找到了針對此特定問題的解決方案。 我需要將我的制服從shader.js直接移動到我創建着色器材質的地方。 這足以解決我的紋理問題，但是我仍然不知道為什么以前的代碼不起作用。 可用的着色器材質如下所示：

 var _material = new THREE.ShaderMaterial({
      fragmentShader: cloudShader.fragmentShader,
      vertexShader: cloudShader.vertexShader,
      uniforms: uniforms: {
        texture: { type: "t", value: THREE.ImageUtils.loadTexture("img/cloud.png") }
      },
 });