3章光源

最初の章でThree.jsの基本について学び、その次の章でシーンのもっとも重要な基本要素であるジオメトリとメッシュ、カメラについてより深く学びました。しかしそれらの章では、Three.jsのすべてのシーンで重要な役割を果たすライトについては触れていませんでした。ライトがなければ、描画されたものが何も見えません。Three.jsには多くのライトがあり、それぞれに特別な用途があるので、この章全体を使ってさまざまなライトを詳細に説明し、次の章でマテリアルの使用について説明する準備を行います。

[警告]

WebGL自体にはライトのサポートは組み込まれていません。Three.jsを使わない場合、本章で紹介するようなさまざまな種類のライトをシミュレートするWebGLのシェーダープログラムを個別に自分で書かなければいけなくなります。その場合は、次のサイトにWebGLでゼロからライティングをシミュレートする方法がわかりやすく説明されていますので参考にしてください。

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL

この章では、以下の項目について学びます。

  • Three.jsで利用可能な光源
  • 特定の光源を利用すべき状況
  • 光源の振る舞いを調整または設定する方法
  • 少し余談として、レンズフレアを作る方法

他のすべての章と同じように、ライトの振る舞いを実際に試すことができるサンプルをたくさん用意しています。この章に関するサンプルは提供されているソースの ...

Get 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.