[ 📌文法] [ 🎨命令一覧]

[編集モード] 跳ねるボール 3D(ThreeJS+AmmoJS)

マウスでクリックすると打ち上げ(?)ます。クジラ飛行机さんの跳ねるボールを、こんどはThreeJS+AmmoJSで３Dの物理法則に従って跳ね返ります。跳ね返り自体でのエネルギー損失は無いんですが摩擦等で喪失したり回転エネルギーに変化したりでだんだんおとなしくなります。

!「https://n3s.nadesi.com/plain/plugin_weykthree.js」を取り込む
!「https://n3s.nadesi.com/plain/plugin_weykammo.js」を取り込む
AMOベースURL=「https://weyk.sakura.ne.jp/storage/ammojs」

# 衝突判定の許容誤差（距離）
衝突マージンは0.001  # 1mm

ボール総数は100

床厚は0.1
壁厚は0.1
部屋幅は20
部屋奥行は20
部屋高は6

床反発率は1.0
天井反発率は1.0
壁反発率は1.0

ボールサイズは[0.1, 0.15, 0.20]    # 10cm, 15cm, 20cm
ボール質量は[0.1, 0.2, 0.3]      # 100g, 200g, 300g
ボール反発率は1.0

重力は9.8            # 9.8m/s^2

ボール色を[0xff0000, 0xffff00, 0x0000ff]に定める。

WEBGLキャンバスはNULL
レンダラは空
ココは空
カメラは空

物理ワールドはNULL
前回タイムスタンプは０

床はNULL
天井はNULL

床鋼体はNULL
天井鋼体はNULL

# Ammo適用用
変動物リストは空配列
# レイキャスタ用
レイ対象リストは空配列
鋼体索引は{}

ワールドマトリクスワークはNULL
レイキャスタはNULL

ライブラリ準備完了はオフ
ユーザオプション選択完了はオフ

開始する

●準備同期化とは
　もし、ライブラリ準備完了でなければ、戻る
　もし、ユーザオプション選択完了でなければ、戻る
　準備完了
ここまで

●ユーザオプション選択とは
　回答は「重力(9.8m/s^2)を有効にしますか？」で二択
　もし、回答ならば、
　　重力は9.8
　違えば、
　　重力は0
　ここまで
　ユーザオプション選択完了はオン
　準備同期化
ここまで

●ライブラリ準備とは
　TJSライブラリ読み込み後には
　　プラグイン準備
　ここまで
ここまで

●プラグイン準備とは
　["controls/OrbitControls.js", "libs/ammo.wasm.js"]をTJSプラグイン読み込み後には
　　AMMOライブラリ準備
　ここまで
ここまで

●AMMOライブラリ準備とは
　AMOライブラリ読込後には
　　ライブラリ準備完了はオン
　　準備同期化
　ここまで
ここまで

●準備完了とは
　WEBGLキャンバス要素準備
　描画準備
　レイキャスタはTJSレイキャスタ作成
　描画中キャンバスの「click」に「キャンバスクリック」をDOMイベント追加する
　0でアニメート
ここまで

●WEBGLキャンバス要素準備とは
　　WEBGLキャンバスは"#three_cv"のDOM要素取得
　　もし、WEBGLキャンバスならば、
　　　　WEBGLキャンバスをWEBGLキャンバス["parentNode"]からDOM子要素削除
　　　　WEBGLキャンバスはNULL
　　ここまで
　　もし、WEBGLキャンバスでなければ、
　　　　Pは描画中キャンバス["parentNode"]
　　　　WEBGLキャンバスは"CANVAS"のDOM要素作成
　　　　WEBGLキャンバス["id"]は"three_cv"
　　　　WEBGLキャンバス["width"]は描画中キャンバス["width"]
　　　　WEBGLキャンバス["height"]は描画中キャンバス["height"]
　　　　WEBGLキャンバス["style"]["display"]は「none」
　　　　PにWEBGLキャンバスをDOM子要素追加
　　ここまで
ここまで

●後始末とは
　描画中キャンバスの「mousedown」から「キャンバスクリック」をDOMイベント削除する
ここまで

●キャンバスクリックとは
　EVTはWINDOW["event"]
　要素位置はEVT["target"]の"getBoundingClientRect"を[]でJSメソッド実行
　XはEVT["clientX"]-要素位置["left"]
　YはEVT["clientY"]-要素位置["top"]
　[X,Y]を狙い撃ちする
ここまで

●(XYを)狙撃とは
　NXはXY[0]/描画中キャンバス["width"]*2-1
　NYはXY[1]/描画中キャンバス["height"]*(-2)+1
　レイキャスタでカメラから[NX,NY]にTJSカメラ起点レイ
　命中一覧はレイキャスタでレイ対象リストにTJSレイ命中一覧取得
　もし、(命中一覧の配列要素数)＞０ならば、
　　コレは命中一覧[0]["object"]
　　発見はコレ
　　もし、発見≠NULLならば、
　　　対象鋼体は鋼体索引[発見["id"]]
　　　対象鋼体を[0,3,0]でAMO重心押す
　　　対象鋼体をAMO活性化
　　ここまで
　ここまで
ここまで

# 基本単位に従いものを配置する。
# この世界では、長さはメートル、重さはキログラム、時間は秒で指定する。
# ただし、あまり細かい数値はうまく扱えない。
●描画準備とは
　# 物理エンジンの空間(力学ワールド)を準備
　#

物理ワールドは標準鋼体ワールド作成

# 表示するためのシーンを準備
　#

ココは、TJSシーン作成
　ココに0x004400をTJS背景設定

# カメラを準備
　#

カメラは、[60,WEBGLキャンバス["width"]/WEBGLキャンバス["height"],0.05,30]のTJS透視投影カメラ作成
　カメラを[0,1.5,-10]にTJS位置設定
　カメラを[0,0,0]にTJS視点設定
　カメラを"+Y"にTJSカメラ上方設定
　ココにカメラをTJS登場
　カメラのTJS投影マトリクス更新

# 部屋を床と天井と壁で囲う
　#

# 床兼天井の見た目
　床材は{"幅":部屋幅,"高":床厚,"奥行":部屋奥行,バッファ:オン}のTJS箱作成
　床素材は{color: 0xffff00}のTJS拡散反射材質作成

# 床兼天井の力学形状を作成
　形状は[部屋幅÷２,床厚÷２,部屋奥行÷２]でAMO箱形状作成
　形状に衝突マージンをAMOマージン設定

# 床の3Dモデルを配置
　床は床材と床素材のTJSメッシュ作成
　床を[0, 0, 0]にTJS位置設定
　床にオンをTJS影受設定
　床をココにTJS登場

# 床の物理エンジン空間の実体
　床鋼体は床から形状の0でMESH付鋼体作成
　床鋼体に床反発率でAMO反発係数設定
　物理ワールドに床鋼体をAMO鋼体追加

# 天井の3Dモデルを配置
　天井は床材と床素材のTJSメッシュ作成
　天井を[0, 部屋高, 0]にTJS位置設定
　天井にオンをTJS影受設定
　天井をココにTJS登場

# 天井の物理エンジン空間の実体
　天井鋼体は天井から形状の0でMESH付鋼体作成
　天井鋼体に天井反発率でAMO反発係数設定
　物理ワールドに天井鋼体をAMO鋼体追加

# 壁の見た目
　壁材は{"幅":部屋幅,"高":部屋高,"奥行":壁厚,バッファ:オン}のTJS箱作成
　壁素材は{color: 0xffffff}のTJS拡散反射材質作成

# 壁の力学形状を作成
　形状は[部屋幅÷２,部屋高÷２,壁厚÷２]でAMO箱形状作成
　形状に衝突マージンをAMOマージン設定

壁手前は壁材と壁素材のTJSメッシュ作成
　壁手前を[0, 部屋高÷２, 部屋奥行÷２*(-1)]にTJS位置設定
　壁手前にオンをTJS影受設定
　壁手前をココにTJS登場
　壁鋼体は壁手前から形状の0でMESH付鋼体作成
　壁鋼体に壁反発率でAMO反発係数設定
　物理ワールドに壁鋼体をAMO鋼体追加

壁奥は壁材と壁素材のTJSメッシュ作成
　壁奥を[0, 部屋高÷２, 部屋奥行÷２]にTJS位置設定
　壁奥にオンをTJS影受設定
　壁奥をココにTJS登場
　壁鋼体は壁奥から形状の0でMESH付鋼体作成
　壁鋼体に壁反発率でAMO反発係数設定
　物理ワールドに壁鋼体をAMO鋼体追加

壁左側は壁材と壁素材のTJSメッシュ作成
　壁左側を[部屋幅÷２*(-1), 部屋高÷２, 0]にTJS位置設定
　壁左側["rotation"]["y"]は(PI/2)
　壁左側にオンをTJS影受設定
　壁左側をココにTJS登場
　壁鋼体は壁左側から形状の0でMESH付鋼体作成
　壁鋼体に壁反発率でAMO反発係数設定
　物理ワールドに壁鋼体をAMO鋼体追加

壁右側は壁材と壁素材のTJSメッシュ作成
　壁右側を[部屋幅÷２, 部屋高÷２, 0]にTJS位置設定
　壁右側["rotation"]["y"]は(-PI/2)
　壁右側にオンをTJS影受設定
　壁右側をココにTJS登場
　壁鋼体は壁右側から形状の0でMESH付鋼体作成
　壁鋼体に壁反発率でAMO反発係数設定
　物理ワールドに壁鋼体をAMO鋼体追加

# ボールを指定の個数生成する
　#

ボール形は空配列
　ボール素材は空配列
　ボール形[0]は{半径:ボールサイズ[0], 横分割数:8, 縦分割数:8, バッファ:オン}のTJS球体作成
　ボール形[1]は{半径:ボールサイズ[1], 横分割数:10, 縦分割数:10, バッファ:オン}のTJS球体作成
　ボール形[2]は{半径:ボールサイズ[2], 横分割数:16, 縦分割数:16, バッファ:オン}のTJS球体作成
　ボール素材[0]は{ color: ボール色[0] }のTJS拡散反射材質作成
　ボール素材[1]は{ color: ボール色[1] }のTJS拡散反射材質作成
　ボール素材[2]は{ color: ボール色[2] }のTJS拡散反射材質作成

形状は空配列
　形状[0]はボールサイズ[0]のAMO球形状作成
　形状[1]はボールサイズ[1]のAMO球形状作成
　形状[2]はボールサイズ[2]のAMO球形状作成
　形状[0]に衝突マージンをAMOマージン設定
　形状[1]に衝突マージンをAMOマージン設定
　形状[2]に衝突マージンをAMOマージン設定

(ボール総数)回繰り返す
　　Nは回数-1

# ボールの3Dモデル
　　# 空間中の適当な位置に置く
　　Iは3の乱数
　　Jは3の乱数
　　ボールはボール形[I]とボール素材[J]のTJSメッシュ作成
　　Xは((部屋幅*0.8)の乱数)+部屋幅*0.1-部屋幅÷２
　　Yは((部屋高*0.8)の乱数)+部屋高*0.1
　　Zは((部屋奥行*0.8)の乱数)+部屋奥行*0.1-部屋奥行÷２
　　ボールを[X,Y,Z]にTJS位置設定
　　ボールにオンをTJS影投設定
　　ココにボールをTJS登場

# レイキャスタでのレイ判定対象の一覧を準備する
　　レイ対象リストにボールを配列追加

# ボールの物理エンジン空間の実体
　　# 適当な移動速度を設定する
　　ボール鋼体はボールから形状[I]のボール質量[I]でMESH付鋼体作成
　　X速度は((50の乱数)/25+1.0)*((2の乱数)*2-1)
　　Y速度は((50の乱数)/25+1.0)*((2の乱数)*2-1)
　　Z速度は((50の乱数)/25+1.0)*((2の乱数)*2-1)
　　ボール鋼体に[X速度, Y速度, Z速度]をAMO移動速度設定
　　ボール鋼体にボール反発率でAMO反発係数設定
　　物理ワールドにボール鋼体をAMO鋼体追加

# ボールは動くので一覧に入れて管理する
　　変動物リストに{表示体:ボール, 鋼体:ボール鋼体}を配列追加する
　　鋼体索引[ボール["id"]]はボール鋼体
　ここまで

# 光源を準備
　#

# 全体をぼやっと照らす環境光源を生成
　光は0x202020のTJS環境光源作成
　ココに光をTJS登場

# １点から射程内を照らすポイント光源を生成
　ランタンは[0xffffff, 2, 30, 1]のTJS点光源作成
　ランタンを[5,5,-5]にTJS位置設定
　ランタンにオンをTJS影投設定
　ココにランタンをTJS登場
　ランタンの["シャドー"]に[1024,1024]をTJSマップサイズ設定
　ランタンの["シャドー","カメラ"]に0.001をTJSカメラ最近距離設定
　ランタンの["シャドー","カメラ"]に50をTJSカメラ最遠距離設定

# ThreeJSの表示準備
　#

レンダラは'three_cv'にTJS描画準備
　レンダラに[WEBGLキャンバス["width"],WEBGLキャンバス["height"]]をTJSサイズ設定
　レンダラに0x000000をTJSクリア色設定
　レンダラをTJS影処理有効

# ThreeJSのオービットコントロールを作成して適用
　#

# DOMには採取的に表示に使うキャンバスを指定する
　コントローラはカメラに描画中キャンバスのTJS衛星軌道コントローラ作成
ここまで

# アニメーションのループを構成する
# 呼び出しごとの時間差の算出もここで行う
●(タイムスタンプで)アニメートとは
　もし、前回タイムスタンプが０でなければ、
　　経過秒は(タイムスタンプ－前回タイムスタンプ)÷１０００
　　経過秒でワンフレーム
　ここまで
　前回タイムスタンプはタイムスタンプ

画面更新時実行には(タイムスタンプ)
　　タイムスタンプでアニメート
　ここまで
ここまで

# アニメーションの１フレーム分を処理する
●(経過秒で)ワンフレームとは
　# 力学ワールドの時間を経過時間分進める
　物理ワールドを経過秒で10までAMO時間経過
　# 力学ワールド上の鋼体の位置・姿勢を3Dモデル空間のモデルに反映する
　変動物リストを反復する
　　表示体は対象["表示体"]
　　鋼体は対象["鋼体"]
　　鋼体を表示体に物体姿勢反映
　ここまで

レンダラにココをカメラでTJS描画
　WEBGLキャンバスを[0,0]へ画像描画
ここまで

●開始とは
　ライブラリ準備
　ユーザオプション選択
ここまで

# ThreeJS - Ammo 利用簡易支援
# ThreeJSのexamples/js/physics/AmmoPhysics.jsを参考に作成

# よくある組み合わせで力学ワールドを生成する
●標準鋼体ワールド作成とは
　CONFはAMOデフォルト衝突判定法作成
　DISPはCONFのAMO衝突判定ディスパッチャ作成
　BPHASEはAMODbvt作成
　SOLVERはAMO物理ソルバー作成
　ワールドは[DISP,BPHASE,SOLVER,CONF]でAMO離散力学ワールド作成
　ワールドに[0,(-重力),0]でAMO重力設定
　ワールドマトリクスワークはAMO変形マトリクス作成
　ワールドで戻る
ここまで

# AmmoJSの鋼体の位置・姿勢をThreeJSのMESHに反映する
●(BODYをMESHに)物体姿勢反映とは
　姿勢状態はBODYのAMO状態管理器取得
　姿勢状態からワールドマトリクスワークにAMOワールド変換行列取得
　位置はワールドマトリクスワークからAMO原点取得
　回転はワールドマトリクスワークからAMO回転取得
　MESHを位置にTJS位置設定
　MESHを回転にTJS四元数設定
ここまで

# ThreeJSのMESHを情報を元にAmmoJSの鋼体を作成する
●(MESHからSHAPEのMASSで)MESH付鋼体作成とは
　位置はMESHからTJS位置取得
　回転はMESHからTJS四元数取得
　マトリクスはAMO変形マトリクス作成
　マトリクスをAMO単位行列設定
　マトリクスに(位置からAMOVec3)をAMO原点設定
　マトリクスに(回転からAMO四元数)をAMO回転設定
　BODYはマトリクスからSHAPEのMASSでMESH無鋼体作成
　BODYで戻る
ここまで

# 変換マトリクスから鋼体を作成する
●(マトリクスからSHAPEのMASSで)MESH無鋼体作成とは
　もし、MASSでなければ、
　　MASSは0
　ここまで
　状態管理器はマトリクスからAMOデフォルト状態管理器作成
　慣性は[0,0,0]からAMOVec3
　SHAPEにMASSと慣性でAMO局所慣性計算
　構成情報は[MASS, 状態管理器, SHAPE, 慣性]からAMO鋼体構成情報作成
　BODYは構成情報からAMO鋼体作成
　BODYで戻る
ここまで

# 型付配列のヘルパー命令

●(ARGの)UI8配列とは
　『(function (a) {return new Uint8Array(a)})』を[ARG]でJS関数実行で戻る
ここまで

●(ARGの)F32配列とは
　『(function (a) {return new Float32Array(a)})』を[ARG]でJS関数実行で戻る
ここまで

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 跳ねるボール 3D(ThreeJS+AmmoJS)

素材のアップロード