WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： さすけ
カテゴリー： プログラム >JavaScript

前回は、CDNを使って手軽にThree.jsで立方体を表示させる方法を解説しました。ワイヤーフレームの立方体や真っ赤な立方体が回る様子は確認できたかと思います。
しかし、3D表現の本質は「光の当たり方」で決まると言っても過言ではありません。今回は、前回の立方体に「ライティング（光）」を追加して、より立体的な見た目にする方法を解説します！

まだ前回の記事が読めてない方はこちら↓↓
【入門】Three.jsの環境構築のやり方とは？初めての方に向けて解説！

なぜ「ライティング」が必要なのか？

前回のコード（MeshBasicMaterial）では、光の計算を行わないため、どの角度から見ても色が均一で「のっぺり」とした印象でした。

光を当てると、「影」や「反射」が生まれます。これにより、オブジェクトの輪郭がはっきりし、存在感や奥行きが格段に増すのです。

ライティングを実装するための準備

光を扱うには、まずは「材質（マテリアル）」を光に反応するものへ変更する必要があります。
MeshBasicMaterial を MeshStandardMaterial に変更しましょう。これが「光を受け止める材質」です。

// 前回のコードの修正
const material = new THREE.MeshStandardMaterial({ 
  color: 0x00ff00 
});

光を追加してみよう

Three.jsには様々な種類のライトがありますが、まずは代表的な2つを紹介します。

環境光（AmbientLight）

シーン全体を均一に照らします。これがないと、光が当たっていない面が真っ暗になってしまうため、ベースの光として使います。

// 環境光（強さ0.5）を追加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

平行光源（DirectionalLight）

太陽光のように、特定の方向から平行に降り注ぐ光です。これを使うことで、面に明暗差が生まれ、立体感が強調されます。

// 平行光源を追加（白、強さ1）
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1); // 右斜め上から照らすイメージ
scene.add(directionalLight);

まとめ

これらを組み合わせると、先ほどの立方体が見違えるほど綺麗になります。

// 全体の流れ
const scene = new THREE.Scene();
// ...カメラ、レンダラー設定...

// 1. 材質をStandardに変更
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 2. 光を追加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// ...animate関数...

最後に

光の強さ（Intensity）や光を当てる位置（Position）を変えるだけで、立方体の表情が大きく変わることがお分かりいただけたでしょうか。

ライティングは、3D制作において最もクリエイティブな作業の一つです。ぜひ、さまざまなパラメータを調整しながら、自分だけの光の演出を楽しんでみてください！