360°画像
【JavaScript】three.jsで360°画像＋GLTF＋影を表示する
2025年3月20日
本記事では、three.jsを使用して360度背景画像とGLTFモデルを表示し、さらに影をリアルに描画する方法を解説します。OrbitControlsによるカメラ操作、DirectionalLightによる影の設定、GLTFモデルの読み込みと影の適用など、基本的なテクニックを紹介。マウスホイールでのズームやウィンドウリサイズ対応も実装しています。初心者から中級者向けに、実践的なサンプルコード付きで詳しく解説！
【JavaScript】three.jsで360°画像を表示する
2025年3月19日
three.jsを使用して360°画像をブラウザ上で表示する方法を解説します。モジュール形式での実装方法として、importmapを使ってCDNからthree.jsとOrbitControlsを読み込み、シーンを設定して360°画像を球体にマッピングします。さらに、OrbitControlsで画像をドラッグして回転させる機能を追加し、インタラクティブな表示が可能です。これにより、ユーザーはブラウザで簡単に360°画像を楽しむことができます。