THREEJS 着色器材质被覆盖答案

【问题标题】：THREEJS Shader Material overwrittenTHREEJS 着色器材质被覆盖
【发布时间】：2015-08-16 12:16:42
【问题描述】：

我有一个按预期工作的着色器材质。此着色器附加了一个纹理。

我想使用此着色器材质创建 2 个网格，每个网格具有不同的纹理。

问题是，如果我尝试在场景中渲染我的 2 个网格，第一个对象的材质会以某种方式被覆盖并使用与第二个对象相同的材质。

    var dataShader = VJS.shaders.data;
    var uniforms = dataShader.parameters.uniforms;
    // texture size (2048 for now)
    uniforms.uTextureSize.value = stack._textureSize;
    // array of 16 textures
    uniforms.uTextureContainer.value = textures;
    // texture dimensions
    uniforms.uDataDimensions.value = new THREE.Vector3(stack._columns, stack._rows, stack._nbFrames);
    // world to model
    uniforms.uWorldToData.value = stack._lps2IJK; //new THREE.Matrix4();

    var sliceMaterial = new THREE.ShaderMaterial({
      // 'wireframe': true,
      'side': THREE.DoubleSide,
      'transparency': true,
      'uniforms': uniforms,
      'vertexShader': dataShader.parameters.vertexShader,
      'fragmentShader': dataShader.parameters.fragmentShader,
    });

    var slice = new THREE.Mesh(sliceGeometry, sliceMaterial);
    // this is an Object3D that is added to the scene
    this.add(slice);

这有意义吗？这是预期的行为吗？如果是这样，有没有绕过这个问题的好方法？

谢谢

【问题讨论】：

标签： javascript three.js textures webgl shader

【解决方案1】：

您需要使用相同的着色器创建材质的两个实例，并为每个实例分配适当的纹理/制服。

编辑

复制制服有点棘手。当您克隆材料时，您会丢失我认为的参考，因此您可能需要小心管理它们。

【讨论】：

谢谢，是的，我在材料克隆中的代码中有一个错误。