threejs之将张纹理图片组成材质组

threejs之将张纹理图片组成材质组

                        const texture1 = textureLoader.load('./static/img/1.jpg');
                        const texture2 = textureLoader.load('./static/img/2.jpg');
                        const customMaterial = new THREE.ShaderMaterial({
                            uniforms: {
                                texture1: { value: texture1 },
                                texture2: { value: texture2 },
                                blendFactor: { value: 0.5 }
                            },
                            vertexShader: `
                            varying vec2 vUv;
                            void main() {
                            vUv = uv;
                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                            }
                        `,
                            fragmentShader: `
                            uniform sampler2D texture1;
                            uniform sampler2D texture2;
                            uniform float blendFactor;
                            varying vec2 vUv;
                            
                            void main() {
                            vec4 tex1 = texture2D(texture1, vUv);
                            vec4 tex2 = texture2D(texture2, vUv); // 双倍UV实现细节重复
                            gl_FragColor = mix(tex1, tex2, step(0.5, tex2.a));
                            }
                        `
                        });

　　

 

 

钻研不易，转载请注明出处。。。。。。