three.js
【JavaScript】three.jsで立方体にテクスチャを貼る。
Webページで動く3Dを作れる「Three.js」。この記事では、初心者向けに、立方体に好きな絵（テクスチャ）を貼り付けてクルクル回す方法を解説します。3D空間の「舞台（シーン）」、見る「視点（カメラ）」、描画する「映写機（レンダラー）」の基本設定からスタート。次に、立方体の「形」と「見た目（テクスチャ）」を作り、ライトで照らしてリアルに。最後にアニメーションで回転させます。ステップごとに学べるので、初めてでも安心！
【JavaScript】three.jsで360°画像＋GLTF＋影を表示する
本記事では、three.jsを使用して360度背景画像とGLTFモデルを表示し、さらに影をリアルに描画する方法を解説します。OrbitControlsによるカメラ操作、DirectionalLightによる影の設定、GLTFモデルの読み込みと影の適用など、基本的なテクニックを紹介。マウスホイールでのズームやウィンドウリサイズ対応も実装しています。初心者から中級者向けに、実践的なサンプルコード付きで詳しく解説！
【JavaScript】three.jsで360°画像を表示する
three.jsを使用して360°画像をブラウザ上で表示する方法を解説します。モジュール形式での実装方法として、importmapを使ってCDNからthree.jsとOrbitControlsを読み込み、シーンを設定して360°画像を球体にマッピングします。さらに、OrbitControlsで画像をドラッグして回転させる機能を追加し、インタラクティブな表示が可能です。これにより、ユーザーはブラウザで簡単に360°画像を楽しむことができます。
【three.js】で始める【glTF】の世界「初級編」
three.jsを使い、2枚の画像から透過情報を活かした2Dメッシュを生成し、glTF形式にエクスポートする手法を初心者向けに解説しています。シーン、カメラ、ライトの設定やテクスチャの読み込み、VRMメタ情報の付加、さらにはglTFファイルの読み込みと表示方法まで、実践的なサンプルコードを通じてWeb3Dコンテンツ制作の基礎から応用までを網羅的に紹介しています。