このセクションでは、3Dで利用できる様々な材質 (マテリアル) を学びます。
3Dオブジェクトの見た目を変更するには、マテリアルを変更します。
マテリアルは、オブジェクトに色や質感を与えるものです。
マテリアルを変更するには、オブジェクトの作成時に material を指定します。
create.cube({ material: "マテリアル名" })デフォルトでは、"Physical" が設定されています。
使用できる主なマテリアルは、次の通りです。
Basic : 光の影響を受けない、単色のマテリアル。とても軽い。Phong : 光沢感のあるマテリアル。軽い。Lambert : マットな質感のマテリアル。軽い。Standard : 物理ベースの(よりリアル感のある)マテリアル。Physical : Standard マテリアルを拡張したマテリアル。Toon : トゥーンシェーディング(3Dアニメ調)のマテリアル。Normal : 法線マップを使ったマテリアル。基本的にはデフォルトの Physical を使えば マットな質感から光沢感、ガラス表現など全て問題ありません。
ただし、Physicalマテリアルは重いので、 オブジェクトの数が大量になる場合は他のマテリアルを検討してください。
Basicマテリアルは、 光の影響を受けない単色のマテリアルです。
とても軽いので、大量のオブジェクトにも適しています。
下のコードは、左側に Physical マテリアル、右側に Basic マテリアルの立方体を表示するものですが、光を入れていません。
左の Physical マテリアルは光の影響を受けますが光がないため真っ暗です。
一方、右の Basic マテリアルは光の影響を受けず、単色で表示されます。
const { camera, create, animate, controls, helper } = init();
controls.connect()
helper.grid()
helper.axes()
camera.position.set(0, 2, 2)
const physicalCube = create.cube({ position: [-1, 0, 0] })
const basicCube = create.cube({ material: "Basic", position: [1, 0, 0] })
animate(({ delta }) => {
physicalCube.rotation.x += delta
physicalCube.rotation.y += delta
basicCube.rotation.x += delta
basicCube.rotation.y += delta
})
ここで、光を入れてみましょう。
const { camera, create, animate, controls, helper } = init();
controls.connect()
helper.grid()
helper.axes()
camera.position.set(0, 2, 2)
create.ambientLight()
create.directionalLight()
const physicalCube = create.cube({ position: [-1, 0, 0] })
const basicCube = create.cube({ material: "Basic", position: [1, 0, 0] })
animate(({ delta }) => {
physicalCube.rotation.x += delta
physicalCube.rotation.y += delta
basicCube.rotation.x += delta
basicCube.rotation.y += delta
})
Physical マテリアルは光の影響を受けるため、光を入れると立体感が出ます。
一方、Basic マテリアルは光の影響を受けないため、立体感があまり感じられません。
Phongマテリアルは、光沢感のあるマテリアルです。
Basic マテリアルよりも光の反射がリアルになりますが、 Physical マテリアルや Standard マテリアルよりもクオリティは低くなります。
Phong マテリアルで光沢感を出すには、option の shininess を 指定します。
下のコードは、左側に Physical マテリアル、右側に Phong マテリアルの立方体を表示するものです。
const { camera, create, animate, controls, helper } = init();
controls.connect()
helper.grid()
helper.axes()
camera.position.set(0, 3, 3)
create.ambientLight()
create.directionalLight()
create.sphere({
position: [-2, 0, 0],
option: {
color: "blue",
metalness: 0.6,
roughness: 0.3,
}
})
create.sphere({
material: "Phong",
position: [2, 0, 0],
option: {
color: "blue",
shininess: 90,
}
})
animate()
Lambertマテリアルは、マットな質感のマテリアルです。
Phong マテリアルよりも質感がマットで、光の反射が少ないです。
下のコードは、左側に Physical マテリアル、右側に Lambert マテリアルの立方体を表示するものです。
const { camera, create, animate, controls, helper } = init();
controls.connect()
helper.grid()
helper.axes()
camera.position.set(0, 3, 3)
create.ambientLight()
create.directionalLight()
create.sphere({ position: [-2, 0, 0] })
create.sphere({ material: "Lambert", position: [2, 0, 0] })
animate()
Standardマテリアルは、物理ベースのマテリアルです。
Basic マテリアルや Phong マテリアル、Lambert マテリアルよりもリアル感があります。
利用方法はほぼ Physical マテリアルと同じなので割愛します。
Physicalマテリアルは、Standardマテリアルを拡張したマテリアルです。
Standard マテリアルよりもリアル感があり、さらにガラス表現なども可能です。
ただし、重いのでオブジェクトの数が大量になる場合は他のマテリアルを検討してください。
Physical マテリアルでは、option のmetalness で金属感を、roughness で粗さを調整できます。
下のコードは、左側に金属感を強く、粗さを少なくした球体、中央に標準的な球体、 右側に金属感を少なく、粗さを強くした球体を表示するものです。
const { camera, create, animate, controls, helper } = init();
controls.connect()
helper.grid()
helper.axes()
camera.position.set(0, 3, 3)
create.ambientLight()
create.directionalLight()
create.sphere({
position: [-2.5, 0, 0],
option: {
color: "blue",
metalness: 0.7,
roughness: 0.2,
}
});
create.sphere({
option: {
color: "blue",
metalness: 0.5,
roughness: 0.5,
},
});
create.sphere({
position: [2.5, 0, 0],
option: {
color: "blue",
metalness: 0.2,
roughness: 0.7,
}
});
animate()
Physical マテリアルでは、option のtransmission で透明度を調整できます。
また、thickness を上げることで、屈折率を上げることができます。
下のコードは、手前にガラスのような立方体、奥に標準的な立方体を表示するものです。
奥の立方体が屈折して見えるのがわかります。
const { camera, create, animate, controls, helper } = init();
controls.connect()
camera.position.set(0, 0, 2.5);
create.ambientLight();
create.directionalLight();
const cube = create.cube({
option: {
metalness: 0,
roughness: 0.1,
transmission: 0.9,
thickness: 0.4,
},
});
create.cube({ size: 3, position: [0, 0, -4] });
animate(({ delta, time }) => {
cube.rotation.x += delta;
cube.rotation.y += delta;
cube.position.set(Math.sin(time) * 2, 0, 0);
});
Toonマテリアルは、3Dアニメ調のマテリアルです。
下のコードは、左側に Physical マテリアル、右側に Toon マテリアルのトーラス結び目を表示するものです。
const { camera, create, animate, controls, helper } = init();
controls.connect()
camera.position.set(0, 0, 5);
create.ambientLight();
create.directionalLight();
const physicalTorusKnot = create.torusKnot({
position: [-2, 0, 0],
material: "Physical",
});
const toonTorusKnot = create.torusKnot({
position: [2, 0, 0],
material: "Toon",
});
animate(({ delta }) => {
physicalTorusKnot.rotation.x += delta;
physicalTorusKnot.rotation.y += delta;
toonTorusKnot.rotation.x += delta;
toonTorusKnot.rotation.y += delta;
});
Normalマテリアルは、法線マップを使ったマテリアルです。
法線マップは、オブジェクトの凹凸を表現するために使用されます。
Normal マテリアルを使うことで、面がどの方向を向いているかがわかりやすくなります。
x軸方向を向いている面は赤、y軸方向を向いている面は緑、z軸方向を向いている面は青で表示されます。
下のコードは、左側に Physical マテリアル、右側に Normal マテリアルの立方体を表示するものです。
const { camera, create, animate, controls, helper } = init();
controls.connect()
camera.position.set(0, 0, 5);
create.ambientLight();
create.directionalLight();
const physicalTorusKnot = create.torusKnot({
position: [-2, 0, 0],
material: "Physical",
});
const toonTorusKnot = create.torusKnot({
position: [2, 0, 0],
material: "Toon",
});
animate(({ delta }) => {
physicalTorusKnot.rotation.x += delta;
physicalTorusKnot.rotation.y += delta;
toonTorusKnot.rotation.x += delta;
toonTorusKnot.rotation.y += delta;
});