モーダルを開く 2025-10-11 Three.js Blender で作成した 3D モデルをブラウザ上で動かす モーダルを閉じる Blender で作成した 3D モデルをブラウザ上で動かす Three.js WebGL Blender Blender で作成した 3D モデルを Three.js を用いてブラウザ上で読み込み、インタラクションを加えて動かす練習を行った。Demo: https://koji014-laptop.vercel.app天板部（液晶ディスプレイを除く）をクリックすると、PC が開閉する電源ボタンをクリックすると、PC の電源が ON になる 参考 Web Designing 2025年6月号
モーダルを開く 2025-05-09 WebGL WebGL オブジェクトと DOM 要素の位置同期ずれを防ぐ モーダルを閉じる WebGL オブジェクトと DOM 要素の位置同期ずれを防ぐ WebGL GLSL WebGL オブジェクトと DOM 要素の位置を同期した際、モバイルデバイスのネイティブスクロールで両者の位置がずれることがある。2025年4月4日に Lusion が公表した投稿によると、Canvas を ページコンテンツに追従させ、Canvas の位置を translateY で補正することで、このずれを解消できるという。この効果を確認すべく、デモを作成した。なお、この方法を理解する上で、長谷川巧さん（@_unshift）の図解を大いに参考にした。Demo: https://koji014-webgl-scroll-sync.vercel.app以下、上から順に（1）固定していない状態、（2）固定して Padding をつけていない状態、（3）固定して Padding をつけた状態。（2）の Padding をつけない場合、上へ戻ろうとする際に Canvas が見切れている（画像の表示が欠けている）ことがわかる。（3）では Padding をつけることで、これが改善されている。 参考 “Solution” to Connect WebGL Visuals to Multiple DOM Elements with One Canvas - Without Scroll-Jacking 長谷川巧さんの図解
モーダルを開く 2025-04-21 WebGL 非同期遷移を介した DOM と板ポリゴンの再同期 モーダルを閉じる 非同期遷移を介した DOM と板ポリゴンの再同期 WebGL GLSL 同期していた DOM と板ポリゴンの関係を非同期遷移前に破棄し、遷移後に再び同期する。
モーダルを開く 2025-04-16 WebGL DOM と板ポリゴンを同期する モーダルを閉じる DOM と板ポリゴンを同期する WebGL GLSL WebGL School プラスワン講義回で Taro Yoshimura さん（@ysmrt6）が解説した内容を参考に、Three.js を使わずに実装した。Demo: https://koji014-dom-gl-sync.vercel.app 参考 WebGL School 2024 プラスワン講義回 Taro Yoshimura さんの Three.js を用いた実装