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