マテリアルの種類 Three.jsの使い方を勉強してみた
- 2021.05.20
- 01_技術ブログ Three.js
- #Javascript
こんにちは！
Three.js学習中のdynaです。
この記事は、 Three.jsのマテリアルの種類（一部）について記録した記事です！
楽しいのですが、複雑になるほど奥が深い（ ＾ω＾）・・・
忘れてもいいように記録に残していきたいと思いますので、お時間ある方は流し見してみてください（＾＾）
マテリアルの種類のデモ↓
See the Pen three.js マテリアル学習 by dyna (@sakudyna) on CodePen.
マウスや（スマホの場合は）指で動かすと、いろんな角度から見れるので試してみてね（＾＾）
今までのThree.jsの内容はこちら↓
では種類をザーッと記載していきます！
目次
MeshBasicMaterial
単純な色を設定するか、ワイヤーフレームを表示できる基本的なマテリアル。
ライトの反応は受けない。
1 2 3 4 | //箱の作成 MeshBasicMaterial const materialbox = new THREE.MeshBasicMaterial( {color: 0x3edbf0}); |
ワイヤーフレームだとこんな風に見えるよ。
1 2 3 | const materialbox = new THREE.MeshBasicMaterial({color: 0x3edbf0, wireframe: true}); |
MeshNormalMateria
面の色を法線ベクトルに従ってRGBカラーにマッピングするマテリアル。
1 2 3 4 | //箱の作成 MeshNormalMaterial const materialboxN = new THREE.MeshNormalMaterial( {color: 0x3edbf0}); |
MeshLambertMaterial
くすんだ見た目の、光を鈍く反射する表面のマテリアル。
1 2 3 4 | //箱の作成 MeshLambertMaterial const materialboxL = new THREE.MeshLambertMaterial( {color: 0x3edbf0}); |
MeshPhongMaterial
光沢のある表面のマテリアル。
1 2 3 4 | //箱の作成 MeshPhongMaterial const materialboxP = new THREE.MeshPhongMaterial( {color: 0x3edbf0}); |
この辺は球のサンプルなんかでよく見るよね。
金属っぽい感じかな？？
MeshToonMaterial
アニメのような輪郭や、陰影がつくマテリアル。
1 2 3 | const materialboxT = new THREE.MeshToonMaterial( {color: 0x3edbf0}); |
MeshStandardMaterial
物理ベースのマテリアル。表面の粗さや金属性プロパティで表示できる。
1 2 3 4 | //箱の作成 MeshStandardMaterial const materialboxS = new THREE.MeshStandardMaterial( {color: 0x3edbf0}); |
MeshDepthMaterial
ジオメトリを深さ（近いと白、遠いと黒）で描画するためのマテリアル。
カメラからの距離で深さを描画する。
1 2 3 4 | //箱の作成 MeshDepthMaterial const materialboxD = new THREE.MeshDepthMaterial(); |
Shader Materialもあるのですが、これは使い方が難しかったので、調査・サンプルを作ってみてまた記事にしたいと思います！！
早く何か作ってみたい・・・！！！
自分で描いたものを早く作ってみたいですね（＾＾）
ここまで読んで下さりありがとうございます。
アニメも映画も見放題！31日間無料！
