taku– Author –

-
【タイトル】
【導入コメント1】 【導入コメント2】 デモ:【説明】 【でも説明1】 【でも説明2】 【デモ説明3】 技術要素の紹介:このプロジェクトで使うツールとライブラリ 【技術要素の紹介説明1】 【技術要素の紹介説明2】 VSCode:【説明】 Node.js:【説明】 Vite... -
Next.js + React Three Fiber + React Three XR + Variant Launch を使って iOS で WebXR対応のARアプリを開発してみた!
WebXRでARアプリを作ろうと思ったのですが、iOSはWebXRに正式対応していないのが現状です。 そこで、React Three XRの公式でも紹介されていた Variant Launch を使って、iOSでもWebXRのARが動作するように対応してみました。 Does it work on iOS?WebXR fo... -
【超簡単】Coolify × Xserver VPS × Cloudflare で始める最強の自動デプロイ環境構築ガイド
本記事では、VPS 上に Coolify をインストールし、GitHub との連携、自動デプロイ、Cloudflare を使った独自ドメイン + HTTPS 化までを構築する手順をまとめます。 対象読者は次のような方を想定しています: Docker ベースで複数アプリを管理したい GUI ... -
【2025年版】Next.jsホスティング:Vercel 無料プラン vs 有料プラン 徹底比較|機能・制限・料金まとめ
Next.jsアプリのホスティングプラットフォームとして広く使われるVercel。無料プラン(Hobby)でも始めやすい一方、有料プラン(Pro)には大規模開発で欠かせない機能が揃っています。本記事では【2025年版】として、Vercelの無料プラン vs 有料プランを徹... -
【初心者向け】React Three Fiber x Drei x TypeScript入門!画像からピクセルアート&動的アニメーションを作成
最近のWebアプリケーション開発では、グラフィックスを活用してユーザー体験を向上させる取り組みが増えています。React Three Fiber(R3F)を使えば、Reactコンポーネントとして手軽にThree.jsの機能を活用できるため、誰でも簡単に魅力的な表現を実現で... -
【徹底解説】React Three Fiber × TypeScriptで学ぶ!3DオブジェクトのTransform(Position, Rotation, Scale)実践ガイド
3Dアプリ開発で避けて通れないのが オブジェクトの「位置 (Position)」「回転 (Rotation)」「スケール (Scale)」の操作 です。React Three Fiber(R3F)を使えば、React のコンポーネントベースの仕組みを活かしながら、直感的に 3D シーンを構築できます... -
【超簡単】React Three Fiber x Drei x TypeScript入門!標準オブジェクトで作るポケポケ風3D背景!
最近のWebアプリ開発では、3Dグラフィックス を活用するケースが増えてきました。特に、React Three Fiber(R3F) を使えば、React のコンポーネントとして手軽に Three.js を扱うことができます。 今回は、Three.js のラッパーライブラリ Drei も活用しな... -
【超入門】React Three Fiber × Drei × TypeScript!標準オブジェクトで作る3D表現の基本
3Dデザインは、今やゲーム開発だけでなく、ウェブサイトや次世代インターフェースの世界でも大きな注目を集めています。その魅力的な世界を「自分でも作りたい!」と思ったことはありませんか? でも、「3Dって難しそう」と感じる人も多いはず。従来のThre... -
【超入門】初心者でも簡単!ViteでTypeScript x React Three Fiberの3D環境を構築しよう!
最近のウェブでは、インタラクティブで美しい3D表現を目にする機会が増えてきました。例えば、3Dアニメーションの背景やゲーム風のデザイン、さらには次世代のインターフェースまで。これらは、一見すると「高度な技術が必要」と思われがちですが、React T... -
Meshy AIで生成したglb形式の3DモデルをReactとThree.jsで制御!複数アニメーションを管理する方法
3Dモデルのアニメーション制御に興味はありませんか?最近では、AIを活用した3Dモデル生成ツールが増えており、その中でも Meshy AI は、手軽にクオリティの高い3Dモデルを作成できるツールとして注目を集めています。 しかし、生成した3Dモデルを実際のア...