前回(Vertices of icosphere)の続き～。前回はthree.jsでしたが今回はA-Frameのコンポーネントととして。中身はthree.jsですが
aframe-sprite-particles-componentなど、バリエーション豊かなコンポーネントはたくさん見つかりますが、細かいコントロールが出来ず結局スクラッチで作ってみる事に。
THREE.Pointsで何万パーティクルと動かしてみましたがスマホでも60fpsで動くんですね。
Particle System on A-Frame
Vertices of icosphere
Icosphere(polyhedron?)の頂点が欲しくて生成するプログラムを探してたところ有りました。
これを丸ごとコピーしてthree.jsで描画してみました。
Three.jsに「IcosahedronBufferGeometry」があってこれでも多面体の生成は可能ですが頂点が共有されておらず、正二十面体なら頂点12のところ60になってしまうので使えませんでした。
まるごとコピーは後ろめたいな…。完成版はnpmパッケージでISCライセンスで公開されているので問題は無いんでしょうけど。
今回のソースはデモから確認してください、JavascriptはHTMLに直書きです。
ところで、オリジナルのコードを記載してるObservableってサービスはなんだろ？Jupyter NotebookのJavascript版かな？
Three.js on Electron + Typescript
Three.jsを動かして見た。ついでに今回はTypescript、あといらんかったけどgulpでトランスパイルの実行。
ビルドタスク(タスクランナー)の事とか、今回は使ってませんがBrowserify(tsify)とかimportとかrequireとかmoduleだの、exportだの、、、何から理解していけばよいやらなかなかはかどりません。UnityとかFlashの開発の容易さを改めて思い知らされました。
ダウンロード: threejs_test2
npm install してnpm run build && start で実行できるハズ。
ところでElectronのダウンロードってやたら時間がかかる事がありますね。> node install.js から止まったまま動いてるのかどうかわからないのが不安なんですが、例えば
$ npm install electron@^1.6.15 --save-dev --loglevel verbose
とすると、詳細な進捗を出力してくれるので、ちょい安心できます。