この記事は、p5.js Web Editor上で、three.js による描画を行ってみる、というものです。
ちょっと前に、PixiJS について以下のような記事を書いたのですが、それと同じようなことをやります。
●PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から） - Qiita
https://qiita.com/youtoy/items/238a3a083eaf8cd4abf7
今回行うことの概要
参照する公式サンプル
それでは早速、本編へと入っていきます。
●The First Step | Babylon.js Playground
https://playground.babylonjs.com/#2KRNG9
まず、three.js で実装する内容は、以下の公式サンプルです。
●Creating a scene – three.js docs
https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
最終的に用いるおおよその内容は、上記のページ内の「The result」に書かれた内容です。
公式サンプルとの主な差分
ただし、上記のサンプルとは以下の部分が異なります。
- 環境が p5.js Web Editor上（メインの JavaScript は、p5.js をベースにしたものが混じる）
- canvas要素は、自前であらかじめ用意
- three.js の描画の更新は、p5.js内の draw() の中で実行
実行結果
今回の内容を実行した最終結果は、以下のとおりです。
それでは、上記で実行している内容の話に入っていきます。
今回行ったこと
それでは、p5.js Web Editor上で実装した内容について書いていきます。
HTML の内容
p5.js Web Editor上でデフォルトで提供される HTML に対し、three.js を読み込む部分を追加します。
具体的には <script src="https://threejs.org/build/three.js"></script> という部分を加えています。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8" />
</head>
<body>
<main>
<canvas id="myCanvas"></canvas>
</main>
<script src="sketch.js"></script>
</body>
</html>
ここで追加した行に含まれる URL は、上で掲載していた「 three.js の公式サンプル内の "The result"」の中で、「live example と書かれた先のページ」で用いられていたものです。
JavaScript の内容
次に JavaScript での実装です。補足は、後のほうに書いていきます。
let scene, camera, renderer;
let cube;
function preload() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const canvas = document.getElementById("myCanvas");
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
}
function setup() {
createCanvas(30, 30);
}
function draw() {
background(220);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
three.js の処理のほとんどは preload() の中で実装しました（ 今回の内容なら setup() の中でも良さそうかもですが）。
また、preload() の外でも使う scene や camera などは、冒頭で宣言しています。
それと、公式のサンプルでは以下のように、Window.requestAnimationFrame() で描画の更新が行われていました。
今回は、p5.js の描画ループの draw() があるため、そちらでこの中の処理を受けもっています。
それと、canvas要素を用いた描画部分の指定は、以下のようにしています。
const canvas = document.getElementById("myCanvas");
renderer = new THREE.WebGLRenderer({ canvas });
これは、公式ドキュメントの「WebGLRenderer」の部分で、以下で書かれた仕様に準ずるものです。
描画を p5.js側に取り込む
とりあえず上記の内容で、p5.js Web Editor上で three.js の描画を行うということはできました。
最後に、冒頭で掲載した PixiJS に関する記事の中でもやっていた、three.js のキャンバスで描画した内容を、p5.js のキャンバスで取り込んで描画するという内容も、試しておこうと思います。
対応する内容は、冒頭で掲載した PixiJS に関する記事の中の、「PixiJS の描画を p5.js側に取り込む」の部分と同様ですので、そちらをご参照ください。
その対応を行った後の JavaScript の処理内容は、以下のとおりです。
let scene, camera, renderer;
let cube;
let canvas;
function preload() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
canvas = document.getElementById("myCanvas");
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
}
function setup() {
canvas.style.display = "none";
createCanvas(canvas.width, canvas.height);
}
function draw() {
background(220);
drawingContext.drawImage(canvas, 0, 0);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}