3D回転 射影変換(ホモグラフィ)

yaju3D

License: MIT License

Fork
3
Fav
2
View
6017
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 791 lines
  • HTML 28 lines
  • CSS 30 lines

CSS3を利用して画像を3D回転させることができるジェネレーター
3D CSS Tester

これをCSS3ではなく、あえてCanvasで動きだけ真似てみました。
3D回転する際は、一般的には三角形を分割するものですが、あえて射影変換で表示しています。

■パラメータ説明
X X方向に回転
Y Y方向に回転
Z Z方向に回転
theta 回転角度
Loop 回転ループ
drawStyle 画像補間方法
・Nearest(ニアレストネイバー)
・Bilinear(バイリニア補間)
Preserve3D 3D表現有無
Frontlogo(MDN) 前方ロゴ表示有無
Backlogo(HTML5) 後方ロゴ表示有無

※画像補完方法は、今回の画像では差はつきにくい。

追記 2016/10/08 glMatrix-0.9.5.min.jsがgooglecodeのサイトから消えてしまって動作しなくなっていたため、修正
"http://glmatrix.googlecode.com/files/glMatrix-0.9.5.min.js"
 ↓
"http://jsrun.it/assets/K/2/w/t/K2wty"

追記 2017/07/10
画像が表示されなくなっていたため、修正
onloadイベントで画像を表示するように修正
あとフレームを1000/60→1000/10までに落とした。

チラつくようになったので、チラつかないように隠しCanvasを1枚追加して
全て描画を終えてから表示するようにした。

  • 3D回転 射影変換(ホモグラフィ)
  • 3D回転 射影変換(ホモグラフィ)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

yaju3D

Author

静岡県島田市在住のアラフォープログラマー http://twitter.com/yaju/ http://blogs.wankuma.com/yaju/

http://jsdo.it/Yaju がログインできなくなってしまったので 別アカウントで再作成

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by