影の指定方法について書きます。影を作るには、照明が必要です。あと、影を落としたい物体と影を受ける物体に影の設定をします。影の設定をすること自体は難しくないと思います。
影の設定
影の設定で行うのは、以下の4つです。
- レンダラの影を有効化
- 光源の影を有効化
- 影を落としたいMeshオブジェクトに影の設定
- 影を受けるMeshオブジェクトに影の設定
影は落とす側と受ける側があります。それぞれに影の設定をします。
レンダラの影を有効化:shadowMap
// レンダラで影を有効化 renderer.shadowMap.enabled = true;
光源の影を有効化:castShadow
const light = new THREE.DirectionalLight(0xffffff); // 光源で影を有効化 light.castShadow = true; scene.add(light);
影を落としたいMeshオブジェクトに影の設定:castShadow
const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial( { color: 0x0000ff } ); // 立方体 const cube = new THREE.Mesh(geometry, material); // 影を落としたいMeshオブジェクトに影の設定 cube.castShadow = true; scene.add(cube);
影を受けるMeshオブジェクトに影の設定:receiveShadow
// 床 const meshFloor = new THREE.Mesh( new THREE.BoxGeometry(4, 0.1, 4), new THREE.MeshStandardMaterial()); // 影を受けるMeshオブジェクトに影の設定 meshFloor.receiveShadow = true; scene.add(meshFloor);
表示結果
影の解像度の指定
デフォルトだと影の輪郭がぼやけます。影の解像度を上げると輪郭がくっきりします。しかし、処理は重くなります。
// 影の解像度
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
まとめ
今回は、簡易的に影を付けました。私自身、影について表面的にしか分かっていません。陰影は奥が深いので、更に勉強が必要です。
