Question

我一直在摆弄三个.js，并且在THREE.ShaderMaterial时我很难过。它最初是从示例中复制/粘贴开始的，如下所示：http://threejs.org/examples/#webgl_materials_normalmap

我把它复制到一个只返回材料的函数中。它不会起作用（错误，我稍后会详细说明），所以我删除了所有已设置的制服并找到了完整的空白材料。只是为了看看是否仍会显示相同的错误。

所以这是我的代码：

var testmaterial = function(params){
    var shader = THREE.ShaderLib[ "normalmap" ];
    var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

    var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms};
    var material = new THREE.ShaderMaterial( parameters );

    return material;
};

没有什么想象你说的，但我同意，但浏览器似乎不同意。这里的错误我似乎无法摆脱：

错误X6077：带有r＃作为源的texld / texldb / texldp / dsx / dsy指令不能在动态条件内使用＆＃39;如果＆＃39;块，动态条件子程序调用或带break *的循环/ rep。

有没有人对我做错了什么有丝毫的线索？任何帮助将不胜感激。

Answer 1

您选择的着色器，即normalmap，需要设置一些输入制服。如果查看https://github.com/mrdoob/three.js/blob/r68/src/renderers/shaders/ShaderLib.js#L595，您将看到变量为null：

    "tDisplacement": { type: "t", value: null },
    "tDiffuse"     : { type: "t", value: null },
    "tCube"        : { type: "t", value: null },
    "tNormal"      : { type: "t", value: null },
    "tSpecular"    : { type: "t", value: null },
    "tAO"          : { type: "t", value: null },

因此，您需要设置这些，或者因为您只是在摆弄尝试另一个不需要输入的简单着色器。似乎大多数其他人不需要设置输入制服。

修改

您还需要计算模型的切线。但为此你需要使用不同的模式。

var geometry = new THREE.SphereGeometry(100, 50, 50);
geometry.computeTangents();

var material = myShaderMaterial({
    //enableAO          : 0,
    enableDiffuse       : 1,
    //enableSpecular    : 0,
    //enableReflection  : 0,
    enableDisplacement  : 1,

    tDisplacement       : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    tDiffuse            : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    //tCube             : planet.maps.planet.
    tNormal             : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
    //tSpecular         : planet.maps.planet.
    //tAO               : planet.maps.planet.
});

var mesh = new THREE.Mesh(geometry, material);

three.js shadermaterial根本不工作

1 个答案: