Three.jsを勉強し始めた話

こんにちは。KENTEM第１開発部のM.Oです。
私は3D関連のデスクトップアプリチームのマネージャをしています。
さて本日は、私が最近KENTEMの目標制度を利用して勉強し始めた、Three.jsについて書いてみます。
なお、本記事は非常に初歩的な内容となっています。

Three.jsとは？
キューブを描画してみる
おわりに

Three.jsとは？

threejs.org

ウェブブラウザ上で動作する3Dライブラリとのことです。
Three.jsを用いれば簡単にWebブラウザで3DCGを扱えるようです。

キューブを描画してみる

まずは公式ドキュメントに沿って、キューブを描画することにチャレンジしてみました。

Node.jsのインストール

Three.jsを利用するには、npmというNode.jsのパッケージマネージャからインストールするのが一番簡単な様です。
Node.jsをインストールすれば、npmも利用できるとのことなので、公式サイトからNode.jsのインストーラをダウンロードして、インストールします。

プロジェクトフォルダーの作成

次に、今回作成するサンプルアプリを管理するプロジェクトフォルダーを作成します。
今回、私は「threejs」というフォルダーを作成しました。

Three.jsのインストール

次に、作成したプロジェクトフォルダー内にThree.jsをインストールします。
ターミナルで以下のコマンドを打つことでインストールできました。

npm install three

HTMLファイルの作成

次に、Webページを定義するためのHTMLファイルを作成します。
今回、私は「threejs」フォルダー直下に「index.html」というファイルを作成して、そのファイルに以下の内容を記述しました。
（HTMLファイルの中身は、公式ドキュメントから拝借しました）

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title>My first three.js app</title>
       <style>
            body { margin: 0; }
        </style>
   </head>
    <body>
        <script type="module" src="/main.js"></script>
    </body>
</html>

JavaScriptファイルの作成

次に、Three.jsコードを実行するためのJavaScriptファイルを作成します。
今回、私は「threejs」フォルダー直下に「main.js」というファイルを作成して、そのファイルに以下の内容を記述しました。
（サンプルコードは、公式ドキュメントから拝借しました）

import * as THREE from 'three';

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();

Vite（フロントエンド開発ツール）のインストール

Three.jsを利用したプログラムが記述できたので動作確認します。
公式ドキュメントで紹介されていたVite（ヴィート）というフロントエンド開発ツールをインストールすれば、簡単に動作確認できるようなのでインストールしてみます。
Viteはターミナルで以下のコマンドを打つことでインストールできました。

npm install vite

ローカル開発サーバーの起動と動作確認

npmでインストールしたViteを実行するには、以下のコマンドを実行します。

npx vite

すると、以下の様な結果が返ってくるので、URLをブラウザに打ち込んでアクセスしてみます。

  VITE v5.1.5  ready in 194 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

キューブが表示されました！

勉強をはじめたばかりなので今はこの程度の記事しか書けませんが、これから本格的に学んでいきたいと思います。

おわりに

いかがだったでしょうか？
KENTEMには隔週に半日程度、個人の技術研究を支援してくれる制度が存在します。
ここで調査した内容は、半年に一度開催されるKENTEM TECH CONFで発表したり、さらには実際の開発プロジェクトで採用されたりといったケースもあります。
もし弊社に興味を持ってくださった方がおられましたら、以下のリンクからご応募いただけたら幸いです。

hrmos.co

hrmos.co hrmos.co hrmos.co

hrmos.co hrmos.co

hrmos.co