提供:Japanese Scratch-Wiki

< 3Dプロジェクトの基本

これはひらがな記事です。元記事に戻る
Warning
メモ:
このチュートリアルのさいごのほうははふくざつなので、Scratchのしょほてきなないようをじゅうぶんにりかいしてからためしてみることををおすすめします。
Warning
メモ:
このきじはひらがなになりましたが、まだないようがふくざつです。Scratchのしょほてきなないようをじゅうぶんにりかいしてからためしてみることををおすすめします。

 

Warning
メモ:
編集者の方へ:この記事に関して充分に知識がある場合はわかり易い文章に編集していただけると幸いです

3Dプロジェクトとは、x-yざひょうによるへいめんてきなせかい (たてとよこ) ではなく、さらにおくゆきがそんざいする3じげんのせかい (3Dくうかん) をひょうげんしたプロジェクトのだいたいのことをさす。 Scratchのステージは、xざひょうとyざひょうからこうせいされる2じげんへいめん(へいめんのせかい)であるため、Scratchでおくゆき (zざひょう) をひょうげんするにはさまざまなくふうがひつようようです。

3Dくうかんとは

3Dくうかんとは、xじくとyじくに、zじくがくわわった3じげんざひょうくうかんのことです。 zじくは、xじく、yじくとおなじようなざひょうのじくであり、つうじょう、x-yへいめんにたいするおくゆきをあらわします。わたしたちのいるこのくうかん (げんじつせかい) は、3じげんであるためおくゆき (zじく) がそんざいするが、Scratchにはそのままではzじくがそんざいしません。そこで、Scratchで3Dくうかんをひょうげんするときは、3Dモデルのサイズとうごきをくみあわせて、おくゆきがそんざいするようにみせかけることができます。

このきじでは、ひかくてきかんたんなスクリプトで3Dのようなみためをじつげんするれいを2つしょうかいしたあと、さいごに、ほんかくてきな3Dくうかんをつかうほうほうをしょうかいします。 ここでしょうかいしたいがいにも、3Dのひょうげんほうほうとしてはレイキャスティング もこうかてきである。もくてきにおうじて、それぞれのやりかたをつかいわけるとよいでしょう。

オブジェクトとはいけいをじゅんびする

Document stub.png この項目は、書きかけの項目です。この項目に加筆・訂正などをしてくださる協力者を求めています。

3Dでスクロールするばあいや、ぜんめんてんぼうのうんてんゲームをつかうばあいに3Dのオブジェクトをさくせいするばあいがあります。そのばあいのほうほうをせつめいします。

いってんとうしずほう

あるいってんをきじゅんとして、そこにむかってすべてのもの(をえんちょうしたせん)がむかっていくようにびょうがするほうほうである。

てんのいちはにんいだが、つうじょうめせんのたかさにせっていする。

にてんとうしずほう

いってんしずほうをかくちょうしたものである。つうじょう、ちゅうおうからみてさゆうにてんをせっていする。

たとえばさゆうにてんをうったとき、みぎにむかっていくものはみぎのてんに、ひだりにむかうものはひだりのてんにむかってせんがのびていく。

二点透視.svg

さんてんとうしずほう

げんじつのせかいはこのようなみえかたをしており、このびょうがほうほうがいちばんしぜんである。 1. てん(しょうしつてん)をきめめる(ずちゅうまる)

2. はいいろのせんをひく

3. 2のせんがまじわってしかくじょうになっているぶぶんをこくし、ふようぶぶんをさくじょする。

三点透視図法.jpg

サイズへんこうによって3Dこうかをえるスクリプト

じゅんび

つぎのへんすうをしようする:

(xいち)
(yいち)
(zいち)

チュートリアル

このスクリプトでは、スプライトのサイズをへんこうして、おくゆきをひょうげんしている。


@greenFlag が押されたとき::events hat <[xいち v] を [-30] にする [yいち v] を [0] にする [zいち v] を [60] にする ずっと

 大きさを (zいち) %にする
 x座標を (xいち) にする
 y座標を (yいち) にする
 もし <[上向き矢印 v] キーが押された> なら
   [zいち v] を ((大きさ) / (45)) ずつ変える
   [xいち v] を ((x座標) / (55)) ずつ変える
 end
 もし <[下向き矢印 v] キーが押された> なら
   [zいち v] を ((大きさ) / (-45)) ずつ変える
   [xいち v] を ((x座標) / (-55)) ずつ変える
 end
 もし <[左向き矢印 v] キーが押された> なら
   [xいち v] を ((大きさ) / (-55)) ずつ変える
 end
 もし <[右向き矢印 v] キーが押された> なら
   [xいち v] を ((大きさ) / (55)) ずつ変える
 end
 もし <<(zいち) < [20]> または <(zいち) > [217]>> なら
   隠す
 でなければ
   表示する
 end

end

"xいち"と"yいち"は、スプライトのたてよこほうこうのいちをあらわすへんすうです (つうじょうのxざひょうとyざひょうにあたるもの)。 "zいち"は、スプライトのいちをかえずにスプライトのおおきさをかえるためのちです。

このれいでは、3じげんのうち、さゆうのいち、じょうげのいちについては、つうじょうどおりxざひょうとyざひょうをつかってあらしているが、おくゆきとなるzざひょうを、スプライトのおおきさであらわしています。(おくにあるぶったいはちいさく、てまえににあるぶったいはおおきくみえるため、zざひょうのいちはぶったのおおきさとひれいしているとかんがえられるからです)。

Scratchでリアルな3Dゲームをつくるにはふくざつなてじゅんがひつようになるが、このスクリプトのようなやりかたで、ステージを3Dくうかんのようにみせかけるのはひかくてきかんたんです。 ただしじょうきは、3Dスクリプトとしてはかなりしょほてきであり、ぶったいどうしのしょうとつをしらべるしくみなどがふくまれていない。また、うごいているぶったいについては、そのままではしようできない。しかし、くふうすれば、このほうほうでもおくゆきのある3Dせかいをひょうげんしたゲームなどがじつげんできるはずです。

スタンプをつかったシンプルな3Dこうかスクリプト

スタンプでの3Dの例

つぎにに、よりシンプルに3Dこうかをえるほうほうをしょうかいする。この方法では、「スプライトのざひょうをすこしずらしてスタンプ」をなんどかくりかすことで、スプライトのおくゆきをひょうげんしています。

@greenFlag が押されたとき::events hat
ずっと
  全部消す::pen
  x座標を (0) 、y座標を (0) にする
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
  y座標を (2) ずつ変える
  スタンプ
end

@greenFlag が押されたとき::events hat
ずっと
  [マウスのポインター v] へ向ける
end

ざひょうけいさんによる3Dグラフィックスのきそ

コンピューターのディスプレイのようなへいめんじょうで3Dくうかんをひょうげんするときは、3じげんじょうのざひょうを2じげんのへいめんにへんかん (とうえい) するひつようがあります。 ここでは、けいさんによって、3じげんくうかんにおかれた3じげんオブジェクトを、2じげんへいめんにとういするきほんをせつめいします。

3じげんくうかんじょうにおかれた3じげんオブジェクト (モデルという) をそうさするときは、へんすうこうれつをつかってけいさんすることがおおいです。 へんかんこうれつには、かいてん、スケール、へいこういどうという3しゅるいのへんすうのじょうほうがふくまれています。

3Dくうかんをじっそうするときは、いっぱんに、つぎの3つのステップふまえるひつようがあります。

  1. モデルのかくちょうてんが3じげんマップ (ワールドくうかん) じょうのどこにいちするかをけいさんする (モデルへんかん)
  2. つぎに、ワールドくうかんにおけるそれらのざひょうを、してん (カメラいち) からのそうおういちにへんかんする (ビューへんかん)(これをおこなうには、かくちょうてんに、カメラのいちのぎゃくこうれつをてきようすればよい) 。このとき、カメラしや (クリッピングくうかん) のそとにあるじょうほうはだつらくする。
  3. さいごにに、クリッピングくうかんをがめんへいめんにとうえいする (とうえいへんかん)

データひょうげん

ここでは、3Dモデルはかくちょうてんのはいれつとかくめんのはいれつでこうせいされるものとする。かくちょうてんは、x, y, zざひょうをちとしてもっていて、かくめんは、そのめんをこうせいするちょうてんのじょうほうをもちます。

へんかん

つぎにかくちょうてんのへんかんにしようするコードをきろくします。

スケールへんかん

スケールへんかんとは、たいしょうのかえることです。Scratchの2じげんくうかんであれば、おおきさを () %にするブロックやおおきさを () ずつかえるブロックでスプライトのサイズをへんかんできるが、これにあたるものとかんがえればよいです。

[new x v] を ((old x) * (サイズ::variables)) にする
[new y v] を ((old y) * (サイズ::variables)) にする
[new z v] を ((old z) * (サイズ::variables)) にする

へいこういどう

へいこういどうとは、ざひょうじくとへいこうにたいしょうをうごかすことです。Scratchの2じげんへいめんであれば、x座標を () ずつ変えるブロックやy座標を () ずつ変えるブロックでスプライトをいどうさせれますが、これにあたたるものとかんがえればいいです。

[new x v] を ((old x) + (x 平行移動)) にする
[new y v] を ((old y) + (y 平行移動)) にする
[new z v] を ((old z) + (z 平行移動)) にする

かいてん

かいてんとは、たいしょうのむきをかえることである。Scratchの2じげんへいめんであれば、() 度回す ブロックでスプライトをかいてんできるが、これにあたたるものとかんがえればよい。

3じげんくうかんでのかてんは、けいさんがしょうしょうふくざつてす。まず、1つのかいてんをロール (roll)、ピッチ (pitch)、yaw (ヨー)、という3つのかいてんにぶんりし、それぞれにたいし、2じげんでのかいてんをてきようしているとかんがえることができます。


さんかくかんすうのかほうていり

かいてんには、つぎのような、さんかくかんすうのかほうていりをしようするとつくることができます:

  • sin(A1 + A2) = sin(A1) * cos(A2) + sin(A2) * cos(A1)
  • cos(A1 + A2) = cos(A1) * cos(A2) - sin(A1) * sin(A2)
  • sin(A1 - A2) = sin(A1) * cos(A2) - sin(A2) * cos(A1)
  • cos(A1 - A2) = cos(A1) * cos(A2) + sin(A1) * sin(A2)

[1]

2じげんのかいてん

2じげんへいめんでスプライトをかいてんするコードはつぎのとおりです:

[new x v] を (((old x) * ((角度)の[cos v]::operators)) - ((old y) * ((角度)の[sin v]::operators))) にする
[new y v] を (((old x) * ((角度)の[sin v]::operators)) + ((old y) * ((角度)の[cos v]::operators))) にする

[2]

ロール

ロールは、ここでは、yじくにじくするかいてんをあらわします。

[new x v] を (((old x) * ((角度)の[cos v]::operators)) - ((old z) * ((角度)の[sin v]::operators))) にする
[new z v] を (((old x) * ((角度)の[sin v]::operators)) + ((old z) * ((角度)の[cos v]::operators))) にする
ピッチ

ピッチは、ここでは、xじくたいするかいてんをあらわします。

[new y v] を (((old y) * ((角度)の[cos v]::operators)) + ((old z) * ((角度)の[sin v]::operators))) にする
[new z v] を (((-1) * ((old y) * ((角度)の[sin v]::operators))) + ((old z) * ((角度)の[cos v]::operators))) にする

ピッチではかくどをかさんではなくげんざんしています。ここではピッチをはんとけいまわりではなくとけいまわりでかんがえているからである。

ヨー

ヨーは、ここではzじくにたいするかいてんをあらわします。

[new x v] を (((old x) * ((角度)の[cos v]::operators)) - ((old y) * ((角度)の[sin v]::operators))) にする
[new y v] を (((old x) * ((角度)の[sin v]::operators)) + ((old y) * ((角度)の[cos v]::operators))) にする

これらのへんかんをてきようするじゅんばんは、つぎのとおりです:

ちょうてん → ワールドくうかんにはいち (モデルへんかん):

  1. スケール
  2. かいてん
  3. へいこういどう

ワールドくうかん → クリッピングくうかん (ビューへんかん):

  1. へいこういどう
  2. かいてん
Warning
メモ:
ワールドくうかんにたいしビューへんかんをおこなうときは、カメラの「ぎゃく」をけいさんするのをわすれないようにする。たとえば、カメラいちが (5, 6, -2) であらわせるとき、へんかんにしようするあたいは、(x - 5, y - 6, z + 2) となる。

とうえいへんかん

3じげんくうかんのざひょうを2じげんくうかんにとうえいするには、つぎのコードをしようする:

[2D x v] を (((3D x)/(3D z))*(焦点距離)) にする
[2D y v] を (((3D y)/(3D z))*(焦点距離)) にする

これは、とおくにいけばいくほど (zじくが大きくなればなるほど)、ちいさくみえるというかんけいをあらわしている。


へんかんスクリプトれい

ここまでに、3Dモデルを3Dくうかんにはいちして、それらをディスプレイへいめんじょうであらわすためのけいさんほうほうをひととおりせつめいした。それでは、これらをスクリプトにまとめてみよう。

このチュートリアルでは、ワールドくうかんのまわりをぐるっとかいてんするカメラいち (してんいち) をそうていしている。このカメラは、かいてんだけでなくへいこういどうもかのうである。カメラいちがかいてん、へいこういどうしたばあいは、ビューへんかんをおこなうときに、このいどうのちをぎゃくにしててきようすることをわすれれないでほしい。

じゅんび

いかのへんすうをしようする

(2D x) //2D変換後のx座標
(2D y) //2D変換後のy座標
(focal length) //焦点距離 (撮影できる範囲 (カメラでいう画角)が変わる)
(x)  //3Dモデルのx座標
(y) //3Dモデルのy座標
(z) //3Dモデルのz座標
(scale factor) //スケール因子。3Dモデルのサイズ
(roll) //3Dモデルのロール角度
(pitch) //3Dモデルのピッチ角度
(yaw) //3Dモデルのヨー角度
(temp)// 作業用変数 (座標を一時待避するのに使う)
(translation x) //3Dモデルのx方向への移動距離
(translation y) //3Dモデルのy方向への移動距離
(translation z) //3DモデルのZ方向への移動距離
(camera x) //カメラの3D空間でのx座標位置
(camera y)  //カメラの3D空間でのy座標位置
(camera z) //カメラの3D空間でのz座標位置
(cam roll) //カメラのロール角度
(cam pitch) //カメラのピッチ角度
(cam yaw) //カメラのヨー角度


ちょうてんのレンダリング

つぎに、ここまでにせつめいしたすべてのへんかんをおこない、かくちょうてんの2じげんへいめんでのいちをけっていするカスタムブロックのスクリプトをきさいする。

定義 頂点計算
[x v] を ((x) * (scale factor)) にする
[y v] を ((y) * (scale factor)) にする
[z v] を ((z) * (scale factor)) にする
[temp v] を (x) にする
[x v] を (((x) * ((roll)の[cos v]::operators)) - ((z) * ((roll)の[sin v]::operators))) にする
[z v] を (((temp) * ((roll)の[sin v]::operators)) + ((z) * ((roll)の[cos v]::operators))) にする
[temp v] を (y) にする
[y v] を (((y) * ((pitch)の[cos v]::operators)) + ((z) * ((pitch)の[sin v]::operators))) にする
[z v] を (((-1) * ((temp) * ((pitch)の[sin v]::operators))) + ((z) * ((pitch)の[cos v]::operators))) にする
[temp v] を (x) にする
[x v] を (((x) * ((yaw)の[cos v]::operators)) - ((y) * ((yaw)の[sin v]::operators))) にする
[y v] を (((temp) * ((yaw)の[sin v]::operators)) + ((y) * ((yaw)の[cos v]::operators))) にする
[x v] を (translation x) ずつ変える
[y v] を (translation y) ずつ変える
[z v] を (translation z) ずつ変える
[x v] を ((-1) * (camera x)) ずつ変える
[y v] を ((-1) * (camera y)) ずつ変える
[z v] を ((-1) * (camera z)) ずつ変える
[temp v] を (x) にする
[x v] を (((x) * ((cam roll)の[cos v]::operators)) + ((z) * ((cam roll)の[sin v]::operators))) にする
[z v] を (((-1) * ((temp) * ((cam roll)の[sin v]::operators))) + ((z) * ((cam roll)の[cos v]::operators))) にする
[temp v] を (y) にする
[y v] を (((y) * ((cam pitch)の[cos v]::operators)) - ((z) * ((cam pitch)の[sin v]::operators))) にする
[z v] を (((temp) * ((cam pitch)の[sin v]::operators)) + ((z) * ((cam pitch)の[cos v]::operators))) にする
[temp v] を (x) にする
[x v] を (((x) * ((cam yaw)の[cos v]::operators)) + ((y) * ((cam yaw)の[sin v]::operators))) にする
[y v] を (((-1) * ((temp) * ((cam yaw)の[sin v]::operators))) + ((y) * ((cam yaw)の[cos v]::operators))) にする
[2d x v] を (((x) / (z)) * (focal length)) にする
[2d y v] を (((y) / (z)) * (focal length)) にする


モデルのかくちょうてんにたいし、このカスタムブロックをてきようして、えられた2じげんのざひょう(2d x, 2d y)をつかってびょうがすれば3Dグラフィックがかんせいする。

ぎょがんレンズについてかんがえなくていいりゆう

遠近法が成り立つ理由1.png

めにうつるふうけいは、ぎょがんレンズのようにまがっているため、えんきんほうはじっさいにはなりたたないとかんがえるひともいるかもしれないが、それはまちがっている。

みぎにあらわすがぞうをかんがえるヒントにしてほしい。

じゅうようなのは、めとじょうてんをむすぶちょくせんと、がめんのこうてんである。

がめんじょうでぎょがんレンズのようにねじまげてしまったら、めにはいってくるときに、さらにねじまがってしまう。

(がぞうないにある「とうかんかくではないでない」はむししてよい。えんきんほうをひょうげんするとき、Zでひくのではなくわるりゆうをせつめいしているものである)

かんれんこうもく

さんしょう

Cookieは私達のサービスを提供するのに役立ちます。このサービスを使用することにより、お客様はCookieの使用に同意するものとします。