Three.js中的shaderMaterial纹理

Question

Three.js中的shaderMaterial纹理

5

我无法将纹理加载到我的着色器材质中，我看到的只是黑点。这是我的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类，因为我将其用于生成云作为粒子组。

非常感谢您的任何帮助。

- blindepl

你确定你能够在浏览器上访问本地文件吗？ - Ale_32

什么本地文件？你是指cloud.png吗？是的，我确定 :) - blindepl

你为什么要调用两次loadTexture函数？ - 2pha

只是为了测试，我已经尝试在一个地方加载，但没有任何变化。 - blindepl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blindepl · Accepted Answer

所以，经过一段时间的研究，我找到了这个特定问题的解决方案。我需要将我的uniforms从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") }
      },
 });