【入門】Three.jsでオブジェクトに影をつけてみた

Three.jsで箱に影をつけたThree.js

こんにちは、たかです。

本業と育児の合間でプログラミングを学習しています。

3Dアニメーションを学ぼうと思って、Three.jsを勉強し始めました。

その覚書として書いていきます。

前回は、様々な質感の立方体を作る練習をしました。

今回は、立方体に影をつけたいと思います。

影をつけるために必要なこと

以下の手順を踏むことで、影を表現することが出来ます。

①レンダラーの影を有効化する
②ライトの影を有効化する
③影を受けるオブジェクトを作り、影を受ける
④影を落とすオブジェクトを作り、影を落とす

レンダラーの影を有効化する

shadoMapプロパティというものを以下のように有効にします。
renderer.shadowMap.enabled = true;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
 canvas: document.querySelector("#myCanvas"),
 antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

//レンダラー:影を有効化する
renderer.shadowMap.enabled = true;

ライトの影を有効化する

照明 light のcastShadow プロパティというものを以下のように有効化します。
light.castShadow = true;

// 照明を作成
const light = new THREE.SpotLight(0xffffff, 2, 100, Math.PI / 4, 1);
// ライトに影を有効にする
light.castShadow = true;

影を受けるオブジェクトを作り、影を受ける

今回、影を受ける平面を作り、影を受け取るようにします。
影を受けるには、receiveShadowプロパティというものを以下のように有効化します。
floor.receiveShadow = true;

//影を受ける平面を作成
const floor = new THREE.Mesh(
 new THREE.BoxGeometry(2000, 0.1, 2000),
 new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.0 })
);
//影を受ける
floor.receiveShadow = true;
scene.add(floor);

影を落とすオブジェクトを作り、影を落とす

今回は、立方体から影を落とします。
(向かって右上から照明を当てたような感じをイメージして作りました。)
影を落とすには、castShadowプロパティというものを以下のように有効にします。
cube.castShadow = true;

// 立方体を作成
const cube = new THREE.Mesh(
 new THREE.BoxGeometry(5, 10, 5),
 new THREE.MeshToonMaterial({ color: 0xffd700 })
);
cube.position.set(0, 0, 0);
//影を落とす
cube.castShadow = true;
// 3D空間にメッシュを追加
scene.add(cube);

補足

デフォルトの設定だと影の解像度が低い状態でした。
以下のように照明のshadow.mapSize.width (height)プロパティの値を変更することで解像度をあげられるようです。
2の累乗を値として使用し、デフォルト値は512でした。

light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;

まとめ

以下のプロパティ操作を覚えることで、影を表現することはできるということがわかりました。

①レンダラーの影を有効化する
⇒ renderer.shadowMap.enabled = true;
②ライトの影を有効化する
⇒ light.castShadow = true;
③影を受けるオブジェクトを作り、影を受ける
⇒ floor.receiveShadow = true;
④影を落とすオブジェクトを作り、影を落とす
⇒ cube.castShadow = true;

今回のコードはこちら

最後に

最後まで読んでいただき、ありがとうございます。

今回も短いですが、以上です。

今後もThree.jsを勉強したことをアウトプットしていきます。。

※現在、もりけん塾の森田先生に学習のフォローをしていただいております。

もりけん塾では JavaScript の課題に取り組んでいます!

もりけん塾Twitterはこちら(@terrace_tech)

先生のブログはこちら↓↓↓

コメント

タイトルとURLをコピーしました