GrowthProgram プログラミング講座とは?
これから先の情報化社会に対応できるように、PCの操作知識やプログラミングを学ぶことによって、ITを利用した自己解決能力を身に着ける講座です。Javascript、HTML、CSSなどを扱って基本的にブラウザ上でのプログラミングを行います。また、Micro:bitを使ってIoT技術も学んだり、トイドローンをPCで操作したりしながら、機械制御等も学んでいきます!
3DWEBギャラリー作成の経緯
一学期の授業終了時javascriptで3Dモデリング授業を行いました。その時は単にオブジェクトを表示させて、回転するぐらいだったのですが、視点を移動させて、いろんな現実世界と変わらないこともできる。じつは秋に勇志祭があって、ここで3DWEBギャラリーを出してみたい。新型コロナウイルスの影響でおそらくこういった需要は今後増えてくるはず。外に出れないからバーチャル空間で芸術品の鑑賞は絶対有意義になる!!まだ構想段階なので一緒に作っていきませんか?と誘って2名の生徒が立候補してくれました!
夏休み研究に立候補してくれた二人!
一人は3年生のIくん(千葉県在住)、もう一人は2年生のKくん(熊本県天草在住)非常に面白い組み合わせでどうなるか?楽しみでした。ひとまずは、この二人にできることを知ってもらうことからでした。
当時のIくんの心境:「プログラミング言語を扱ってWeb上で3D表現をする事ってとても難しいよな・・・。でも、夏休みから研究をしてスキル・知識を得れたら楽しいよな!」
当時のKくんの心境:「”いろんなことを学べそう、楽しそう”という理由から参加したしちゃえ~!」
実験から始まっていく three.jsのテスト
まずは視点を動かして、好きに動けるということの把握。 →
※操作方法:キーボードASWDキーで位置移動、マウスクリック後、マウス動作で視点移動。マウスクリックで解除
次に、画像の表示。サンプルをダウンロードしてもうまく動かず。
さまざまな資料を確認したところ、サーバーを立てなければいけないとのこと!
てっとりばやくローカル環境でサーバー設置できる、XAMPPインストールで実行!画像表示できたぁ! →
その後は各自楽しむようにそれぞれをいじり始める→
画像ができたんだから、動画はどうかな?→
応用して、展示ルート案内を作ったりも→
実際の美術館などと比べて、、、人(視点)が近づいた時に動画を再生する処理とか。。→
音が流れるかどうかの確認→
などをいろんな問題を乗り越えてできたのがこれ!
3DWEBギャラリー!
注意点
・PCの場合は左クリックしながらマウス操作で、視点変更、右クリックしながらマウス操作で視点移動。
・スマートフォンは2点タッチで拡大や移動
・壁を突き抜けてしまいます。(制御を入れきれませんでした)
・黒い画面は動画です。近づいて数秒経つと動画が流れ始めます!
※iOS系で現在、動画の再生ができない状況です。改善策を練っているところです。
↓↓↓ 詳しい操作動画はこちらから ↓↓↓
Tsubaki Miki GALLERY
3年トップアスリートコース在籍中。アルペンスノーボードで世界トップクラスの実力。
Kei KOMATSUYAMA GALLERY
昨年度トップアスリートコース卒業生。SUP(スタンドアップパドル)の世界トップクラスの実力。
イラスト1 GALLERY
イラスト2 GALLERY
フォト GALLERY
動画 GALLERY
オブジェ GALLERY
レジンアトリエ GALLERY
生徒作品 レジン作品集。