作品 ID: 3012

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カメ進む。
ここまで。

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: サンプル
利用バージョン: 3.7.4
アクセス数(累計): 13
アクセス数(今月): 13
更新日時: 2025/05/04 11:37 編集: 2025/05/13 09:46

⭐⭐

作品公開情報

交流

コメントを取得中...