three.jsを散策する① 開発環境構築から描画まで

three.jsはウェブブラウザ上で３Dグラフィックを描画できるjavascriptのライブラリです。開発環境構築から描画までのプロセスを確認します。開発環境にはXAMPPを使用しています。

XAMPPで開発環境を整える

Javascriptの勉強をかねてthree.jsを学んでいこうと思います。three.jsはウェブブラウザ上で３Dグラフィックを描画できるjavascriptのライブラリです。ヴィジュアル的に楽しそうなのでthree.jsを選びました。下記リンクの公式サイトのドキュメントを参考にしていきます。執筆時のthree.jsのバージョンは0.155.0です。3Dアニメーションの基本である立方体(cube)を描画します。

three.js docs

それでは開発環境を整えていきます。公式サイトではNPMとビルドツールのviteを使う方法とCDNで読み込む方法の2種類が紹介されています。実行環境にローカルサーバーを使用するので、私の場合はPHP学習で使い慣れているXAMPPを使用していこうと思いますのでCDNで読み込む方法でいきます。XAMPPのhtdocs内にルートとなるフォルダを作成します。今回はフォルダ名をthreejsProjectとします。下記のような構成でindex.htmlとmain.jsを作成します。

フォルダ構成

threejsProject
  ├ index.html
  └ main.js

index.htmlの作成

index.htmlを下記のように作成します。main.jsファイルでthree.jsのパッケージをインポートするためinportmapの記述が必要となります。

をグラフィックの描画先とします。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>three.js app</title>
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
     {
       "imports": {
	 "three": "https://unpkg.com/three@v0.155.0/build/three.module.js",
	 "three/addons/": "https://unpkg.com/three@v0.155.0/examples/jsm/"
       }
     }
    </script>
  </head>
  <body>
    グラフィックの描画先↓↓↓<br>
    <div id="target"></div>
    グラフィックの描画先↑↑↑
    <script type="module" src="main.js"></script>
  </body>
</html>

CDNでthree.jsを読み込んでいます。three.jsのバージョンにあわせてv0155.0の部分を変えればOKです。最新のバージョンはnpm version listで確認できます。index.htmlはこれで完成です。あとはすべてmain.jsに記述していきます。

main.jsの作成

hree.jsで描画するのにはシーン（scene）、カメラ（camera）、レンダラー（renderer）が必須の要素とのこと。まずそれだけ記述してみます。公式サイトのドキュメンテーションではブラウザのウインドウサイズにあわせて描画する記載となっていますが、今回はサイズを300×200に指定してみます。

main.js

import * as THREE from 'three';

const width = 300;
const height = 200;

const scene = new THREE.Scene();//シーン
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);//カメラ

const renderer = new THREE.WebGLRenderer();//レンダラー
renderer.setSize(width, height);//サイズの指定
document.getElementById('target').appendChild(renderer.domElement);//描画先の指定

まずimportでthree.jsをパッケージを読み込み、シーン（scene）、カメラ（camera）、レンダラー（renderer）を定義します。カメラは何種類かあるようですがPerspectiveCameraを使用します。ほかのカメラについてはおいおい学んでいければと思います。PerspectiveCameraのコンストラクタは下記のようになっています。

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fovは画面に映る視界の広さ、aspectはアスペクト比、nearは描画される最も近い位置、farは描画される最も遠い位置を表します。これで背景はできたので、ここに立方体（cube）を追加します。

import * as THREE from 'three';

const width = 300;
const height = 200;

const scene = new THREE.Scene();//シーン
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);//カメラ

const renderer = new THREE.WebGLRenderer();//レンダラー
renderer.setSize(width, height);//サイズの指定
document.getElementById('target').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;//カメラの座標をずらす

ジオメトリー（geometry）とマテリアル（material）を指定してメッシュ（Mesh）に適用するといった感覚ですね。scene.addで画面にオブジェクトを追加しますが、カメラと立方体が同じ座標に追加されるためcamera.position.z = 5でカメラの座標をずらしています。あとはレンダリングします。アニメーションしているのがわかるように回転を加えています。

import * as THREE from 'three';

const width = 300;
const height = 200;

const scene = new THREE.Scene();//シーン
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);//カメラ

const renderer = new THREE.WebGLRenderer();//レンダラー
renderer.setSize(width, height);//サイズの指定
document.getElementById('target').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();

これで描画できます。XAMPPでApacheを起動してthreejsProjectにアクセスすれば描画が確認できます。

これで一通り描画のプロセスが確認できました。今回は以上となります。three.jsに興味がある方の参考になれば幸いです。

< Previous Article Next Article >

Back to Articles