11/28

three.js-journeyを復習していると、かなり忘れていて傷つく。。

特にexampleのDepthTextureの練習をしたときに、MeshDepthMaterialで同様の結果が得られることに気づかなかったこと。

だめですな

three.js journey

texture

aoMapは影のマップ。

THREE.NearestFilterを使ったテクスチャには、無駄になるのでgenerateMipmapはfalseにする。

Material

matcapMaterialで画像を使って簡単・軽量にリアルな感じを出せる。

影と光の2極化するやつはMeshToonMaterial。

MeshPhongMaterialはshininessで輝かせられる。specularで色指定。

EnviromentMapの使い方とか色々忘れている 上下左右360度囲まれているやつ。

CSS mask-positionが100%という状態

cssのmask-imageを練習した。したいことは、端から徐々に表示。

mask-imageでlinear-gradientを指定。黒いところは隠れて、透明なところは見える。

1,全く見えないフェーズ 2,徐々に現れるフェーズ 3,すべて見えるフェーズを作るために、

0~25%は透明、25~75%で変化をつけて、75%~100%は黒にして、mask-sizeをx方向に400%とし、mask-positionをアニメーションさせる。

mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%);
mask-size: 400% 100%;
mask-position: 100% 0; //（linear-gradientでいう、0~25%のところが見えている。）

mask-position: 100%というところでんん？？となったが、マスクの右端と要素の右端が揃っている状態となる。

Next.js

久しぶりにNext.jsの練習しようとUdemyを。

文章の中にaタグを入れる場合、空白を入れるのむずいよなあと思ってたが、デフォルト（最初のページ）で{" "}がaタグの前後に入ってますわ。

SSR/SSG/ISRのチェック

export const dynamic = 'force-dynamic'をページの先頭に記述するまたはfetchでcache:no-storeとすることで、そのページ全体を動的に（SSR）します。 

export const revalidate = 10; をページの先頭に記述するまたはfetchでnext: {revalidate: 10}とすることで、そのページ全体をISRにします。

npm run devでは毎回読み込まれるので、チェックは必ずrun buildしてからrun startします。

終わり

英語ペラペラになりたい。なんか憧れるから。

って思ってちょっと英語で感想書くようにしてみようかな。

頭の中で日本語を英語にしてみても、全然わからなくて泣ける。

20くらいの時の何もせず引きこもっていたときにやっとけよ自分・・・

I want to master English. because it is cool.

so i write my thinking by English.

I'm so sad to I can't convert Japanese to English in my head.

I should do study when I nobody about 20.

↑めちゃくちゃや

正しくは

I want to be fluent in English. I've always admired it.

so I'm trying to write my thoughts in English.

But even when I try to translate my Japanese thoughts into English in my head, I realize I can't figure it out at all and it makes me want to cry.

I should've studied English when I was around 20 and doing nothing with my life.

If only I had started then...