週末はレストランやコンビニのお菓子のことを書いています。この広告は、90日以上更新していないブログに表示しています。影の描画(シャドウマッピング)Three.js今回は、Three.jsの「影」について、書きます。今回の内容は「シャドウマッピング」と専門的には言うのかな?Three.jsの場合、影をつけるには、4つの準備が必要です。trueこの4つのオブジェクトのプロパティに「影(シャドウマッピング)の有効化」を設定する必要があります。ややこしいのが物体の影の設定です。写真で、解説するとこんな感じです。写真の場合だと、影を作っているのは、青い球です。true」を設定します。true」を設定します。true」と覚えとくと、いいと思います。実際のコードはコチラです。実行すると、こんな感じです。上の影をよく見ると、少しギザギザです。綺麗に影を描画する方法は、このようにします。光源を生成している所に、「shadowMapWidth」と「shadowMapHeight」を追加すれば、綺麗な影が描画されます。実行すると、こうなります。綺麗な影が出ています。デフォルトでは、「shadowMapWidth」と「shadowMapHeight」は、それぞれの値は「512」となっています。「shadowMapWidth」と「shadowMapHeight」の値が大きいほど、処理は重くなります。当然ですが(笑)最後に、影を受けるのは、地面だけでは、ありません。他の物体も影を受ける時があります。上の写真のように、「赤色の球の影」を「青い球」が受けています。(赤色の枠線で囲った所です。true」を追加すれば、出来ます。実際のコードは、これです。Three.jsの影は、今回書いたこと以外にも、細かい設定が色々あります。その辺は、また今度書きます。ご不明な点などがありましたら、遠慮なくご質問ください。HemisphereLight今回は、Three.jsの「HemisphereLight」について書きます。今回は、Three.jsの「影ができない原因」を書きます。テクスチャの貼り方Three.jsの物体へのテクスチャの貼り方を書いていきます。Linkプロフィールid:gupuruプログラミング関連の事を色々書いています(^^)週末はレストランやコンビニのお菓子のことを書いています。