![[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ](/images/uploads/javascript-webxr-basic-character-move.webp)
[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ
WebXR環境でキャラクターを移動・回転させるための最小コード構成（playerRig・移動・回転・AnimationLoop）をシンプルにまとめた記録。
ARCHIVE_INDEX / PAGE_21
TOTAL_ITEMS: 582
![[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ](https://assets.lain-lab.com/images/uploads/javascript-threejs-video-texture-custom.webp)
[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ
Three.jsでVideoTextureを使い、サイズ調整やUV操作、色補正、3D形状への貼り付け、ShaderMaterialによるエフェクト加工など、動画表示をカスタムするためのテクニックをまとめた記事です。
CSS3DRendererの正体と罠 CSS3DRendererとWebGLを組み合わせると何が起きるのか
Three.jsのCSS3DRendererは軽く見えるが、DOMとWebGLを同時に扱うと極端に重くなり、iframeを3D空間に配置するとブラウザがGPU fallbackを引き起こす。実際に遭遇した症状と原因、CSS3DRendererの設計思想、WebGLとの正しい組み合わせ方を解説。
![[JavaScript] Unityで作ったC＃コードをWebブラウザで実行する仕組みとは？](https://assets.lain-lab.com/images/uploads/javascript-unity-csharp-web-execution.webp)
[JavaScript] Unityで作ったC＃コードをWebブラウザで実行する仕組みとは？
Unityで作成したC#コードをWebで動作させるための仕組みを、JavaScriptやWebAssemblyを使ってどのように実現するかを解説します。
![[JavaScript] Three.jsでWebXRを実装 (Meta Quest 2)](https://assets.lain-lab.com/images/uploads/javascript-three-js-vr-oculus-quest-2-implementation.webp)
[JavaScript] Three.jsでWebXRを実装 (Meta Quest 2)
Three.jsを使ってVR環境を作成し、Meta Quest 2でのVRゲームを実装する方法をステップバイステップで解説。VRモードのカメラ制御やコントローラー入力処理の実装を学びましょう。
![[JavaScript] 魔法陣の回転追従とアニメーション実装](https://assets.lain-lab.com/images/uploads/javascript-magic-circle-rotation-animation.webp)
[JavaScript] 魔法陣の回転追従とアニメーション実装
Three.jsを使用して、キャラクターの周りを回転する魔法陣のアニメーションを実装しました。魔法陣は回転しながら、点滅エフェクトも加わり、視覚的に魅力的な演出が可能です。
![[JavaScript] Three.jsとBlenderの色空間不一致を解消する方法](https://assets.lain-lab.com/images/uploads/javascript-threejs-model-brightness-issue.webp)
[JavaScript] Three.jsとBlenderの色空間不一致を解消する方法
BlenderからエクスポートしたモデルがThree.jsで正しく明るさが反映されない場合の原因とその修正方法を紹介します。色空間の不一致、`Emission`設定、`Metallic`と`Roughness`の調整方法について説明します。
![[JavaScript] Three.js で KHR_materials_pbrSpecularGlossiness の解消方法](https://assets.lain-lab.com/images/uploads/javascript-threejs-khr-materials-pbrspecularglossiness.webp)
[JavaScript] Three.js で KHR_materials_pbrSpecularGlossiness の解消方法
three.js で表示される「KHR_materials_pbrSpecularGlossiness」の警告は、`Specular Glossiness` モードを `Metallic/Roughness` モードに変換することで解決できます。本記事ではBlenderを使った変換方法と、警告回避のポイントを紹介します。
![[JavaScript] Three.jsでメテオストライクの実装とエフェクト追加](https://assets.lain-lab.com/images/uploads/javascript-meteor-strike-implementation.webp)
[JavaScript] Three.jsでメテオストライクの実装とエフェクト追加
メテオストライクのテクスチャ作成、落下エフェクト、発光効果などを組み合わせて、リアルなメテオストライクを実現する方法について解説します。
![[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で作成し、リアルな動きとエフェクトを加える方法をステップバイステップで学びます。