Three.jsで回転するキューブを描画する

Three.js

<script>” title=”<script>

<script>

Three.js とは、できるだけ簡単にWebページ上に3Dコンテンツを表示する3Dライブラリです。

今回はthree.jsの基本、回転するキューブを作成していきます。

コードはこちら

https://github.com/MakikoYamada/THREE01

【Three.js】開発環境を整える

初めにThree.jsを使うための環境を構築していきます。

CDNを使う方法 / 公式サイトからデータをDLして使う方法 / webpackなどのバンドラーを使う方法などありますが、今回はお手軽に使えるCDNを使おうと思います。

CDNを準備する

それではCDNを準備していきます。

下記コードを</body>の上に貼り付けてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Live Serverを準備する

次にローカルサーバーを準備していきます。

今回はLive Serverを利用します。Live Serverとは、簡易的なローカルサーバーを簡単に立ち上げることができるVSCodeの拡張機能です。

初心者でも簡単にローカルサーバーを立ち上げられるのでおすすめです。

【Three.js】index.htmlの準備

index.htmlは先程のCDNとmain.jsの読み込み、bodyにスタイルを追加しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js基礎</title>
    <style>
      body {
        margin: 0;
        padding:0;
        }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="main.js"></script>
  </body>
</html>

scene（シーン）、camera（カメラ）、renderer（レンダラー）

three.jsで何かものを表示するには、scene（シーン）、camera（カメラ）、renderer（レンダラー）という3つの要素が必要です。

THREE.Scene

sceneは、オブジェクト、カメラ、照明を配置できる3D空間のことです。

例えるなら発表会のステージのようなものです。何か発表会をするとなった時、ステージが必要ですよね。

three.jsでもsceneというステージが必要になります。

const scene = new THREE.Scene();

THREE.Camera

物体を映すためのカメラです。

カメラには色々種類がありますが、今回はPerspectiveCameraを使用します。

cameraはイメージしやすいと思いますが、発表会で言うとステージを映すためのカメラのようなイメージです。

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

引数は4つ、(field of view, aspect, near, far)です。

field of view：垂直方向の視野。今回は垂直方向に75度傾けています。

aspect：垂直方向から水平方向の視野を作成するために使用するアスペクト比。window.innerWidth /window.innerHeightとするとブラウザ画面の幅と高さを取得してアスペクト比を計算してます。

near：カメラの視野が始まる最も近い場所。

far：カメラの視野が終わる最も遠い場所。

THREE.WebGLRenderer

元の単語となる「レンダリング」は「もとになる情報を整形して表示する」という意味があります。

イメージとしては、発表会の映像を映し出すようなイメージです。

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

また描画するサイズを設定する必要があるため、setSize( window.innerWidth, window.innerHeight )として縦横幅いっぱいに設定します。

以上がthree.jsで何かものを表示するために必要な3つの要素でした。次に実際にキューブを作成していきます。

キューブの作成

THREE.BoxGeometry / THREE.MeshPhongMaterial / THREE.Mesh

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);

キューブを作成するには、①形状を表すジオメトリ②材質を表すマテリアル③ジオメトリとマテリアルを繋ぐメッシュが必要です。

まず初めにTHREE.BoxGeometryで、キューブのすべての点 (頂点) および塗りつぶし(面)を含むオブジェクトを作成します。

次にTHREE.MeshPhongMaterialで色をつけますが、マテリアルには色々種類があります。今回はMeshPhongMaterialを使って光沢感のある質感を表現します。

THREE.DirectionalLightは位置とターゲットを持っています。どちらもデフォルト値は 0, 0, 0 です。 今回はライトの位置を -1、2、4 に設定しているため、カメラの後ろの少し左上側にあります。

マテリアルは他にもたくさん表現方法があるので、こちらを参考に他の表現も試してみてください。

最後にメッシュです。ジオメトリを受け取り、それにマテリアルを適用するオブジェクトのことで、シーンに挿入して使います。

デフォルトだと、カメラが近すぎて何も映らないため、camera.position.z = 5としてカメラを少しずらします。

以上がキューブの作成になります。

sceneのレンダリング

キューブの設定も済んだし、表示されてるかな！と思ってブラウザを見ても、残念ながらまだ何も表示されていません。（あと少し！）

レンダラーの描画関数にシーンとカメラに渡し、シーンをレンダリングさせる必要があります。

renderer.render(scene, camera);

するとこんな感じに表示されます。

ここからの視点だけだと2Dなのか3Dなのかわからないため、回転アニメーションをつけて3Dだとわかるようにしていきます。

アニメーションさせるには requestAnimationFrame を使用しループ処理内で描画します。

function animate() {
	requestAnimationFrame( animate );
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render( scene, camera );
}
animate();

するとキューブが回転し、3Dであることがわかりやすくなりました。

最後に下記コードを追加して、ウィンドウサイズを変更しても、幅と高さを維持してくれるようにします。

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener("resize", onWindowResize);

以上がthree.jsで回転するキューブの作り方でした。