Как повторить ThreeJS Matcap использовать fragmentShader Texture

Question

здесь вершина и fragmentshader материал:

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, почему? как исправить это спасибо всем друзьям!

Answer 1

По умолчанию текстура Clamp To Edge означает отсутствие обертывания до нуля. Ваша основная текстура - повторение Clamp TO Edge, а обычная текстура - Repeat Wrapping. Вероятно, у вас нормальное качество текстуры карты не так ярко, чтобы изменить ситуацию. Попробуйте вернуть вещь или текстуру (значит, сделать какую-то яркую нормальную текстуру карты или тусклую текстуру).

Ваш подход правильный, кажется. Еще одна вещь, которую вы можете сделать для повышения удобочитаемости:

  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