【javascriptライブラリ】p5.jsを使った、四角い3Dモデルがくるくる回るＭＶの作り方

投稿：2024/08/09｜ 更新： 2024/08/09 ｜ 2391文字

今回は、とあるjavascriptライブラリを使って、webサイトでよくある『四角い3Dモデルがくるくる回るＭＶ』を作ってみたいと思います。ITサービスとか、サイバーな感じの雰囲気が合うかもしれません。さっそく内容を確認していきましょう。

1 p5.jsとは？CDNからロードできる？
2 p5.jsを使った、四角い3Dモデルがくるくる回るコード
- 2.1 html/javascript部分
- 2.2 function drawのパラメータ
3 表示例
4 あとがき・まとめ

p5.jsとは？CDNからロードできる？

公式のセールスポイントをサクッと訳した感じだと『コーディングやアート作成を学ぶためのフレンドリー・無料・オープンソースのJavaScriptライブラリ』とのことです。公式ドキュメント内にはエディターが準備されていて、環境構築しなくてもサクッと動作確認できるなどのポイントも。

管理人がちょっと使った感じだと、『3Dグラフィック系の表現に強い』という印象がありましたが、サンプルスクリプト内にはサウンド関連の機能もあり、使いこむといろいろなことができるライブラリといえそうです。

ダウンロードして使うほか、各種バージョンが上がっているcdnjsから読み込んで使うこともできます。

p5js日本語ドキュメント
https://p5js.jp

p5.js（cdnjs）
https://cdnjs.com/libraries/p5.js

p5.jsを使った、四角い3Dモデルがくるくる回るコード

html/javascript部分

まずはHTML部分です。canvas_wrapというidでcanvasのラッパー要素を作りました。これがスクリプト内で3Dモデル表示部分の親要素になります。

■HTML部分
<div id=”canvas_wrap”></div>

javascript部分はfooter下に書きました。setup部分ではcanvasの作成とid指定して親要素セット。drawが3Dモデルを書く部分です。

■javascript部分
<script src=”cdnのurl”></script>
<script>
function setup() {
var canvas = createCanvas(710, 200, WEBGL);
canvas.parent('canvas_wrap');
}
function draw() {
  background(250,127,192);
  translate(200, 0, 0);
  //normalMaterial();
  rotateZ(frameCount * 0.005);
  rotateX(frameCount * 0.005);
  rotateY(frameCount * 0.005);
  box(128, 128, 128);
}
</script>

とりあえずは、この指定で動かしてみましょうか。その他、以下かんたんなパラメータの解説です。

function drawのパラメータ

background	背景色。上記はRGBで指定。カットすれば背景無し。
translate	cssと似たような感じ。要素の配置。
normalMaterial	今回はコメントアウトした。onだと色付きのボックスが出る。
rotateZ	Z軸の回転。frameCount * 0.005は回転速度。
rotateX	X軸の回転。回転速度は上記と同じ
rotateY	Y軸の回転。回転速度は上記と同じ
box	立方体にするときは全部同じ値。どれかが0だと平面になる。