2019年03月02日

three.jsで太陽系を作ってみる

と、意気込んでみたのはいいものの。
結構ソースがでかくなってしまいました。

作るだけなら簡単なんですよ。球8個作って並べて公転させればそれっぽいし。
でもここからテクスチャ貼って自転入れて視点移動入れてとか凝りだすと
javascript+three.jsでも結構大変です。

まあでもやりました。やってやりましたよ。これです。

SolarSystem1.png

黒い棒にしか見えませんが、左から右に向かって太陽系の惑星が並んでます。
左の黄色いドットが太陽。一番右側には海王星があります。あるんです。

いやー、宇宙のスカスカ具合、甘く見てた。
全部視野に入れようとすると見えなくなるほどだとは。

知識では知ってたしmitakaでも知ってたはずなのに、
自分でやってみるとやっぱ実感が違いますね。
大きさはともかく距離遠すぎるんですよあなたたち。特に木星以降。
計算してみると、地球を1ドットで表現すると太陽から海王星まで
35万ドット必要らしい。320Kテレビでも足りんわ。

まあ言ってても太陽系が縮んでくれるわけでもなし。
仕方ないので距離と大きさをそれぞれ3乗根して色々追加したのがこちら。



開始時点では惑星直列状態ですが、
しばらくぼーっと見ていればなんかそれっぽくなります。
※ ちなみに右ドラッグは速度調整になってます。

これ、距離と大きさ以外にも色々嘘をついてまして。

公転は楕円じゃなく真円にしてるし(楕円の位置計算面倒だったので)
環境光なんてほんとは無いに等しいし(裏面が見えないのは寂しかったので)
惑星直列なんて実際起こったこと無いし(なので右上の日時は西暦ではなくただの目安)

そもそも公転方向とか傾き方向とかちゃんと合ってるか分からないっていうね。
まあでもそれっぽいからよいかな。うん。

ソースは続きで

タグ:Three.js IE不可
posted by Nick at 17:08| Comment(0) | TrackBack(0) | javascript

2019年02月23日

three.jsやってみました

昔DirectXでやろうとしていた3Dグラフィックス。
あれはあれで楽しかったのですが、やっぱりまともに付き合う気がしない。
結局ちょこっと使ってそのまま放置してました。

でも最近仕事でがっつりweb系やってまして、そこでthree.jsに触れる機会もありまして。
そのあまりの快適さに…なんていうか…その…感動…しちゃいましてね…

そこで、あれだけ面倒だった3Dをこんなに簡単に出来るんだぜ!
みたいなのをやってみます。

絶対に必要なのはレンダラとシーンとカメラ、エレメントのcanvas。
後はヘルパーを追加してそれっぽくしたのがこれ。



まずはこんなもんで。
視点移動はまた今度。(OrbitControlsは使いません。どうせカスタマイズしたくなるし)

以下ソースとコメント
タグ:Program Three.js
posted by Nick at 11:26| Comment(0) | TrackBack(0) | javascript