重复ThreeJS Matcap如何使用fragmentShader纹理

时间:2015-06-10 14:16:39

标签: javascript three.js

这里是顶点和碎片整理材料:



material = new THREE.ShaderMaterial( {

uniforms: {
    textureMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/matcap/green.jpg' ) },
    normalMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/normalmap/stamp.jpg' ) },
    normalScale: { type: 'f', value: 0.5 },
    texScale: { type: 'f', value: 5 },
    useSSS: { type: 'f', value: 10 },
    useScreen: { type: 'f', value: 0 },
    color: { type: 'c', value: new THREE.Color( 0, 0, 0 ) }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide

} );




我想像这样重复使用纹理



material.uniforms.textureMap.value.wrapS = material.uniforms.textureMap.value.wrapT = 
THREE.ClampToEdgeWrapping;

material.uniforms.normalMap.value.wrapS = material.uniforms.normalMap.value.wrapT = 
THREE.RepeatWrapping;
material.uniforms.normalMap.value.repeat.set( 20, 20 );




但不能在three.js工作?为什么?如何解决它 谢谢所有朋友!

1 个答案:

答案 0 :(得分:0)

默认情况下,纹理是Clamp To Edge意味着没有包装为零。你的主要纹理是Clamp TO Edge重复和正常纹理是重复包装可能你正常的地图纹理质量不是那么明亮,试图恢复事物或纹理(意味着制作一些明亮的法线贴图或暗淡的纹理贴图)。

你的方法似乎是正确的。还有一件事可以提高可读性:

            var textureMap = THREE.ImageUtils.loadTexture( 'img/matcap/green.jpg' );
            var normalMap = THREE.ImageUtils.loadTexture( 'img/normalmap/stamp.jpg' )
            textureMap.repeat.set(20,20);
            normalMap.repeat.set(10,10);
            //then shader code