![[JavaScript] 魔法陣と月のエフェクトをThree.jsを使って実装](https://assets.lain-lab.com/images/uploads/javascript-magic-circle-and-moon-effect-in-threejs.webp)
[JavaScript] 魔法陣と月のエフェクトをThree.jsを使って実装
Three.jsの基本を使用し、魔法陣の回転アニメーションと月の光源を設定してリアルなエフェクトを作成する方法を学びます。
ARCHIVE_INDEX / PAGE_22
TOTAL_ITEMS: 582
![[JavaScript] Three.js における複数のライトとスポットライトの実装方法](https://assets.lain-lab.com/images/uploads/javascript-light-spotlight-implementation.webp)
[JavaScript] Three.js における複数のライトとスポットライトの実装方法
Three.jsでスポットライトを使用し、シーンにダイナミックな照明を追加する方法について解説。スポットライトの基本設定、ターゲット、影の設定などを学べます。
![[JavaScript] スタックトレースを活用したデバッグ方法とその理解](https://assets.lain-lab.com/images/uploads/javascript-stack-trace-debugging.webp)
[JavaScript] スタックトレースを活用したデバッグ方法とその理解
スタックトレースを利用して、エラー発生箇所や非同期処理のデバッグを効率化する方法を学びます。実践的な例も紹介。
![[数学] 線形代数と3D空間における行列の役割](https://assets.lain-lab.com/images/uploads/math-linear-algebra-3d-matrices.webp)
[数学] 線形代数と3D空間における行列の役割
3Dプログラミングには不可欠な行列の基本的な使い方と、カメラの変換について解説します。線形代数を学ぶ上で必要な基礎を押さえ、3D空間での座標変換を理解しましょう。
![[JavaScript] Three.jsでのテクスチャ管理とアニメーション制御](https://assets.lain-lab.com/images/uploads/javascript-three-js-texture-animation.webp)
[JavaScript] Three.jsでのテクスチャ管理とアニメーション制御
この記事では、Three.jsでのキューブマップやスフェリカルマップの設定、オブジェクトの回転、アニメーションの管理などを実際のコードを交えて解説します。
![[JavaScript] Three.jsでGLBの作成と読み込み、アニメーション処理の実装方法](https://assets.lain-lab.com/images/uploads/javascript-glb-creation-loading-animation.webp)
[JavaScript] Three.jsでGLBの作成と読み込み、アニメーション処理の実装方法
Three.jsを使ってGLB形式の3Dキャラクターを作成、読み込み、アニメーションを追加する方法を紹介。さらに、カメラの向きに合わせたキャラクターの移動処理も解説。
![[JavaScript] Three.jsを使った3Dキャラクター移動と衝突判定の実装方法](https://assets.lain-lab.com/images/uploads/javascript-threejs-character-movement-collision.webp)
[JavaScript] Three.jsを使った3Dキャラクター移動と衝突判定の実装方法
Three.jsでのキャラクターの移動、衝突判定、反発処理を実装する方法を詳細に解説します。先読み処理による壁のめり込み回避も紹介。
![[JavaScript] Three.js Snippets 完全ガイド - 効率的な開発を加速するVSCode拡張](https://assets.lain-lab.com/images/uploads/javascript-threejs-snippets-guide.webp)
[JavaScript] Three.js Snippets 完全ガイド - 効率的な開発を加速するVSCode拡張
Three.jsの開発を効率化するために役立つ「Three.JS Snippets」の使い方、特徴、インストール方法について詳しく解説します。React Three Fiber (R3F)にも対応！
![[JavaScript] Three.jsを使った3Dゲーム開発の基本: カメラ制御と衝突判定](https://assets.lain-lab.com/images/uploads/javascript-threejs-3d-game-development.webp)
[JavaScript] Three.jsを使った3Dゲーム開発の基本: カメラ制御と衝突判定
Three.jsを用いた3Dゲーム開発の基本。カメラの回転、プレイヤーキャラクターの移動、弾の発射、衝突判定を実装し、ゲームとして機能させる方法を紹介します。
![[JavaScript] ブロック崩しは作っていいのか？「PONG」「Breakout」からアルカノイド、そしてオリジナルへ](https://assets.lain-lab.com/images/uploads/brick-breakout-homage-original-legal-tetris.webp)
[JavaScript] ブロック崩しは作っていいのか？「PONG」「Breakout」からアルカノイド、そしてオリジナルへ
ブロック崩しの起源（PONG/Breakout）とアルカノイドの位置づけを整理し、ゲームのルールと表現の違い、テトリスが著作権問題になりやすい背景、オリジナルとして成立させるための注意点を実装者目線で解説する。
![[JavaScript] HTML5 Canvasで作るボスバトル：楕円当たり判定と弾幕処理](https://assets.lain-lab.com/images/uploads/javascript-html5-canvas-boss-battle-ellipse-hitbox-bullet-hell.webp)
[JavaScript] HTML5 Canvasで作るボスバトル：楕円当たり判定と弾幕処理
HTML5 Canvasを使ったボスバトルの実装まとめ。楕円の当たり判定や弾幕処理、HPゲージ、フェードイン演出、反射処理、撃破判定など、ゲームとしての要素が一気に揃った1日の記録。
![[JavaScript] イージング処理の実装と三角関数を使った動きの滑らかさ](https://assets.lain-lab.com/images/uploads/javascript-easing-functions-and-trigonometric-movements.webp)
[JavaScript] イージング処理の実装と三角関数を使った動きの滑らかさ
ゲームやアニメーションで使えるイージング処理のパターンを、線形、イーズイン・イーズアウト、三角関数を使った方法を交えて説明します。