![[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）](https://assets.lain-lab.com/images/uploads/javascript-threejs-character-dialogue-sprite.webp){kind=icon}
[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）
Three.jsでCanvasTextureとSpriteを使い、VR/PC両対応でキャラクターの頭上にセリフを表示する方法を解説します。改行対応や簡単な装飾、データ駆動の設計についても触れます。
ARCHIVE_INDEX / PAGE_31
TOTAL_ITEMS: 702
![[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）](https://assets.lain-lab.com/images/uploads/javascript-vr-collision-detection-threejs-webxr.webp)
[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）
VRではなぜ衝突判定が直感通りにいかないのか。Three.jsとWebXRを使ったVR開発において、playerRig基準の衝突判定設計、ルームスケール移動との関係、Box3とMatrix4の正しい使い分けを実装ベースで解説する。
![[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-raycaster-ui-button.webp)
[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）
Three.jsのWebXRでVRコントローラのレーザーポインタを表示し、RaycasterでUIボタン（Plane）へ当たり判定を行い、トリガー入力でonClickを発火させる実装を解説。レイ方向の毎フレーム更新（matrixWorld→origin/direction）とinputSources/gamepad入力の取得方法、よくある落とし穴もまとめる。
![[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む](https://assets.lain-lab.com/images/uploads/javascript-threejs-vector3-complete-guide.webp)
[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む
Three.jsにおけるVector3は、座標・方向・速度・力・法線など、3D空間を扱うすべての計算の中心にある。本記事では、Vector3の基礎から応用、便利な使い方、ハマりがちな罠まで体系的にまとめます。
![[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ](https://assets.lain-lab.com/images/uploads/javascript-webxr-basic-character-move.webp)
[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ
WebXR環境でキャラクターを移動・回転させるための最小コード構成（playerRig・移動・回転・AnimationLoop）をシンプルにまとめた記録。
![[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を使った変換方法と、警告回避のポイントを紹介します。