Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

原理で3DCG 第1回
基本3DCG

<<前へ 01 02
【プログラミング全貌(PNG画像)】
次へ>>

第1回補足説明へ

みなさんこんにちは!

今回から17回ぐらいに渡って、みなさんに3DCGを教えていくことになりました、 「スリーディーおねえさん」と申します。

3DCG計算は難しくないですか?

行列、視錐台(しすい だい)、なんとか変換の数々。 挫折した人も多いみたいです。

でも! 3DCG計算はもっと簡単な計算でできるんですよ。

しかも! その画面は、見た目の角度や物の線の引かれ方など下絵的なところ、難しい言葉で「構図」と言いますが、それが売り物のソフトと同じになるんです。

表面の材質など、あまり高度なことはできませんが、簡単に色をつけたり回転させるくらいはできますよ!

中高生の皆さんがこのプログラムの方法を知ることができたら、どんなにプログラミングが楽しくなるかわかりません。

だからこれからの17回でその解説を行いたいと思います。

これからよろしくね☆

初版 2016/4/24
改訂 2016/5/08

全17回を予定しています。次回は近日予定

実践 - プレビュー

fig.
▲クリックするとJavaScriptを実行します。

まずは教材のプログラム(JavaScript)を動かしてみましょう。

左の画像をクリックすると実行します。

パッと表示されるだけなので、見栄え(みばえ)はしませんが、これらの点は計算された遠近法で配置されています。


講義 - プログラム

小・中・高校生にとってプログラムが難しくならないように、プログラムの省略形(a = [1,2,3]; や a /= 3;など)の記述はさけています。

上で動かしたプログラムと、下記のプログラムのコードは同じものです。

[では、このリンクをクリックして説明を読み始めてください。]

比較ファイル: ../../01 kyouzai - 3.html
このファイル: ../../01 kyouzai - 3.html

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>3DCG</title>
<style></style>
<script>
function $( id ) { return document.getElementById( id ); }


//正六面体の頂点データ
var tens = new Array();
var a;
a = new Object();
	
a.x = -1;
	
a.y = -1;
	
a.z = -1;
	
	
tens[ 0 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = -1;
	
a.z = -1;
	
	
tens[ 1 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = +1;
	
a.z = -1;
	
	
tens[ 2 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = +1;
	
a.z = -1;
	
	
tens[ 3 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = -1;
	
a.z = +1;
	
	
tens[ 4 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = -1;
	
a.z = +1;
	
	
tens[ 5 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = +1;
	
a.z = +1;
	
	
tens[ 6 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = +1;
	
a.z = +1;
	
	
tens[ 7 ] = a;

//正六面体の位置データ
var pos = new Object();
pos.x = 0;
pos.y = 0;
pos.z = 300;

//正六面体の大きさデータ
var scale = 50;
	
//中心からの幅を拡大(つまり左右幅、上下幅それぞれ100の大きさになる)


var canvas;


function onloadx() {
var canvasTag = $( "canvasID" );
canvas = canvasTag.getContext( '2d' );


//頂点1つ1つ取り出す
for( var i = 0; i < tens.length; i++ ) {

//1:空間座標について

var x = tens[ i ].x;
var y = tens[ i ].y;
var z = tens[ i ].z;

//立体を拡大
x = x * scale;
y = y * scale;
z = z * scale;

//立体を移動
x = x + pos.x;
y = y + pos.y;
z = z + pos.z;


//2:空間座標を、画面座標へ変換

var s = 50;
	
	
	
//難しい言葉で「焦点距離」という。

var h = x * ( s / z );
var v = y * ( s / z );

//Shade3Dと同じ画面にするため拡大
h = h * 17.6;
v = v * 17.6;

//縦方向の上下反転を直す
v = -v;

//画面の中心に持ってくる
h = h + 320;
v = v + 240;


//3:○を描く
canvas.beginPath();
canvas.arc( h, v, 4, 0, 3.14159 * 2, false );
canvas.closePath();

canvas.fillStyle = "black";
canvas.fill();
canvas.strokeStyle = "black";
canvas.stroke();
}
}
</script>
</head>
<body onload="onloadx()">
<canvas id="canvasID" width="640" height="480" style="
border
	
	
	
:
	
solid 3px black;
border-radius
	
:
	
16px;
">
このブラウザはcanvasに対応していません。
</canvas>
</body>
</html>
TAB


練習 - 不正解のない問題

プログラムの説明は全部見終わったでしょうか?

次は「説明ばかりでは身につかない」と考えて問題を出します。

学校の問題みたいに正解・不正解があると緊張するので、「不正解のない問題」を用意しました。

あなたは上記で ひと通り学んだので、以下の白紙のプログラムに3DCGのプログラムを頑張れば書き始められると思います。まぁ…肩の力を抜いて、あなただったら、下記の状態からどうプログラムしますか?

以下の選択肢から選んでください。

回答はサーバーで集計して、回答ごとの人数を表示します。

<HTML>
    <HEAD>
        <META>
        <TITLE></TITLE>
        <SCRIPT>
            function onloadx() {

            }
        </SCRIPT>
    </HEAD>
    <BODY onload="onloadx()">

    </BODY>
</HTML>
  1. まずデータ(3Dのモデル)を用意したい気がする。
  2. とりあえずCANVASを使えるようにする。CANVASタグを用意し、JavaScriptで何か描けるようにする。それからだ!
  3. onloadx()は、好きな名前で良いって言っていたので、mentaiko()に置き換えする。
  4. 実際に作るときにならないとわからないけど、3DCGの原理の式「h = x * ( s / z ); v = y * ( s / z );」を関数にすると便利かもしれない。そういう感じでプログラムする。
  5. さっぱりわからない。
  6. どの選択肢も合わない。
  7. answer:0
  8.  集計の意図は不正解をなくした結果、味気なくなったので、代わりに集計をしてみた、というそれだけです。

    do:access();



どうでしたか?
3DCG計算もこれだけ簡単なら、
キミにもできるね!!


また次回をお楽しみに。

<<前へ 01 02
【プログラミング全貌(PNG画像)】
次へ>>

第1回補足説明へ

ex. このページと同じ内容のページを自分のほうで別途作成したい

どうぞ自由に同じものを作成してください。その際、「キャラがしゃべる」とか、「ソー スコードの一部をポイントして説明を表示する」とか、説明のしくみについても、自由に同じものを作ってもらって問題はありません。その際、このページに組 み込んでいる画像やプログラムは、フリー素材として使用して構いません。(上部のメニューを開いて左側の「このWEBサイト」リンクをクリックし、「Q. ソースコードや画像を自分の作品に使いたい」の項目に書いた内容と同じことを言っています)

以前、あるサイトの何かの説明を読んで、とても参考になったんだけど もっとわかりやすく自分のほうで説明したいと思ったことがあります。でも、まったく同じ説明をそのサイトの方法を元にして説明することについてそのサイトの方にちょっと申し訳ない気がして作成しづらかったです。

もし、そのサイトで 「同じ説明を作成してもOKです。怒りませんよ」 と言ってくれれば自由に作成できたと思います。

私のこのページももしかしたら同じように思う人がいるかもしれません。カワイイとかじゃなく て、もっとクールにしないと恥ずかしくて読めないとか、ビジネスの現場で表示しずらいとか。だから上記のように明記しておこうと思いました。何か作った ら、またはすでに作っていたら、教えてくれれば喜んで読みたいと思います。もちろん いっさい連絡なしでも構いません。

ページ制作 homepage6047


ページの上端へ (もくじ開く)