はじめに
みなさんは、Three.jsでマテリアルを作りたいと思ったことはありますか？
この記事では、Three.jsを使ってマテリアルを紹介しようと思います！
MeshBasicMaterial
クラスはライティングを考慮しないマテリアルです。陰がつかないので均一な塗りつぶした状態になります。開発中にライティングを無視して、動作確認するときに役立ちます。
const material = new THREE.MeshBasicMaterial()
MeshNormalMaterial
ノーマルのカラーをRGBで可視化するマテリアルです。
ライティングを必要としないため、手軽に動作確認するときに役立ちます。
const material = new THREE.MeshNormalMaterial()
MeshMatcapMaterial
マテリアルの色とシェーディングを再現するマテリアルです。
球体のように見えるようにするには、テカリを反映したテクスチャを用意する必要があります。
const material = new THREE.MeshMatcapMaterial()
MeshDepthMaterial
カメラのnearの値に近い部分が白、farの値に近い部分が黒になるマテリアルです。
const material = new THREE.MeshDepthMaterial()
MeshLambertMaterial
光沢感のないマットな質感を表現できるマテリアルです。
陰がでるため奥行き感を表現できます。だだ、陰影を表現するためには、ライトが必要となります。
const material = new THREE.MeshLambertMaterial()
MeshPhongMaterial
光沢感のある質感を表現できるマテリアルです。
const material = new THREE.MeshPhongMaterial()
MeshToonMaterial
アニメのようなトゥーンシェーディングを実現できるマテリアルです。
const material = new THREE.MeshToonMaterial()
MeshStandardMaterial
物理ベースレンダリングのマテリアルです。
物理ベースレンダリングは多くの3Dアプリケーションで実装されているもので、光の反射や散乱など現実の物理現象を再現します。
const material = new THREE.MeshStandardMaterial()
MeshPhysicalMaterial
MeshStandardMaterial より、高度な物理ベースのレンダリング プロパティを持っているマテリアルです。
異方性やクリアコート、虹彩効果、物理ベースの透明度、高度な反射率、光沢がサポートされています。
const material = new THREE.MeshPhysicalMaterial()
マテリアルを操作する
テクスチャを反映する
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/image.png')
// ↓ こっちか
const material = new THREE.MeshBasicMaterial({ map: texture })
// ↓ こっち
const material = new THREE.MeshBasicMaterial()
material.map = doorColorTexture
色をつける
// ↓ こっちか
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" })
// ↓ こっち
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color('#ff0000')
material.color = new THREE.Color('#f00')
material.color = new THREE.Color('red')
material.color = new THREE.Color('rgb(255, 0, 0)')
material.color = new THREE.Color(0xff0000)
ワイヤーフレームを表示する
material.wireframe = true
不透明度を変化させる
material.transparent = true
material.opacity = 0.5
アルファマップを使う
material.transparent = true
material.alphaMap = doorAlphaTexture
マテリアルの反映させる面を設定する
material.side = THREE.FrontSide // 前面側
material.side = THREE.BackSide // 裏面側
material.side = THREE.DoubleSide // 両面側
荒さを調整する
material.metalness = 0.45
メタルを調整する
material.roughness = 0.65
アンビエント・オクルージョンを調整する
material.map = texture
法線マップを調整する
material.normalMap = texture
クリアコートを調整する
material.clearcoat = 1
material.clearcoatRoughness = 0
シーンを調整する
material.sheen = 1
material.sheenRoughness = 0.25
material.sheenColor.set(1, 1, 1)
虹彩を調整する
material.iridescence = 1
material.iridescenceIOR = 1
material.iridescenceThicknessRange = [ 100, 800 ]
伝播を調整する
material.transmission = 1
iorを調整する
material.ior = 1.5
厚さを調整する
material.thickness = 0.5
まとめ
この記事では、Three.jsを使ってマテリアルを紹介しました。
ぜひこの記事を参考にマテリアル作成にこだわってみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。