Three.js使ってみた
- 4. What s WebGL • ブラウザに標準搭載されている，canvasにCGをリアルタイ ムに描画できるAPI． • GPUを使っているため高速なレンダリングが可能．
- 6. WebGLを使った事例
- 12. そこで Three.js！ • Webブラウザ上で手軽にCGを描画できるWebGLのラッパ ーライブラリ． • とても広く使われており，盛んに開発されていている勢い のあるライブラリ．
- 14. Three.jsで出てくる言葉の解説 • シーン(scene)：描画する3Dモデル （Mesh）やライトを管理する． • メッシュ（Mesh）：3Dモデルそのも の．形状を定義するgeometryと質感や 色を定義するmaterialを組み合わせたも のというイメージ． • カメラ(camera)：その名の通りカメラ． • レンダラ(renderer)：カメラとシーンを 渡すとCGを描画してくれる．
- 15. 今回必要な処理 1. rendererの設定 2. cameraの設定 3. sceneの設定 4. トーラスのMeshを作成し， sceneに追加 5. ライトを定義し，sceneに追加 6. 出来上がったsceneとcameraを rendererに渡して描画して完成．
- 17. カメラの各パラメータ
- 18. 平行光源のイメージ
- 19. 環境光のイメージ