我有一个按预期工作的着色器 Material 。 该着色器附加了纹理。
我想使用此着色器 Material 创建 2 个网格,每个网格具有不同的纹理。
问题是,如果我尝试在场景中渲染 2 个网格,第一个对象的 Material 会以某种方式被覆盖,并使用与第二个对象相同的 Material 。
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);
有道理吗?这是预期的行为吗?如果是这样,有没有好的方法来绕过这个问题?
谢谢
最佳答案
您需要使用相同的着色器创建 Material 的两个实例,并为每个实例分配适当的纹理/制服。
编辑
复制制服有点棘手。我认为当你克隆 Material 时你会失去引用,所以你可能需要小心如何管理它们。
关于javascript - THREEJS 着色器 Material 被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30600587/