前回の記事で、3Dオブジェクトや立体的な動きが目立つWebサイトがAwwwardsでよく受賞されていることがわかりました。
では、こういった3DオブジェクトをWebページ上で動かすにはどうすればよいのでしょうか。
今回は、ブラウザ上で3Dグラフィックを表示する方法を解説いたします。
WebGLとは？
ブラウザ上で3Dオブジェクトを表示するために、WebGLというものが用いられています。
WebGLとはJavascript APIの一つです。
Javascriptはプログラミング言語の一つ。
APIは元々ある何かのシステムやサービスを連携させて利用するためのものです。
つまり自分で開発するとすっごく難しくて時間がかかるようなシステムを、誰かが皆んなで使えるように提供してくれているもの、ということですね。
WebGLはブラウザ上で3Dグラフィックを高速で描画してくれるものの、そのためには複雑なコーディングが必要になります。
そこで、この記事ではThree.jsを使用して3Dオブジェクトをブラウザ上で表示する方法を解説いたします。
Three.jsとは？
Three.jsとは、WebGLを使用して3Dグラフィックスを描画するためのものです。
Three.jsを利用して制作されたサイトを見てみましょう。
どれも斬新で面白いものばかりです。
Three.js
https://threejs.org/
3Dオブジェクトをブラウザで表示してみよう
※注意：今はこのコードでは表示されないので、記事の一番下のコードをご参照ください
ではさっそく、Three.jsを使用して3Dオブジェクトをブラウザで表示してみましょう。
公式サイトのマニュアルを参考に設定していきます。
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
下記コードをテキストアプリなどに貼り付け、”index.html”など任意のファイル名を付けて拡張子.htmlで保存してください。
そのファイルをブラウザで開くと、緑色の立方体がくるくると回ります。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src=”https://threejs.org/build/three.js”></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
ページ下部にコードのデモがあります。
DEMO
Three.jsコード解説
<script>タグ内のコードを解説していきます。
シーン(空間)の設定：const scene = new THREE.Scene();
シーンには3Dオブジェクト、ライト、カメラなどを含めることができます
カメラの設定：const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
視野角が75度、アスペクト比が画面の幅と高さの比率、描画する範囲が0.1から1000の間に設定
レンダラーの設定：const renderer = new THREE.WebGLRenderer();
レンダリングするサイズ：renderer.setSize( window.innerWidth, window.innerHeight );
windowの幅と高さにレンダリングエリアを設定
body要素の直下に表示：document.body.appendChild( renderer.domElement );
BoxGeometryでキューブを作成：const geometry = new THREE.BoxGeometry( 1, 1, 1 );
各辺の長さが1の立方体を作成
マテリアルと色を設定：const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
MeshBasicMaterialはThree.jsのマテリアルの一種。色は#00ff00の明るい緑
Meshオブジェクトを作成：const cube = new THREE.Mesh( geometry, material );
先ほど作成したgeometoryとmaterialを引数に追加。
Meshオブジェクトとは3D空間内に表示されるオブジェクトのこと。
Meshオブジェクトをシーンに追加：scene.add( cube );
カメラのZ軸座標軸を設定：camera.position.z = 5;
カメラを立方体から５単位離れた位置に設定
アニメーションを作成するための関数animateを定義：function animate() {
アニメーションを実行の指示：requestAnimationFrame( animate );
x軸の回転量を0.01度：cube.rotation.x += 0.01;
y軸の回転量を0.01度：cube.rotation.y += 0.01;
レンダリング：renderer.render( scene, camera );
シーンをカメラから見た画面にレンダリング
};
animateを実行：animate();
まとめ
Webサイトに3Dオブジェクトを表示するためには、WebGLを使用して3Dグラフィックを描画するThree.jsを利用してみましょう。
Webサイト制作について
お気軽にご相談ください
Webサイト制作のプロフェッショナル
GROUND Creative Division
追記：今はコードが違うみたいです
先ほどのコードだと今は表示されないようですので、こちらをご参照ください。
<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three.js Simple Cube</title> <style> body { margin: 0; } canvas { display: block; } </style>
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // シーン、カメラ、レンダラーの作成 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // キューブの作成 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; // アニメーション関数 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script>
</body>
</html>
