手作りソフト実験室
3 回転する立方体を表示する
ブラウザに３D表示するだけなら想像以上に簡単です。もう既にいろんなサイトで紹介してありますが、ここではコピペだけで実現する方法を説明します。
まず３D描画ライブラリthree.jsからgithubに行き、three.js を下のキャプチャ画像を参考して”Download ZIP”をクリックしてthree.js-master.zipをダウンロードします。
解凍して出来たthree.js-masterフォルダにあるbuildの中に目的の three.js がありますので、これを組み込むHTMLファイルと同じ場所に保存します。この945kB程度の小さなファイルが３D表示エンジン本体になります。
次に以下の内容すべてを <head> ～ </head>の間にコピーしてください。これは３Dエンジンを呼び出して大きさ、色、形状、回転速度などを記述してある部分です。
次に３Dオブジェクトを表示するお好きな場所に以下のコードを挿入します。
最後に、表示を開始するコードを埋め込むために以下のコードを<body> の行に上書きします。
<body onload="threeStart();">
ほら、簡単に実装できました。
動作例１
動作例２