3D描画基礎

f_to

License: MIT License

Fork
4
Fav
0
View
78
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 68 lines
  • HTML 1 lines
  • CSS 10 lines
シーンの作成
最初に3D空間を作成します。
この中に3Dモデルや、カメラを配置していきます。

カメラの作成
空間があったとしても表示するのはスクリーン上になります。
なのでカメラを作成してどの部分を表示するのかを決定します。

ライトの作成
ライトの概要 : http://gupuru.hatenablog.jp/entry/2013/11/22/181506
単位球の三角関数で表記(スライドに説明有り)

WebGLレンダラーの作成
カメラで作成された画面を描画するキャンバスを作成します。
透明のまま(何も描かれていない)部分を何色にするかも決定しています。

オブジェクトの作成
3D空間上に配置するための物を作成します。
今回はキューブを作成しています。

マテリアルの作成
パラメーターの概要 : http://matorel.com/archives/602
作成したオブジェクトが何色なのかなどを決定するためのものです。

作成したボックスをシーンに追加
今までは作っただけだったのでここで何をシーン上のどこに配置するのかを決定します。
今回はキューブを、Red:47,Green:205,Blue:180で座標(0, 0, 0)に配置しています。

ループ部分
毎フレーム画面に表示しています。
  • 3D描画基礎
  • three.js r66
  • 3D描画基礎

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

f_to

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by