three.js概論#1

2024/6/7

three.jsとは

公式サイト

three.jsは3DグラフィックスをWebブラウザ上で表示するためのJavaScriptライブラリ。
Three.jsを使用することで、HTML5のcanvas要素やWebGL（Web Graphics Library）を利用して、複雑な3Dシーンを簡単に描画することができる。

WebGL

WebGL（Web Graphics Library）は、Webブラウザ上で3Dグラフィックスを描画するためのJavaScript API。
各ブラウザーと互換性があり、GPUを使用するため3Dグラフィックスを高速で描画することができる。

WebGLで3Dグラフィックスを描画するためには、JavaScriptでGLSL（OpenGL Shading Language）というシェーダー言語を使用する必要がある。
three.jsは、WebGLを使用するためのラッパーライブラリで、GLSLを使用することなく3Dグラフィックスを描画することができる。

インストール

公式ドキュメントでは、npmとビルドツール(vite)を使用してthree.jsをインストールすることを推奨している。

npmでインストールする場合は以下のコマンドを実行する。

Terminal window
# three.js
npm install --save three


# vite
npm install --save-dev vite
index.js
import * as THREE from 'three';


...

シーンを作成

three.jsで画面上に何かを表示させるには、シーン、カメラ、レンダラー、オブジェクトが必要。

index.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="/index.js"></script>
  </body>
</html>
index.js
import * as THREE from "three";


// シーン
const scene = new THREE.Scene();


// カメラ
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.z = 3;


// レンダラー
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// オブジェクト
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);


// DOMにレンダラーを追加
document.body.appendChild(renderer.domElement);

シーンをレンダリング

レンダラーのrenderメソッドを使って、シーンをレンダリングする。
requestAnimationFrameメソッドを使って、フレームごとにレンダリングを行う。

index.js
function tick() {
  //　フレームごとに実行
  requestAnimationFrame(tick);


  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;


  renderer.render(scene, camera);
}


tick();
back