こんにちは。エンジニアの中島です。
近年、Webサイトでは3Dがトレンドとして注目されています。
決して新しい技術ではありませんが、Awwwardsや国内ブックマークサイトでもインタラクティブな3D表現を見かけることが多いですよね。
今回は、3D表現に用いるWebGL(three.js)についてコードを交えつつ説明していきます。
WebGL
WebGLとはブラウザ上で3D/2Dグラフィックスを表示するAPIです。
また、互換性のあるブラウザでプラグインを使用せずに3D/2Dグラフィックスをレンダリングします。
「Flash Playerを有効にしてください」
多くの方が目にしたことあると思います。
Flash Player等のプラグインを通さずに3D/2Dグラフィックスの表示が可能です。
余談ですが、Adobe Flash Playerは2020年にサポートを終了するらしく…。
小さいころに、Flashのネタコンテンツに熱中していたので少し寂しいです。
WebGLの対応ブラウザは下記です。
ほとんどのブラウザで対応していますね。
three.js
three.jsとはWebGLをJavaScriptのみで扱えるライブラリです。
WebGLのみでは、座標置換やGLSL（シェーダー）等の知識も必要で学習コストが高めです。
three.jsはJavaScriptのみで制作できることに限らず、GitHubで56,000スターを超える人気ライブラリであり、参考サイトやプラグインが充実しているのも特徴です。WebGLを扱いやすくするもの、と認識しておけば問題ないです。
three.jsの主なクラス
Scene（シーン）
3Dシーンを管理するためのものです。
たとえばこのシーンにはどんなオブジェクトを使うのか、あるいはどんなカメラを使って撮影を行うのかなど、3D空間全体の情報をまとめて持っているのが Sceneオブジェクトです。
Mesh（メッシュ）
Scene内に配置されるオブジェクトです。
GeometryとMaterialを組み合わせたもので、Sceneに置かれたMeshは、Cameraで撮影を行ってブラウザに表示されます。
Geometry（ジオメトリ）
直方体や球体などの形状を設定するデータです。
Material（マテリアル）
モデルの質感を設定するデータです。
色やテクスチャーを調整できます。
Camera（カメラ）
Scene内のオブジェクトを撮影するためのカメラです。
現実世界のカメラと同じように空間を撮影するために使われ、カメラの性能や性質によって、描写が変わります。
Renderer（レンダラー）
撮影した3Dモデルを画面に表示するためのレンダラーです。
デモ
簡単な例として球体を作っていきます。
three.jsを読み込み、ベースとなるcanvas要素を用意します。
index.html<canvas id="Canvas"></canvas>
Sceneの作成
script.jsconst scene = new THREE.Scene();
Meshの作成
script.js//Geometry作成
const geometry = new THREE.IcosahedronGeometry( 180, 3 );
//Material作成
const material = new THREE.MeshBasicMaterial({color: 0xa6b5d7, wireframe: true});
//Mesh作成（geometry + material）
const box = new THREE.Mesh(geometry, material);
//Meshをsceneに追加
scene.add(box);
Cameraの作成
script.jsconst camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000)
Rendererの作成
script.jsconst renderer = new THREE.WebGLRenderer({
//canvas要素との紐付け
canvas: document.querySelector('#Canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
アニメーションとループ処理の追加
script.jsfunction animate() {
box.rotation.x += 0.005;
box.rotation.y += 0.010;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
完成形と最終的なソースコードはこちらです。
script.jswindow.addEventListener('load', init);
function init() {
const width = window.innerWidth;
const height = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, width / height);
camera.position.set(0, 0, +1000);
const geometry = new THREE.IcosahedronGeometry( 250, 4 );
const material = new THREE.MeshBasicMaterial({color: 0xa6b5d7, wireframe: true});
const box = new THREE.Mesh(geometry, material);
scene.add(box);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#Canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
function animate() {
box.rotation.x += 0.003;
box.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
}
今回使用したGeometryやMaterialは数ある中の1つなので色々試してみるのも楽しいです。
three.jsの公式サイトではWebGLを採用したアプリケーションが多く掲載されていますので、参考にしてみてはいかがでしょうか？
それでは！