![[JavaScript] Three.jsでメテオストライクの実装とエフェクト追加](https://assets.lain-lab.com/images/uploads/javascript-meteor-strike-implementation.webp)
[JavaScript] Three.jsでメテオストライクの実装とエフェクト追加
メテオストライクのテクスチャ作成、落下エフェクト、発光効果などを組み合わせて、リアルなメテオストライクを実現する方法について解説します。
ARCHIVE_INDEX / PAGE_32
TOTAL_ITEMS: 702
![[JavaScript] Three.jsで キャラクターの自動散歩と衝突判定の実装](https://assets.lain-lab.com/images/uploads/javascript-character-auto-walk-and-collision-detection.webp)
[JavaScript] Three.jsで キャラクターの自動散歩と衝突判定の実装
本記事では、Three.jsを使用して、キャラクターが指定された経路を自動で歩き、衝突判定を行う仕組みを実装する方法を紹介します。
![[JavaScript] Three.jsで 雪、雨、クリスマスツリーと、点滅するライトを実装](https://assets.lain-lab.com/images/uploads/javascript-create-christmas-scene-with-threejs.webp)
[JavaScript] Three.jsで 雪、雨、クリスマスツリーと、点滅するライトを実装
このチュートリアルでは、Three.jsを使って雪、雨、クリスマスツリー、点滅するライトを作り、クリスマスの雰囲気を出す方法を解説します。
![[JavaScript] Three.jsで地球と月のミニチュアを実装](https://assets.lain-lab.com/images/uploads/javascript-creating-miniature-earth-and-moon.webp)
[JavaScript] Three.jsで地球と月のミニチュアを実装
地球と月の模型をThree.jsで作成し、リアルな動きとエフェクトを加える方法をステップバイステップで学びます。
![[JavaScript] 魔法陣と月のエフェクトをThree.jsを使って実装](https://assets.lain-lab.com/images/uploads/javascript-magic-circle-and-moon-effect-in-threejs.webp)
[JavaScript] 魔法陣と月のエフェクトをThree.jsを使って実装
Three.jsの基本を使用し、魔法陣の回転アニメーションと月の光源を設定してリアルなエフェクトを作成する方法を学びます。
![[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)にも対応！