- 新卒ブログとは?
- 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。
こんにちは、新米エンジニアのにっしーです!
先日、友人宅でルービックキューブに挑戦するも、まったく歯が立たず……。「そうだ、Three.jsで脳内シミュレーションすれば構造的に理解できるはず!」とチャレンジしてみた結果、見事に脳がショートしました😇
そんなことはさておき、Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」をThree.js Journeyという教材を使いながら、勉強しています。
前回までは制作物を紹介していましたが、今回は基礎的な部分であるマテリアルの概要と種類をまとめていきたいと思います。

Three.jsで3DCGを作ろう!〜環境マッピングでツルツル鏡面球体〜
画面を触ることで見え方が変わるので、ぜひいじくりまわしてください。
※導入方法などは端折らせていただきます。あらかじめご了承ください。
目次
マテリアルとは
オブジェクトの表面の質感設定のことです。ツルツルさせたりザラザラさせたりするだけでなく、色や陰影なども変更できるので、オブジェクトの見栄えに大きく関わってきます。
マテリアルの種類
Three.jsのマテリアル9種をコードと実行画面と合わせて紹介していきます。
① MeshBasicMaterial
光源の影響を受けず、指定された色やテクスチャで均一に描画されるもっとも基本的な材質。
// 1-1. 初期値 const material = new THREE.MeshBasicMaterial() /* * materialに任意の設定を追加 */ // 1-2. テクスチャの貼り付け material.map = doorColorTexture // 1-3. 塗り潰し material.color = new THREE.Color(0x00ff00) // 1-4. 骨組みの表示 material.wireframe = true // 1-5. 透明度の有効化 material.transparent = true material.opacity = 0.5 // 1-6. 両面描画 // 6B:反映 6C:未反映 material.side = THREE.DoubleSide // シーンに追加 scene.add(material)
② MeshNormalMaterial
オブジェクトの法線(面の向き)ベクトルを色として描画する、主にデバッグ用途で使われる材質。
// 2-1. 初期値 const material = new THREE.MeshNormalMaterial() // 2-2. オブジェクト表面をカクカクさせる(defalt false) material.flatShading = true scene.add(material)
③ MeshMatcapMaterial
シーンの光源を必要とせず、専用のテクスチャ画像に基づいて陰影や反射を擬似的に表現する材質。
// 3-1. 初期値 const material = new THREE.MeshMatcapMaterial() // 3-2. オブジェクトにリアルな質感や光沢をつける material.matcap = matcapTexture scene.add(material)
④ MeshDepthMaterial
オブジェクトの色彩や光源を無視し、カメラからの深度(距離)のみを描画するための材質。
// 4-1. 初期値 const material = new THREE.MeshDepthMaterial() scene.add(material)
⑤ MeshLambertMaterial
光沢(ハイライト)がなく、拡散反射のみを計算するマットな質感の材質。
// 5-1. 初期値 const material = new THREE.MeshLambertMaterial() scene.add(material)
⑥ MeshPhongMaterial
鏡面反射による光沢(ハイライト)を持つ、滑らかな質感の材質。
// 6-1. 初期値 const material = new THREE.MeshPhongMaterial() // 6-2. 光沢の設定 material.shininess = 100 material.specular = new THREE.Color(0x1188ff) scene.add(material)
⑦ MeshToonMaterial
陰影を意図的に段階化し、セル画のようなトゥーン調の見た目を実現する材質。
// 7-1. 初期値 const material = new THREE.MeshToonMaterial() // 7-2. 陰影とグラデーションの設定 gradientTexture.minFilter = THREE.NearestFilter gradientTexture.magFilter = THREE.NearestFilter gradientTexture.generateMipmaps = false material.gradientMap = gradientTexture scene.add(material)
⑧ MeshStandardMaterial
物理ベースレンダリング(PBR)に対応し、金属や粗さなどのパラメータでリアルな質感を表現する現在の標準的な材質。
// 8-1. 初期値 const material = new THREE.MeshStandardMaterial() // 8-2 半透明に変更 material.transparent = true // 8-3 ドアのテクスチャの設定 material.metalness = 1 material.roughness = 1 material.map = doorColorTexture material.aoMap = doorAmbientOcclusionTexture material.aoMapIntensity = 1 // 8-4 より立体的に見せる設定 material.displacementMap = doorHeightTexture material.displacementScale = 0.1 material.metalnessMap = doorMetalnessTexture material.roughnessMap = doorRoughnessTexture material.normalMap = doorNormalTexture material.normalScale.set(0.5, 0.5) material.alphaMap = doorAlphaTexture scene.add(material)
⑨ MeshPhysicalMaterial
StandardMaterialを拡張し、クリアコート(ニス層)や、より高度な透過表現などを可能にした材質。
// 9-1 初期値 const material = new THREE.MeshPhysicalMaterial() // 9-2 ドアのテクスチャの設定 material.metalness = 1 material.roughness = 1 material.map = doorColorTexture material.aoMap = doorAmbientOcclusionTexture material.aoMapIntensity = 1 material.displacementMap = doorHeightTexture material.displacementScale = 0.1 material.metalnessMap = doorMetalnessTexture material.roughnessMap = doorRoughnessTexture material.normalMap = doorNormalTexture material.normalScale.set(0.5, 0.5) material.transparent = true material.alphaMap = doorAlphaTexture scene.add(material)
参考資料
まとめ
今回はマテリアルの種類について紹介しました。個人的にMeshToonMaterialが某ゲームに似ているので好みでした。
なんちゃって程度に設定についても記載しましたが、組み合わせることでもっといろんなものを表現できるのでぜひやってみてください! 無限の可能性あり。
見た目を確定するための超重要な要素になるので、より深く理解できるように引き続き勉強していきたいです!
次はより実践的にパーティカルを用いたアニメーション実装か、Blander等で作ったものをThree.js上にもってくるかのどちらかに挑戦してみようと思います!
- 日本・フィリピン・ベトナムでの活躍チャンス
- 最先端技術と多言語環境での成長
- 有識者による月1回の勉強会
現在、海外拠点(フィリピン、ベトナム)に関われるエンジニアを募集しています。日本だけじゃなく世界で活躍することに興味のある方は、以下よりぜひご応募ください!