すべてのカテゴリ

私は、glTF2.0のJSONを編集できるVSCODEの拡張機能でglTF TOOLというものを知りました。この拡張機能は、GLB形式のファイルをインポートして、glTFの拡張子のファイルに書き出すことが出来ます。書き出したら、ファイルの編集ができます。そして、ビューアーを使って確認も出来ます。予めインポートしたいGLB形式のファイルがあるフォルダを指定してください。インポートしたいGLBファイルを選択して、右クリックすると、メニューの下から2つ目にインポートの項目が出ると思います。これを選択すると、バイナリーのファイルを読み込んで、テキストに変換して書き出してくれます。ファイル保存の画面が表示れますので、それに従って進めて下さい。そして編集したテキストファイルをGLB形式でエクスポートしたいときは、glTFのファイルを選択して右クリックすると、下から2つ目にエクスポートの項目があります。これを選択すると、GLB形式で書き出すことが出来ます。とても簡単ですが、glTF TOOLでGLB形式のファイルのインポートとエクスポートの方法をご紹介しました。

今回は、React Three FiberとGLBモデルを使って、 Webページ上に「幻想的な花の3D背景」と「スクロール連動アニメーション」を取り入れた `Story` ページの作り方を紹介します。 この記事では、以下のような表現を実装していきます。  背景に3種類の花GLBモデルをランダムに配置  花がゆらゆらと回転しながら舞う演出  セクションがスクロールに応じてふわっと出現  GSAPによるアニメーションとThree.jsの融合 ポートフォリオや作品紹介サイトに使える、視覚的に美しい演出です。 使用ライブラリReact 18 / Next.js 13 react-threefiber（Three.jsのReactラッパー）  react-threedrei（補助ツール）  GSAP（アニメーション制御）💠 Step1: 花モデルをランダム配置する背景コンポーネントFlowersBackground.tsxconst flowerModels = [  '/models/flower1.glb',  '/models/flower2.glb',  '/models/flower3.glb',]const Flower = ({ url, position }) => {  const { scene } = useGLTF(url)  const ref = useRef()  useFrame(({ clock }) => {    if (ref.current) {      ref.current.rotation.y = Math.sin(clock

今回は現在私が制作しているNext.jsのポートフォリオサイト制作に使われている主要技術とこれからの設計についてお話していきます。 この記事を読むことでNext.jsを学習してみたいやプログラミングの学習の参考にもなりますので最後まで読んでみてくださいね。 🧱 使用した主な技術と目的 技術用途Next.js　ルーティングやビルドが楽なReactベースのフレームワーク。SEO対策にも強い。 Three.js / React Three Fiber3Dモデルやアニメーションの描画をJSで制御。Three.jsのReact版。 DreiReact Three Fiberの補助ライブラリ。 Text, OrbitControls, useGLTFなどの便利なコンポーネントが揃っている。 GLBモデル　蝶やカーソル、アクセサリーなどの3Dモデルを表示。 CSS Modules / グラデ背景module.cssで自然な色合いの背景を設定。ページ全体のトーンを統一。 dynamic importクライアントサイドのみでThree.jsを動かすためのssr: false設定。 🦋 実装した機能と解説 1. 回転するメインモデル（main.glb） useFrame(() => { if (ref.current) { ref.current.rotation.y += 0.01 } }) copy 🔁 useFrame を使って、フレームごとにメインモデルを回転させています。 2. 公転するサブモデル（small.glb） const angle = (index / total) *