▶ 実 行
▶ 実行
クリア
ThreeJSによる3Dサンプル-3Dモデルの読み込み
by てぃふと@うぇいく
!「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描画 ここまで ●開始とは ライブラリ準備 ここまで