three.jsのpost-processingでエラーが出てつまづきました。"Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"."

three.jsのPostprocessingでつまづきました！

無事解決したので完成品

注意事項

自分でこんな記事を書いておいて変なんですが、three.jsについて調べるときは必ず公式のサイトで調べてください！

three.jsでpostprocessingを使う方法

エラー文

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

解決までの流れ

(1)ひとまずエラー文で検索をしたらThree.jsのフォーラムがヒット

(2)↑を読むと何やらgithubで議論が行われているとのこと。依存関係のお話であることはわかる。

(3)もう1度、three.js公式のpostprocessingの使い方記事を見る。するとnpmを使うこと前提で話が進んでいることがわかった。

(4)three.jsのnpmを見てみると、サンプルファイルがあった。

(5)こちらのjsfiddleを見ながらthree.jsに追加

index.html

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js"
		}
	}
</script>

(6)es-module-shims.jsについてはこちら

(7)postprocessingの使い方を参考にやっていたら新たなエラーが発生

ここに書かれているファイルが足りないって言われてるのかな〜と推測。
おそらく、three.jsのexampleにあるはず！

(8)必要そうなファイルを追加してみる

postprocessingの使い方ページには、EffectComposerとGlitchPassとRenderPassしかimportしてなかったので、その3ファイルだけあればいいと思っていたが、実際にはそんなことなかった。

(9)よかった！無事完成！

githubはこちら
https://github.com/i-am-ethan/threejs-postprocessing