イイダリョウのブログ。【Three.js】マテリアルとライティング設定(入門編に再入門!)2020-01-09【Three.js】マテリアルとライティング設定(入門編に再入門!)JSThree.jsの続きです。前回はThree.js入門のの回る箱をいろいろ打ち替えてみました。今回は「マテリアル」と「ライティング」を見てきます。クモのようにコツコツとThree.jsを習得するためにやったことまとめqiita.com入門編の「回る箱」おさらいICS「Three.js入門」の「入門編」で作った回る箱。}マテリアルとは何か今回はその続き、「Three.jsのマテリアルの基本」を見ていく。MEDIAまずマテリアルとは何か?*1該当ページにはこうある。マテリアルとは物体の質感設定のことです。代表的なマテリアルとして「単色塗りのマテリアル」と「画像を使ったマテリアル」の二種類があります。似た単語に「シェーダー」「テクスチャ」もある。マテリアルモデル表面の反射率や粗さなど、描画設定の集まり。テクスチャ色や模様を表現するビットマップ画像。シェーダーピクセル毎の描画色を計算するスクリプト。テクスチャは画像でシェーダーは設定値でその両方を含む表面の描画設定がマテリアルか。※参考:マテリアルとシェーダーとテクスチャの違いThree.jsのオブジェクト作成手順Three.js入門の該当ページにはこうある。3メッシュを作成またわからない言葉が出てきた。ジオメトリとはなんぞや?メッシュとは?Three.js入門の次ページ「ジオメトリ」に解説があった。さまざまな3Dのオブジェクトを表示できますThree.jsでは形状とマテリアルを結合しメッシュを作成することによって、表示可能な3Dのオブジェクトを得ることができます。MEDIA表面の描画設定(マテリアル)と形状(ジオメトリ)を結合して作成したメッシュがオブジェクトになると。ジオメトリには馴染みはなかったが3DCGでも一般的な言葉のようだ。ジオメトリとは、幾何学、形状、などの意味を持つ英単語。コンピュータグラフィックスにおける描画対象の形状や、形状を定義づける頂点の座標や線分、面などの図形を表す式の係数といったデータの組み合わせを意味することが多い。e-Wordsメッシュについては「ポリゴンの集まり」という意味があるようだ。30);THREE.BoxGeometry()クラスをTHREE.SphereGeometry()クラスに変更した。変数名boxも形状に影響されないようにmeshに変更した。material);変数boxが適用されている場所が二箇所あったので変更する。0xFF0000});変数materialのTHREE.MeshNormalMaterial()クラスをTHREE.MeshStandardMaterial()クラスに変更。CodePen.お、真っ暗になってしまった。Three.jsの「マテリアル」の記事にTHREE.MeshNormalMaterial()の解説があった。THREE.MeshNormalMaterialクラスはノーマルのカラーをRGBで可視化するマテリアルです。ライティングを必要としないため、手軽に動作確認するときに役立つでしょう。MEDIATHREE.MeshNormalMaterial()クラスは自ら光っているのでライトが必要なかったわけだ。通常のマテリアル設定ではライティングを設定しないと真っ暗になってしまう。ライティング設定ということでライティングを設定する。オブジェクトに光を当てるって実写的にで3Dならではな感じがするなぁ。scene.add(directionalLight);変数directionalLightにTHREE.DirectionalLight()クラスを代入。引数は0xFFFFFF(白色)directionalLightのpositionオブジェクトのset()メソッドに引数を3つ(いずれも値は1)sceneにdirectionalLightを追加するTHREE.DirectionalLightクラス平行光源。ライトの位置と方向を指定し平行に到達する光として使用できます。THREE.DirectionalLightは一箇所から直線上に照らしている光。太陽とか電灯みたいなイメージ。THREE.AmbientLightクラス環境光。空間全体を照らす光として使用できます。CodePen.お、赤い球体が出てきた!マテリアルに画像を配置する最後に、マテリアルを色ではなくビットマップ画像を配置してみる。変数textureにloaderのload()メソッドで画像ファイルを読み込み変数materialのTHREE.MeshStandardMaterial()クラスの引数をmapキーに変更し、値をtextureにこれで先ほどの赤色がビットマップ画像になる。CodePen.やた!イイダリョウのプロフィール画像(風街ばあじょん)が貼られた!JSコードはこんなんなりました。}最後にということでThree.js入門に再入門しました。なんと、前回は2018年!昨年はVue.jsに集中したため1年以上空いてしまった。その間、長めのJSコードに触れる機会も多く、当時よりコードの読解力が増えたように感じました。今度こそ中段せずにコンスタントに継続して行きたく思います。次回は入門編の続き「ジオメトリ」を見て行きたく思います。JSフレームワークReact、はじめました。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-06-03【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲ...Tone.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。