three.js 改变材质上的纹理

Posted 2023-02-27

【中文标题】three.js 改变材质上的纹理

【英文标题】：three.js change texture on material

【发布时间】：2012-11-15 00:10:33

【问题描述】：

我在 three.js 中的网格上设置纹理，当它加载时它看起来也是我想要的：

        texture = THREE.ImageUtils.loadTexture("textures/hash.png");

        texture.needsUpdate = true;

        uniforms = 
            color:  type: "c", value: new THREE.Color( 0xffffff ) ,
            texture:  type: "t", value: texture ,
        ,  

        vertexShader = "varying vec2 vUv; void main() vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        fragmentShader = "uniform vec3 color; uniform sampler2D texture; varying vec2 vUv; void main()  vec4 tColor = texture2D( texture, vUv ); gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );",

        material = new THREE.ShaderMaterial(
            uniforms : uniforms,
            vertexShader    : vertexShader,
            fragmentShader  : fragmentShader
        );

但我想稍后更改此网格上的纹理，我已经尝试过：

obj.mesh.material.uniforms.texture = THREE.ImageUtils.loadTexture("textures/1.png");
obj.mesh.material.uniforms.texture.needsUpdate = true;

但这不会改变网格上显示的纹理，如何更改 THREE.ShaderMaterial 上的纹理？

【问题讨论】：

尝试像以前一样将其分配给obj.mesh.material.uniforms.texture.value。还可以考虑在纹理成功加载（订阅加载事件）后设置needsUpdate 标志。

你说得对，我需要将其分配给texture.value，谢谢

不错。我添加了一个答案，因此您可以关闭此问题。

【参考方案1】：

改为将纹理分配给obj.mesh.material.uniforms.texture.value。还可以考虑在纹理成功加载后设置needsUpdate 标志（通过订阅加载事件）。