はじめに

WebGLをできるようになりたいとおもい、WebGLのライブラリーである Three.js の勉強を始めました。
そのため、この記事では、Three.jsで画面上にオブジェクトを表示するところまでを紹介しようと思います。

この記事のゴール

この記事では↓ これを作ることをゴールとします。

See the Pen Three.js - camera (OrthographicCamera) by でぐぅー | Qiita (@sp_degu) on CodePen.

Three.jsで画面上にオブジェクトを表示させるには？

画面上にオブジェクトを表示させるには、以下の4つの要素が必要です。

オブジェクトが含まれるScene
オブジェクト
カメラ
レンダラー

この記事では、これらの作り方を紹介します。

作り方

1. Sceneを作成する

Sceneはコンテナのようなものです。
オブジェクト（モデルやパーティクル、ライトなど）をSceneに配置し、そのSceneをレンダリングすることで、オブジェクトを画面上に表示させることができます。

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

2. オブジェクトを作る

オブジェクトには以下のようなものがあります。

primitive Geometry（立方体や円柱、円錐 etc.）
インポートされたモデル（Blenderなどで作られた3Dモデル etc.）
パーティクル
ライト

この記事では、立方体を作っていきます。

立方体を作るには、GeometryとMaterialで、Meshを作成します。

そのため、
立方体のGeometryを作って、
Materialを作って、
GeometryとMaterialでMeshを作って、
MeshをSceneに追加する
という処理を行います。

◯ 立方体のGeometryを作る

立方体のGeometryを作るには、BoxGeometry というクラスを使います。

BoxGeometryは、↓このように使います。

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

width
- 立方体の幅
- x軸に並行な辺の長さ
height
- 立方体の高さ
- y軸に並行な辺の長さ
depth
- 立方体の奥行き
- z軸に並行な辺の長さ
widthSegments
- 辺の幅に沿ったセグメント化された長方形の面の数
heightSegments
- 辺の高さに沿ったセグメント化された長方形の面の数
depthSegments
- 辺の奥行きに沿ったセグメント化された長方形の面の数

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// 立方体のGeometryを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)

◯ Materialを作る

単色のMaterialを作るには、MeshBasicMaterialというクラスを使います。

MeshBasicMaterialは、↓このように使います。

MeshBasicMaterial(parameters)

parameters
- マテリアルの外観を定義する 1 つ以上のプロパティを持つオブジェクト

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// 立方体のGeometryを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)

// Materialを作る
const material = new THREE.MeshBasicMaterial({ color: '#FF0000' })

◯ Meshを作る

Meshを作るには、Meshというクラスを使います。

Meshは、↓このように使います。

Mesh( geometry, material )

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// 立方体のGeometryを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)

// Materialを作る
const material = new THREE.MeshBasicMaterial({ color: '#FF0000' })

// Meshを作る
const mesh = new THREE.Mesh( geometry, material )

◯ オブジェクトをSceneに追加する

Meshができたら、Sceneに追加します！

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// 立方体のGeometryを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)

// Materialを作る
const material = new THREE.MeshBasicMaterial({ color: '#FF0000' })

// Meshを作る
const mesh = new THREE.Mesh( geometry, material )

// Sceneに追加する
scene.add(mesh)

2. カメラを作る

カメラは画面に表示させる視点のことです。
複数のカメラを用意すれば、必要に応じて切り替えることもできます。

カメラを作るには、PerspectiveCameraというクラスを使います。

PerspectiveCameraは、↓このように使います。

PerspectiveCamera(field of view, aspect ratio, near, far)

field of view：画角（45~75くらい）
aspect ratio：アスペクト比
near・far：レンダリングの距離
- nearの値より近いオブジェクトはレンダリングされない
- farの値より遠いオブジェクトはレンダリングされない

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// オブジェクトを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: '#FF0000' })
const mesh = new THREE.Mesh( geometry, material )
scene.add(mesh)

// カメラを作る
const sizes = {width: 1920, height: 1080}
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3 // カメラの位置を調整
scene.add(camera)

4. レンダリングする

ここまで揃ったら、レンダリングしていきます！

レンダリングするには、HTMLの<canvas>を取得し、WebGLRendererというクラスを使います。

sample.html

<canvas class="webgl"></canvas>

sample.js

import * as THREE from 'three'

// Sceneを作る
const scene = new THREE.Scene()

// オブジェクトを作る
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: '#FF0000' })
const mesh = new THREE.Mesh( geometry, material )
scene.add(mesh)

// カメラを作る
const sizes = {width: 1920, height: 1080}
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3 // カメラの位置を調整
scene.add(camera)

// レンダリング
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({canvas: canvas})
renderer.render(scene, camera)

まとめ

この記事では、Three.jsで画面上にオブジェクトを表示するところまでを紹介しようと思います。
この記事からThree.jsの勉強を始めていきます。