12/2

日記

2025/12/02

Three.js

EnvMap

hdrで環境マップ作るときは、RGBELoaderを使う。

RGBELoaderは非推奨でした。HDRLoaderを使います。

const loader = new HDRLoader();
const envMap = await loader.loadAsync("/enviromentMaps/2k.hdr");
envMap.mapping = THREE.EquirectangularReflectionMapping;
this.scene.environment = envMap;
this.scene.background = envMap;

6面画像で環境マップ作るときは、CubeTextureLoaderを使う

const environmentMap = cubeTextureLoader.load([
    '/environmentMaps/0/px.png',
    '/environmentMaps/0/nx.png',
    '/environmentMaps/0/py.png',
    '/environmentMaps/0/ny.png',
    '/environmentMaps/0/pz.png',
    '/environmentMaps/0/nz.png'
]);
scene.backgroundBlurriness = 0.2 // ぼかし
scene.backgroundIntensity = 5 // 背景の明るさ
scene.backgroundRotation.x = 1
scene.environmentRotation.x = 2 // 環境と背景を回転することもできる

レイヤー

カメラでレイヤーを1や2に設定すると、同じ1,2をもつオブジェクトしか見ない。

レイキャストとかにもレイヤーあったな

流体シミュレーション

全コード最後までいったんだけどね。。うまく動かなかった。。まあ、実力に見合ったところからやれっちゅう話ですな。。

Next.js ブログ 検索機能実装

URLエンコードされた文字列を通常の文字列に戻す

URLエンコード＝パーセントエンコーディング URLで使えない文字をエンコードするやつ

prismaで検索する時、%20見たいなのがあっても困るので、組み込みオブジェクトであるdecodeURIComponent(string)でデコードする。

全角スペースを半角スペースに置換する

decodedString.replace(/[\s　]/g, " ").trim();

正規表現についてちょっとおさらい

  • /abc/ は "abc" にマッチ
  • /[abc]/は"a"または"b"または"c"にマッチ
  • \sは半角スペース、タブ、改行にマッチ
  • gをつけると最初だけでなく全部置換する

prismaのORやAND条件で検索

  • OR: [{ title: { contains: word } }, { content: { contains: word } }]
    これで、titleにwordが含まれているまたは、contentにwordが含まれているとなる。
  • AND: [ { title: { contains: word } }, { content: { contains: word } } ]
    これで、titleにwordが含まれているかつ、contentにwordが含まれているとなる。
export async function searchPosts(search: string) {
 const decodedSearch = decodeURIComponent(search);
 const normalizedSearch = decodedSearch.replace(/[\s　]/g, " ").trim();
 const searchWords = normalizedSearch.split(" ").filter(Boolean);

 const filters = searchWords.map((word) => ({
  OR: [{ title: { contains: word } }, { content: { contains: word } }],
 }));

 return await prisma.post.findMany({
  where: {
   AND: filters,
  },
  include: {
   author: {
    select: {
     name: true,
    },
   },
  },
  orderBy: {
   createdAt: "desc",
  },
 });
}

useEffectのクリーンアップ関数について

ちょっとわかっていなかった。

useEffectは再実行される前に前回の処理を片付けるための関数を返せる。←クリーンアップ関数

つまり、useEffectが再実行される前に、必ずクリーンアップ関数が呼ばれる。

なので、setTimeoutとデバウンスを使う際、if文で先頭に[timerがあったらclearTimeoutする処理]を書かず、クリーンアップ関数で書く。

感想

やばい、Three.js Journeyのdiscordが一番three.jsの練習にもなるしソースコードも溢れているし素晴らしいことにやっと気づいた。まじでThree.jsって勉強できることたくさんある。。。

この間初めて買ったアロマディフューザー、最初は夜だけ開けてリラックスできたらなと思っていたんだけど、
ずっと開けて放置していても2ヶ月くらいは持つらしい。もっと減るもんだと思ってた。
いい匂いだけど、たまに嗅ぐからいいのでは？

The other day, I bought my first aroma diffuser. At first, I thought I'd use it only at night to relax,
but apparently it lasts about two months even if you leave it open all the time. I thought it would run out much faster.
It smells nice, but maybe it's good because I only smell it occasionally.