ThreeJSによる3Dサンプル-3Dモデルの読み込み 📖

モデルデータがCROSでうまく取得できないのでいったん非公開(ドメイン変更の影響)。ThreeJSにてglTF形式のモデルを読み込んで表示。OrbitControlとGLTFLoaderを使用。モデルは「"Oz Nerol's study room" by Lorenzo Penco is licensed under Creative Commons Attribution.」。プログラムのライセンスはCC0です（表示しているモデルのライセンスは異なるので注意）

プログラム: (→大)
!「https://n3s.nadesi.com/plain/576.js」を取り込む # モデルのライセンスに関する情報 # "Oz Nerol's study room" by Lorenzo Penco is licensed under Creative Commons Attribution. # "Oz Nerol's study room" (https://skfb.ly/onK8x) # Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). 画面横 = 400 画面縦 = 300 レンダラは空 ココは空 カメラは空 ライセンス要素は空 開始する ●ライブラリ準備とは 　TJSライブラリ読み込み後には 　　プラグイン準備 　ここまで ここまで ●プラグイン準備とは 　["controls/OrbitControls.js","loaders/GLTFLoader.js"]をTJSプラグイン読み込み後には 　　準備完了 　ここまで ここまで ●準備完了とは 　DIV要素準備 　描画準備 　モデル準備 　アニメート ここまで ●(データの)モデル準備完了とは 　ココにデータ["scene"]をTJS登場 ここまで ●モデル準備とは 　ライセンス要素["innerHTML"]は「<a href="https://skfb.ly/onK8x" target="_blank">Oz Nerol's study room" (https://skfb.ly/onK8x)</a> by Lorenzo Penco is licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)</a>.」 　「モデルが読み込まれ、表示が可能となるまでそこそこ時間がかかります。しばらくお待ちください。」を表示 　モデル情報は{ 　　path: 'https://weyk.sakura.ne.jp/storage/oz_nerols_study_room/', 　　URL: 'scene.gltf' 　} 　ローダはモデル情報をTJSGLTF保障読込 　Fは(「モデル準備完了」のJSオブジェクト取得) 　ローダの"then"を[F]でJSメソッド実行 ここまで ●DIV要素準備とは 　　DIVは"#three_div"のDOM要素取得 　　もし、DIVでなければ、 　　　　Pは"#runbox"のDOM要素取得 　　　　DIVは"DIV"のDOM要素作成 　　　　DIV["id"]は"three_div" 　　　　DIV["width"]は画面横 　　　　DIV["height"]は画面縦 　　　　PにDIVをDOM子要素追加 　　ここまで 　　ライセンス要素は"#license_p"のDOM要素取得 　　もし、ライセンス要素でなければ、 　　　　Pは"#runbox"のDOM要素取得 　　　　ライセンス要素は"P"のDOM要素作成 　　　　P["id"]は"license_p" 　　　　Pにライセンス要素をDOM子要素追加 　　ここまで 　　DIV["innerHTML"]は空 ここまで ●描画準備とは 　ココは、TJSシーン作成 　ココに0x004400をTJS背景設定 　カメラは、[60,画面横/画面縦,0.01,100]のTJS透視投影カメラ作成 　カメラを[1,2,-3]にTJS位置設定 　カメラを[0,0,0]にTJS視点設定 　ココにカメラをTJS登場 　カメラのTJS投影マトリクス更新 　＃光は0xffffffのTJS環境光源作成 　＃ココに光をTJS登場 　ランタンは[0xffffff, 2, 500, 1]のTJS点光源作成 　ランタンを[50,50,-20]にTJS位置設定 　ココにランタンをTJS登場 　レンダラは'#three_div'にTJS描画準備 　レンダラに[画面横,画面縦]をTJSサイズ設定 　レンダラに0x000000をTJSクリア色設定 　コントローラはレンダラのカメラにTJS衛星軌道コントローラ作成 ここまで ●アニメートとは 　画面更新時実行には 　　アニメート 　ここまで 　ワンフレーム ここまで ●ワンフレームとは 　レンダラにココをカメラでTJS描画 ここまで ●開始とは 　ライブラリ準備 ここまで