Forked from: kjunichi's 2011-08-02 2nd View Diff (198)

Fork
6
Fav
6
View
8875
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 158 lines
  • HTML 16 lines
  • CSS 1 lines

webglで描画すると面白くありません。
裏、表を区別しなくなるので、なぜか
canvasだとこのような不思議な見え方になります。

描画しているのはその昔、ニュートンで特集されていた
Mathematicaで書かせた曲面の一つのローマ曲面と
呼ばれる以下の数式で表されるものです。

var x = Math.sin(u)*Math.cos(u)*Math.sin(v)*Math.sin(v);
var y = Math.sin(u)*Math.sin(v)*Math.cos(v);
var z = Math.cos(u)*Math.sin(v)*Math.cos(v);

肝心のポリゴンの描画手順
THREE.Geometry を作成
THREE.Vertexを作成し、コレを
Geometry.verticesにpushしていく
THREE.Face3を頂点の順番を指定して作成し、
Face3.normalに法線ベクトルを登録する。
こうしてつくった。Face3を
Geometry.facesにpush

以上をひたすら繰り返し、全ての面が登録できたら、
new THREE.Mesh
してMeshを生成する。
あとはCubeとかのプリミティブと同様。

# 昔は無かったともうが
THREE.ParametricGeometryで今では簡単に出来るようになったので、
試したのが[こちら](http://jsdo.it/kjunichi/olHe)

## 作者のブログ
http://kjunichi.cocolog-nifty.com/

  • Three.jsでようやくポリゴンの描画が出来た
  • Three.js r42
  • Three.jsでようやくポリゴンの描画が出来た

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

kjunichi

Author

2011年8月、2013年5月の二人の息子がいるイクメンです。 jsdo.itに出会って以来、JavaScriptやHTML5に目覚めて、あれこれ作ってます。 なかでも、WebGL(Three.js)には衝撃を受けました。 だって、俺が学生の頃、200万円オーバーの SGIのIndyで動いていたOpenGLがJavaScriptで動いてるんだぜ! もう、これしかない!って感じで、夢中になって、それまで、javascriptだと?キモオタがマスコット つくってニヤつくだけのくだらない言語と馬鹿にしていた認識を改めたきっかけとなりました。 とはいえ、日中の仕事がサーバサイドよりなので、 Google App EngineにRingoJSを入れて、そこからJsdo.itのソースをHTTPで読み込ませ、 サーバサイドJavaScriptもJsdo.itで作ったりしています。写真は少し前の本人の写真です。息子の写真ではありませんw。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

vincicatvincicat:

3dbackface handling is a problem...

Forked

sort by