すべてのカテゴリ

ReactとThree.jsを使って、幻想的でフェアリーな雰囲気を持つ3Dシーンのホームページを作成しました。このプロジェクトでは、環境構築から始まり、Three.jsの設定、さらに3Dモデリングまでを体験しながら進めました。背景に美しいグラデーションを設定し、蝶や花びらなどのモデルをランダムに配置して、動きのある魅力的な世界を作り上げました。ブログでは、実装の詳細だけでなく、プロジェクトを進める上での課題や、それを解決するためのプロセスも共有します。初心者の方にもわかりやすいように、環境構築手順やモデリングツールの選定、コードのポイントなども丁寧に説明しています。このブログを通じて、あなただけのオリジナル3Dホームページを作るヒントをつかんでください！

Three.jsで3Dモデルを表示！Meshyで作ったGLBをWebに組み込む方法最近話題の3Dモデル生成ツール「Meshy」を使って作成したGLBファイルを、Three.jsでWeb上に表示する方法を紹介します。Web制作初心者でも、HTML/CSS/JSの3ファイルで簡単に表示できます。🧾 用意するものMeshyで生成した .glb モデル（例：fantasy.glb）HTML/CSS/JavaScriptの3ファイルThree.js（ES Modules版）🧱 ファイル構成project/├── index.html├── style.css├── script.js└── assets/    └── fantasy.glb💡 ポイント解説✅ モジュール形式（ES Modules）でThree.jsを読み込むThree.jsはr150以降、従来の three.min.js は非推奨に。そのため、以下のようにモジュール形式で読み込みます：<script type="module" src="script.js"></script>✅ script.jsの構成Three.js本体、OrbitControls、GLTFLoaderを読み込むWebGLレンダラーを初期化カメラとライトを設置fantasy.glbを読み込んでシーンに追加アニメーションループで回転＋操作可能に🧪 実行結果ブラウザ上でキャラクターが自動回転マウスで拡大・回転も自由自在GLBファイル1つで超軽量＆高精度な3D表示！✍️ まとめThree.jsとMeshyを組み合わせることで、誰で

こんにちは。 今回は Three.jsを使った「パフェの盛り付けアニメーション」 の実装を、ココナラのブログとしてご紹介します。実はこのパフェ、以前ブログで紹介した 「ハンバーガーを積み上げるアニメーション」 のシリーズ作品です。 「食べ物 × 3D × アニメーション」というテーマで、 見て楽しい・触って楽しいWeb表現 を目指しています。記事の最後には Short動画（見本デモ） も掲載しているので、 まずは動きを見てから読んでもらえる構成にしています。🍔 前回のハンバーガー積み上げアニメとの違い前回は、バンズパティレタスチーズといった具材を 上から順に積み上げる構成 でした。今回のパフェでは、そこから一歩進んで、グラスの中に具材を「落とす」高さ・位置・順番を調整できる盛り付けられていく過程を楽しめるという より“盛り付け感”のある表現 にしています。🍓 今回のパフェ盛り付けアニメの特徴① 具材ごとに位置を個別調整できるJavaScript側で、以下のように具材を配列管理しています。const items = [  { file: "parfait_glass.glb", x: 0, y: 0, z: 0 },  { file: "strawberry.glb", x: 0, y: 0.3, z: 0 },  { file: "icecream.glb", x: 0, y: 0.6, z: 0 }];あとから高さを変えたい横にずらしたい順番を変えたいといった調整が 数値を変えるだけで可能 です。② アニメーション付きで順番に表示具材は一気に表示せず、下の具材から順に上から落

Three.jsで煙のようなエフェクトを作る方法｜ゆらぎの仕組みを解説こんにちは。今回はThree.jsで「煙のようにゆらゆら動くエフェクト」の作り方を解説します。一見するとかなり高度な表現に見えますが、実はやっていることはとてもシンプルです。結論：煙の正体は「波」ですこのような煙エフェクトは、実は物理シミュレーションではありません。正体はこれです👇sin（サイン波）cos（コサイン波）時間（uTime）位置（pos）これらを組み合わせて「それっぽく動かしているだけ」です。基本の考え方まず、ゆらぎの最小形はこれです。pos.x += sin(uTime) * 0.2;これだけで左右に揺れます。でもこれだと全部が同じ動きなので不自然です。煙っぽくするコツ①：位置を混ぜるpos.x += sin(uTime + pos.y * 2.0) * 0.2;こうすると上の粒と下の粒で動きがズレる全体が「うねる」ようになります。これが煙っぽさの第一歩です。煙っぽくするコツ②：波を重ねるpos.x += sin(uTime + pos.y * 2.0) * 0.2;pos.x += cos(uTime * 0.7 + pos.y * 4.0) * 0.1;ポイントは周期が違う強さが違う波を重ねることで、単純な揺れではなく「複雑な流れ」に見えます。煙っぽくするコツ③：立体的にするpos.z += sin(uTime * 1.2 + pos.x * 3.0) * 0.1;これで奥行き方向にも揺れが出ます。→ 一気に「ただのアニメーション」から「空間的な煙」になります煙っぽくするコツ④：個体差をつけ

はじめにThree.jsでGLBモデルを使った演出を作っていると、「元の色・テクスチャが消えた」「Shaderを使ったら全部真っ白になった」「動かしたいのは形だけなのに見た目が壊れる」という壁に必ずぶつかります。今回は、GLBの見た目を一切壊さずに「たれ感のある動き」だけを追加する方法を実際にハマった失敗も含めて解説します。やりたかったことparfaitの sauce.glb だけ に垂れているような「ゆらゆら動く演出」を入れたい元の色・テクスチャ・ライティングはそのままよくある失敗最初にやりがちなのがこれ👇obj.material = new THREE.ShaderMaterial(...)これをやると…GLBに設定されたベースカラーテクスチャライティング情報👉 すべて消える結果、「動くけど真っ白なモデル」 になります。正解アプローチShaderMaterialに置き換えないThree.jsには便利な仕組みがあります。onBeforeCompileこれを使うと「元のマテリアルに、少しだけShaderを足す」 ことができます。実装コード（最小構成）① たれ演出を追加する関数function enableSauceDrip(material) {  material.onBeforeCompile = (shader) => {    shader.uniforms.uTime = { value: 0 };    shader.vertexShader = shader.vertexShader.replace(      '#include <begin_ver

Three.jsを使って、3D食品モデルが 「下から順番に盛り付けられて完成する」 アニメーション演出を実装しました。 今回のサンプルは、パフェを題材にした ・グラス ・アイス ・ホイップ ・ソース ・フルーツ といった複数のGLBモデルを、 時間差で自然に積み上げていく演出です。 ▼ 実装のポイント ・GLB形式の3Dモデルに対応 ・具材ごとに「出現位置」「最終位置」「動きの速さ」を個別に調整可能 ・下から積む／横から乗せる／上から垂らすなど演出を変更可能 ・Web（Three.js）上でそのまま再生可能 特に「食品サンプル系3D」は、 静止画だけだと魅力が伝わりづらいですが、 完成していく過程をアニメーションで見せることで、 より“美味しそう”“目を引く”表現が可能になります。 ▼ こんな用途におすすめ ・WebサイトやLPのキービジュアル ・ECサイトの商品演出 ・デジタルメニュー／サイネージ ・SNS・動画広告用の3D演出 ・NFT／3D素材販売用デモ動画 現在、 ・お手持ちのGLBモデルを使ったアニメーション実装 ・3D食品モデル＋盛り付け演出のセット制作 どちらも対応可能です。 「こんな動きはできる？」「この料理でも可能？」 など、相談ベースでもお気軽にご連絡ください。

はじめに今回は Three.js を使って、ブラウザ上で遊べる 3D ピンボールゲームを作りました。ボールがフリッパーや障害物（バンパー）に当たって跳ね返る仕組みも実装しています。フリッパー操作：左右の矢印キーで操作ボール挙動：重力、跳ね返り、バンパー反射障害物配置：三角形配置で自然な弾き方実装のポイント1. Three.jsの基本セットアップconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(...);const renderer = new THREE.WebGLRenderer({ canvas });Scene：3D空間Camera：視点Renderer：描画担当2. 台と壁の作成const boardGeo = new THREE.BoxGeometry(12,0.5,20);const board = new THREE.Mesh(boardGeo, boardMat);scene.add(board);ボールが落ちないように枠（Boundary）を設置壁に当たると速度を反転させることで跳ね返りを実現3. ボールの物理処理let velocity = { x: 0, y: -0.02, z: 0.05 };ball.position.x += velocity.x;ball.position.y += velocity.y;ball.position.z += velocity.z;velocity を管理してX/Y/Z方向に動かす重力や壁との衝突で反転、バンパーやフリ

こんにちは！今回は Three.js と Shader（GLSL） を使って、まるで本物の水のように光がゆらめくアニメーションを実装してみました。WebサイトやLPで“印象に残る演出”を作りたい方には、こうしたShaderを活用したエフェクトがとてもおすすめです。💡 実装のポイントこのアニメーションは、HTML / CSS / JavaScript だけで動作するWebGLシェーダーを利用しています。具体的には：Three.js で描画領域（Plane）を作成フラグメントシェーダー内で波の干渉を再現sin関数を使って光の模様を時間で変化白と青のトーンを重ねて水面の反射を表現// 光の強さと色の合成部分float light = pow(abs(w), 2.5);light = smoothstep(0.4, 0.9, light);vec3 water = vec3(0.0, 0.35, 0.65); // 水の青vec3 caustic = vec3(1.0); // 光の反射vec3 color = mix(water, caustic, light);このわずか数行で、水に反射する光の「まだら模様」がリアルに再現されます✨🌀 表現の工夫波紋が自然に見えるように、複数方向の波を干渉させる時間(u_time) によって動きが絶えず変化白い光の量を抑えて、より落ち着いた深みのある水色に調整見た目以上にロジックはシンプルで、少しの数式でリアルな自然表現を実現できるのがShaderの魅力です。💻 応用例このようなShaderエフェクトは、Webサイトのヒーローヘ

Javascriptのライブラリ、フレームワークにReact、Next.jsがありますがそれぞれ関数を効率よく機能させるために使うhooksがありますよね？今回は自分にとっても学習と参考用までに使い方を解説してみます。🔁 フック（Hooks）とは？Reactの機能で、コンポーネント内で状態（state）を使う → useStateライフサイクル処理 → useEffectアニメーションや座標更新など → useFrame（React Three Fiber）モデルの読み込み → useGLTF（drei）などを使うときに「フック」として書きます。✅ フックを書く場所（大原則）function MyComponent() {  // ✅ OK：関数の最上部に書く  const [count, setCount] = useState(0)  // ❌ NG：if 文やループの中では使えない  if (count > 0) {    // useState() ←ここに書いたらエラー！  }  return <button onClick={() => setCount(count + 1)}>+</button>}🧠 なぜ関数の中に書くの？Reactは「フックの呼び出し順」によって状態を管理しています。そのため、必ず「関数コンポーネントのトップレベル（直下）」に書く必要があります。🦋 たとえばさっきの例：function FlyingButterfly({ seed = 0 }) {  const ref = useRef()  const {

こんにちは！今回はThree.jsを使って、銀河系をテーマにしたサイトを作成している過程をお伝えします。宇宙を感じるサイトを目指し、GLBモデルの配置やカメラ設定、ライトの使い方に加え、アニメーション、音楽、効果音を取り入れる方法をご紹介します。1. GLBモデルの配置とカメラ・ライト設定まず、銀河系の中心となる惑星や星々を表現するために、GLB形式の3DモデルをThree.jsに挿入しました。これらのモデルを適切に配置するために、THREE.GLTFLoaderを使い、カメラを回転させて、ユーザーが360度自由に見渡せるように設定しています。ライトの配置にも工夫をして、宇宙空間らしい暗闇の中で星々が光る効果を作り上げました。2. GLBモデルの回転アニメーション次に、挿入したGLBモデルに回転アニメーションを加えました。これにより、宇宙空間でモデルが自転しているような動きを実現し、よりリアルな表現が可能になります。回転速度や方向を調整して、視覚的なインパクトを与えるような演出にしています。3. 音楽と効果音で宇宙感を演出サイトに宇宙らしい雰囲気を出すため、バックグラウンドミュージックとして壮大なオーケストラ音楽を取り入れ、惑星が近づくたびに効果音が鳴るようにしました。これにより、訪問者はまるで宇宙旅行をしているかのような気分に浸ることができます。4. サイト全体のデザインと構成全体的には、シンプルで洗練されたデザインに仕上げています。星々が瞬く背景や、モデルが浮かぶ広大な宇宙空間を感じさせるレイアウトで、ユーザーが視覚的にも楽しめるように工夫しています。今回はThree.js

今回は、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) *

高速なレンダリングやその更新の速さからUI向けに設計されたReactとNext.js。大規模な開発案件はもちろん、アプリ、ホームページ、LPでもこれから紹介するこれらの技術は皆さんの役にたてる可能性がありますので順に紹介していきます。✅ 1. next/image で高速かつ最適な画像表示 用途: 背景画像・サムネイル・テクスチャ画像など メリット 自動で最適サイズに圧縮 WebPにも対応 ローディングの遅延表示も可能 import Image from 'next/image' <Image src="/images/background.jpg" alt="背景" width={800} height={600} /> ✅ 2. Dynamic ImportでThree.jsの描画を遅延ロード 用途: 重たいGLBモデルや3Dコンポーネントを後で表示したいとき メリット: 初期表示が速くなる import dynamic from 'next/dynamic' const ModelViewer = dynamic(() => import('../components/ModelViewer'), { ssr: false }) ✅ 3. API Routes でサーバー処理も一体に 用途: 例えばGLBモデルをアップロードしてサーバーで保存、など 実装例: /pages/api/upload.ts export default function handler(req, res) {   if (req.method === 'POST') {  

Webで宇宙を感じることができたら素敵ですよね！今回は、Three.jsを使って銀河系を再現し、ユーザーがインタラクティブに探索できるWebサイトを作成する方法をご紹介します。1. Three.jsとは？Three.jsは、WebGLを簡単に使えるようにしたJavaScriptライブラリで、3DグラフィックスをWebブラウザ上で表示することができます。これを使えば、ブラウザ上で複雑な3Dシーンを作成できるため、ゲームやインタラクティブな体験が可能になります。2. 銀河系のモデル作成まずは、銀河系の構造を作成しましょう。銀河系は、数千億もの星が集まった大きな渦巻き構造を持っています。Three.jsを使って、星をランダムに配置し、それらが渦巻き状に回転するアニメーションを加えることで、リアルな銀河系のイメージを作成できます。3. ユーザーインタラクションユーザーがマウスやキーボードでカメラを操作できるように設定しましょう。これにより、ユーザーは自由に銀河系を周回したり、特定の星や惑星にズームインしたりすることができます。インタラクティブな要素を加えることで、より没入感のある体験が提供できます。4. 宇宙背景の作成背景に広がる宇宙を、星々が無限に広がっているようなイメージで作成しましょう。Three.jsでは、スカイボックスを使用して宇宙の背景を作ることができ、非常にリアルな雰囲気を演出できます。5. 最後にこれらの要素を組み合わせることで、インタラクティブに探索できる銀河系のWebサイトが完成します。Three.jsを使えば、驚くほどリアルで美しい宇宙の世界をWeb上で表現できま