3Dタートルグラフィックスを使ってみるる 📖

マウスで動かすとピラミッド型になってます✨　ハマリポイント：プラグインの取り込みが必要。標準のキャンバスでは動かない。なおT3Dカメ描画先にはDOM親要素(div)を指定するのが一番簡単っぽかった。／v3.7.4でクリアが出来るようになりました✨👍

プログラム: (→大)
＃--- 描画の準備 ----- ＃ プラグインを取り込む !「https://nadesi.com/v3/cdn.php?v=3.7.4&f=release/plugin_weykturtle3d.js」を取り込む。 ＃ ライブラリを読み込む T3Dライブラリ読込。 ＃ マウスで動かせるようにするためにオービットコントロールを読み込む ["controls/OrbitControls.js"]をT3Dプラグイン読込。 ＃ 描画先の設定 ※ 描画先はdiv、もしくはcanvas。 ※ ただしエディタ標準のキャンバスや「キャンバス作成」したcanvasは2d用で、使用出来ない。 T3Dカメ描画先＝DOM親要素。　# div //T3Dカメ描画先＝「canvas」のDOM部品作成。　# canvas ＃ 幅と高さを指定する ※幅と高さが同じでないと比率が変になるっぽい？ # div T3Dカメ描画先.幅＝300px。 T3Dカメ描画先.高さ＝300px。 # canvas //T3Dカメ描画先.width＝300。 //T3Dカメ描画先.height＝300。 ＃ マウスで動かせるようにする ※先にT3Dカメ描画先を設定し、幅と高さを指定してから設定しないとダメっぽい。 T3Dオービットコントロール設定。 ＃ カメの作成と設定 T3Dカメ作成。 「#000033」にT3D背景色設定。 「#FF0000」にT3Dカメペン色設定。 5にT3Dカメペンサイズ設定。//変わらない？ ＃--- 実際の描画 ----- 頂点＝[0,0,100] 高さ＝200。 傾斜角＝45。 斜辺長＝高さ/SIN((傾斜角をラジアン変換))。 傾斜角だけT3Dカメ上回転。 ４回 　頂点にT3Dカメ起点移動。 　傾斜角だけT3Dカメ下回転。 　90だけT3Dカメ左回転。 　傾斜角だけT3Dカメ上回転。 　斜辺長だけT3Dカメ進む。 ここまで。 傾斜角だけT3Dカメ下回転。 45だけT3Dカメ右回転。 ４回 　90だけT3Dカメ右回転。 　斜辺長だけT3Dカメ進む。 ここまで。