vertexShaderとfragmentShaderを読み込む

まずは、Shaderを読み込んでみます。
index.htmlでShaderを用意します。（3~5、9~11行目）
main.jsのShaderMaterialの引数でShaderを読み込みます。（3、4行目）

ここまでで次のようになっていればOKです。
これでShaderで読み込み確認ができました。

index.html
・・・
<script id="v-shader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
 
<script id="f-shader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
</script>
・・・

main.js
・・・
const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: document.querySelector('#v-shader').textContent,
    fragmentShader: document.querySelector('#f-shader').textContent,
});
let mesh = new THREE.Mesh(planeGeometry, shaderMaterial);
scene.add(mesh);
・・・

テクスチャを表示させる

まずは、main.jsでTextureLoaderを用意し、任意の画像を読み込みます。（5、6行目）
※画像はunsplashから拝借しています。
そして、Shaderにtextureを渡します。（10、12行目）

index.htmlでは、textureを受け取り画像の座標をマッピングします。

ここまでで次のようになっていればOKですが、画像比率がおかしなことになっています。

main.js
・・・
/**
* ジオメトリ+マテリアル＝メッシュを用意する
*/
const loader = new THREE.TextureLoader();
const texture = loader.load('https://source.unsplash.com/9orSC4PLJr4/');
 
const planeGeometry = new THREE.PlaneGeometry(2, 2);
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture }
    },
    vertexShader: document.querySelector('#v-shader').textContent,
    fragmentShader: document.querySelector('#f-shader').textContent,
});
let mesh = new THREE.Mesh(planeGeometry, shaderMaterial);
scene.add(mesh);
・・・

index.html
・・・
<script id="v-shader" type="x-shader/x-vertex">
    varying vec2 vUv;
   
    void main() {
        vUv = uv;
 
        gl_Position = vec4( position, 1.0 );
    }
</script>
 
<script id="f-shader" type="x-shader/x-fragment">
    varying vec2 vUv;
 
    uniform sampler2D uTexture;
 
    void main() {
        vec3 color = texture2D( uTexture, vUv ).rgb;
 
        gl_FragColor = vec4( color, 1.0 );
    }
</script>
・・・

background-size: cover;のようにする

まずは、main.jsでY座標用のアスペクト比とX座標用のアスペクト比をShaderに渡します。（11、12行目）

index.htmlでは、Y座標用のアスペクト比とX座標用のアスペクト比を受け取ります。（4、5行目）
14行目のvUv = uv;をコメントアウトし、アスペクト比を補正する処理を書きます。（9~12行目）

ここまででbackground-size: cover;のようになりましたがリサイズに対応していません。

main.js
・・・
/**
* ジオメトリ+マテリアル＝メッシュを用意する
*/
const loader = new THREE.TextureLoader();
const texture = loader.load('https://source.unsplash.com/9orSC4PLJr4/');
 
const planeGeometry = new THREE.PlaneGeometry(2, 2);
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        uYAspect: { value: window.innerHeight / window.innerWidth },
        uXAspect: { value: window.innerWidth / window.innerHeight },
        uTexture: { value: texture }
    },
    vertexShader: document.querySelector('#v-shader').textContent,
    fragmentShader: document.querySelector('#f-shader').textContent,
});
let mesh = new THREE.Mesh(planeGeometry, shaderMaterial);
scene.add(mesh);
・・・

index.html
・・・
<script id="v-shader" type="x-shader/x-vertex">
    varying vec2 vUv;
 
    uniform float uYAspect;
    uniform float uXAspect;
   
    void main() {
        vUv = uv - .5;
        vUv.y *= min(uYAspect, 1.0);
        vUv.x *= min(uXAspect, 1.0);
        vUv += .5;
 
        //vUv = uv;
 
        gl_Position = vec4( position, 1.0 );
    }
</script>
・・・

リサイズ処理を追加する

リサイズ処理はY座標用のアスペクト比とX座標用のアスペクト比を計算しなおすだけでOKです。（5、6行目）

これで完成です。

main.js
// ブラウザのリサイズに対応させる
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    shaderMaterial.uniforms.uYAspect.value = window.innerHeight / window.innerWidth;
    shaderMaterial.uniforms.uXAspect.value = window.innerWidth / window.innerHeight;
    camera.aspect = window.innerWidth / window.innerHeight;
    distance = (window.innerHeight / 2) / Math.tan(fovRad);
    camera.position.z = distance;
    camera.updateProjectionMatrix();
}