shaderMaterial中的纹理

Three.js Texture in shaderMaterial

本文关键字：纹理 shaderMaterial      更新时间：2023-09-26

我不能加载纹理到我的着色器材料，只有我看到的只是黑点。这是我的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);
 });

正如你所看到的，我试图设置更新纹理值两次，在材料创建之前和之后。这是一个非常简单的例子，但我不知道为什么它不工作的方式，我正在使用它。调试控制台中没有错误。

我用的是3。点类，因为我用它来生成云作为粒子组。

提前感谢您的帮助。

所以，经过一段时间后，我找到了这个特定问题的解决方案。我需要将我的制服从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") }
      },
 });
相关文章：